/* ====================================================================
   Penetron — лендінг ремаркетингу «кристалічна гідроізоляція»
   --------------------------------------------------------------------
   Ізоляція в обидва боки:
   • назовні — усе всередині `.pn-rm` / `.pn-sticky`, жодного голого
     селектора по тегу, жоден клас не починається без префікса `pn-`;
   • всередину — типографіка, кольори, margin і box-sizing задані явно,
     щоб тема (body 22px / #333 / Elementor-сітка) не зсувала верстку.

   Кольори: тільки бренд + холодні нейтралі бетону.
   Зеленого і фіолетового в палітрі немає — свідомо.
   ==================================================================== */

.pn-rm,
.pn-sticky {
    /* Бренд-константи з ТЗ, розділ 4 */
    --pn-blue: #00529B;
    --pn-orange: #FD9A00;

    /* Похідні від бренду */
    --pn-blue-deep: #003462;   /* «маса» — заливка кристалічної колонки */
    --pn-orange-ink: #7A4A00;  /* оранжевий, що проходить контраст на світлому */
    --pn-on-deep: #DCE7F2;     /* другорядний текст на глибокому синьому */

    /* Нейтралі: холодний бетон, не крем */
    --pn-ink: #10202E;
    --pn-slate: #5A6875;
    --pn-line: #CFD6DC;         /* декоративні розділювачі */
    --pn-line-strong: #7E8E9C;  /* контур, який щось означає: 3,4:1 на білому */
    --pn-surface: #EFF2F5;
    --pn-white: #FFFFFF;

    /* Ритм */
    --pn-gap: 1.25rem;
    --pn-section-y: clamp(2.75rem, 6vw, 5rem);
    --pn-measure: 62ch;
    --pn-radius: 3px;
}

.pn-rm *,
.pn-rm *::before,
.pn-rm *::after,
.pn-sticky *,
.pn-sticky *::before,
.pn-sticky *::after {
    box-sizing: border-box;
}

.pn-rm {
    /* Свідома міра сторінки. Колонка теми — 1370px, і рядок такої довжини
       на 19px нечитабельний, а заголовок у ній виглядає загубленим. */
    max-width: 1180px;
    margin-inline: auto;
    color: var(--pn-ink);
    font-size: 1.1875rem;   /* 19px — сайт живе на великому кеглі, свідомо */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* Тема інколи вішає власні відступи на заголовки й списки — гасимо в межах лендінгу */
.pn-rm h1,
.pn-rm h2,
.pn-rm h3,
.pn-rm p,
.pn-rm ul,
.pn-rm ol,
.pn-rm li,
.pn-rm table,
.pn-rm figure {
    margin: 0;
    padding: 0;
}

.pn-rm ul,
.pn-rm ol {
    list-style: none;
}

/* !important тут не ліньки, а єдиний спосіб: тема оголошує
   `.text-my-style ul { margin: 1em 0 1em 1.5em !important; padding-left: 1.2em !important }`
   і те саме для `ol`. Проти чужого !important специфічність не допомагає —
   потрібен свій. Наслідок без цього: КОЖЕН список лендінгу зсунутий на 22,8 px
   і має чужий верхній відступ 40 px, тому заголовок секції стоїть на іншій
   вертикалі, ніж її вміст. */
.pn-rm .pn-claims,
.pn-rm .pn-steps,
.pn-rm .pn-tasks,
.pn-rm .pn-facts,
.pn-rm .pn-core {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    margin-block-end: 0 !important;
}

.pn-rm .pn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Секції ─────────────────────────────────────────────────────────
   Вертикальний ритм задається РІВНО в одному місці, щоб модифікатори
   не скасовували одне одного. Модифікатори чіпають лише те, що названо. */
.pn-rm .pn-s {
    padding-block: var(--pn-section-y);
    border-block-start: 1px solid var(--pn-line);
}

.pn-rm .pn-s:first-child {
    border-block-start: 0;
}

/* ── Hero з фоновим зображенням ──────────────────────────────────────
   Виліт за текстову колонку зроблений тим самим прийомом, що й секція
   калькулятора: від'ємний margin, точно рівний власному padding. 100vw
   не використовуємо, бо при видимому скролбарі воно дає горизонтальний скрол.

   Затемнення подвійне і це навмисно:
   • частина впечена в сам файл (ліва третина ×0,26 з плавним виходом
     до 68% ширини) — темні пікселі стискаються краще, а головне: якщо
     CSS-накладка колись не застосується, білий текст усе одно лежатиме на
     темному, а не на світлому бетоні;
   • .pn-hero__scrim додає керовану частину і дозволяє на вузькому екрані
     зробити затемнення рівномірним, бо там текст займає всю ширину. */
.pn-rm .pn-s--hero {
    --pn-bleed: clamp(0.75rem, 3vw, 2.5rem);
    position: relative;
    isolation: isolate;              /* тримає z-index шарів усередині секції */
    margin-inline: calc(-1 * var(--pn-bleed));
    padding-inline: var(--pn-bleed);
    padding-block: clamp(2rem, 5vw, 4rem);
    border-radius: var(--pn-radius);
    overflow: hidden;
    background: var(--pn-blue-deep);  /* видно, поки картинка не прийшла */
}

.pn-rm .pn-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
}

.pn-rm .pn-hero__bg img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    /* Секція вища за 16:9, тому cover обрізає картинку з боків. Тримаємо в
       кадрі і темну ліву смугу під текстом, і саму тріщину з кристалами. */
    object-position: 18% 50%;
    display: block;
}

.pn-rm .pn-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Значення підібрані не на око: композит «текст на картинці плюс накладка»
       заміряний по реальних пікселях у зоні кожного текстового блоку, критерій
       WCAG AA. Впечене в файл затемнення cover частково обрізає, тому основну
       роботу робить саме ця накладка. */
    background: linear-gradient(
        to right,
        rgba(16, 32, 46, 0.72) 0%,
        rgba(16, 32, 46, 0.66) 46%,
        rgba(16, 32, 46, 0.30) 78%,
        rgba(16, 32, 46, 0.16) 100%
    );
}

/* Текст першого екрана тепер лежить на темному */
.pn-rm .pn-s--hero .pn-h1 { color: var(--pn-white); }
.pn-rm .pn-s--hero .pn-lead { color: var(--pn-on-deep); }
.pn-rm .pn-s--hero .pn-claims > li { color: var(--pn-white); }
.pn-rm .pn-s--hero .pn-claims > li::before { background: var(--pn-orange); }

.pn-rm .pn-s--hero .pn-btn--ghost,
.pn-rm .pn-s--hero .pn-btn--ghost:visited {
    border-color: var(--pn-white);
    color: var(--pn-white);
}

.pn-rm .pn-s--hero .pn-btn--ghost:hover {
    background: var(--pn-white);
    color: var(--pn-ink);
}

.pn-rm .pn-s--hero .pn-trust { border-block-start-color: rgba(255, 255, 255, 0.28); }
.pn-rm .pn-s--hero .pn-trust__line { color: var(--pn-white); }
.pn-rm .pn-s--hero .pn-trust__marks { color: var(--pn-on-deep); }
.pn-rm .pn-s--hero .pn-trust__flag { border-color: rgba(255, 255, 255, 0.35); }

/* Фокус на темному: оранжеве кільце, як у секції калькулятора */
.pn-rm .pn-s--hero a:focus-visible,
.pn-rm .pn-s--hero button:focus-visible {
    outline-color: var(--pn-orange);
}

/* ── Банер теми з назвою сторінки ───────────────────────────────────
   Шаблон single у темі малює перед контентом контейнер висотою 450 px:
   назва сторінки капслоком поверх сірого фото. На сторінці під платний
   трафік це перший екран без жодної інформації, плюс другий <h1>.

   Ховаємо ТІЛЬКИ на цій сторінці — клас `penetron-rm-page` вішає плагін.
   Селектор прив'язаний до Elementor-id контейнера: він містить рівно один
   віджет — заголовок. Якщо шаблон колись перезберуть, id зміниться і банер
   просто повернеться; це безпечна відмова, а не поламана сторінка. */
body.penetron-rm-page .elementor-element-91cc689 {
    display: none;
}

/* ── Секція 5 як головна дія сторінки ───────────────────────────────
   Калькулятор не повинен читатися як «ще один блок у ряду», тому це
   єдина секція, яка виходить за межі текстової колонки і стоїть на
   власній підставці.

   Колір навмисно не новий: це той самий --pn-blue-deep, яким у матриці
   намальована «маса» кристалічної технології. Той самий синій = те саме
   значення, а не другий акцент у палітрі.

   Виліт зроблено від'ємним margin, який РІВНО дорівнює власному padding,
   тому контент лишається на одній вертикалі з рештою сторінки на будь-якій
   ширині. 100vw тут свідомо не використано: при видимому вертикальному
   скролбарі воно дає горизонтальний скрол на всій сторінці. */
.pn-rm .pn-s--calc {
    --pn-bleed: clamp(0.75rem, 3vw, 2.5rem);
    margin-inline: calc(-1 * var(--pn-bleed));
    padding-inline: var(--pn-bleed);
    background: var(--pn-blue-deep);
    border-block-start: 0;
    border-radius: var(--pn-radius);
    color: var(--pn-white);
}

/* Лінійка одразу під темним блоком читалась би як випадкова */
.pn-rm .pn-s--calc + .pn-s {
    border-block-start: 0;
}

.pn-rm .pn-s--calc .pn-h2 {
    color: var(--pn-white);
}

.pn-rm .pn-s--calc .pn-lead--sub {
    color: var(--pn-on-deep);
}

/* ── Типографіка ────────────────────────────────────────────────────
   DINPro-Bold уже вантажить тема. Це корпоративний гротеск на основі DIN —
   шрифт промислових стандартів і технічної документації. Для сторінки про
   ДСТУ і випробування він доречний по суті, а не як прикраса. */

.pn-rm .pn-h1 {
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: clamp(1.95rem, 4vw, 3.1rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--pn-ink);
    max-width: 34ch;
    text-wrap: balance;
}

.pn-rm .pn-h2 {
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: clamp(1.55rem, 2.6vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--pn-ink);
    margin-block-end: clamp(1.25rem, 2.5vw, 2rem) !important;
    max-width: 30ch;
    text-wrap: balance;
}

.pn-rm .pn-lead {
    font-size: clamp(1.1875rem, 1.5vw, 1.375rem);
    line-height: 1.55;
    color: var(--pn-slate);
    max-width: var(--pn-measure);
    margin-block-start: 1.25rem !important;
}

.pn-rm .pn-lead--sub {
    color: var(--pn-slate);
    font-size: 1.1875rem;
}

/* ── Hero: чотири тези ──────────────────────────────────────────────
   Щільний блок без іконок-картинок (вимога ТЗ). Роль розділювача бере
   тонка синя засічка зліва — вона ж повторюється у кроках і задачах. */
.pn-rm .pn-claims {
    margin-block-start: clamp(1.75rem, 3vw, 2.5rem) !important;
    display: grid;
    gap: 0.875rem;
    max-width: 78ch;
}

.pn-rm .pn-claims > li {
    position: relative;
    padding-inline-start: 1.125rem;
    color: var(--pn-ink);
}

.pn-rm .pn-claims > li::before {
    content: "";
    position: absolute;
    inset-block: 0.5em auto;
    inset-inline-start: 0;
    width: 3px;
    height: 1.05em;
    background: var(--pn-blue);
}

/* ── Кнопки ─────────────────────────────────────────────────────────
   Оранжевий — тільки дія, як задано в ТЗ. Другорядна кнопка — контур,
   щоб дві дії не змагалися між собою. */
.pn-rm .pn-actions {
    margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pn-rm .pn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding-inline: 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--pn-radius);
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pn-rm .pn-btn--primary,
.pn-rm .pn-btn--primary:visited {
    background: var(--pn-orange);
    color: #241500;
}

.pn-rm .pn-btn--primary:hover {
    background: #E68B00;
    color: #241500;
}

.pn-rm .pn-btn--ghost,
.pn-rm .pn-btn--ghost:visited {
    background: transparent;
    border-color: var(--pn-blue);
    color: var(--pn-blue);
}

.pn-rm .pn-btn--ghost:hover {
    background: var(--pn-blue);
    color: var(--pn-white);
}

/* ── Полоса довіри під кнопками ──────────────────────────────────────
   Не «іконки-переваги», а один рядок фактів із прапорами злiва. Прапори
   не масштабуються під висоту рядка навмисно: у США пропорція 10:19, в
   України 2:3, і якщо задати обом однакову ширину, одна з них спотвориться.
   Тому фіксуємо ВИСОТУ, ширину лишаємо пропорційною. */
.pn-rm .pn-trust {
    margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
    padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
    border-block-start: 1px solid var(--pn-line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    max-width: 78ch;
}

.pn-rm .pn-trust__flags {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.pn-rm .pn-trust__flag {
    block-size: 1.375rem;
    inline-size: auto;
    display: block;
    border: 1px solid var(--pn-line);
    border-radius: 1px;
}

.pn-rm .pn-trust__text {
    display: grid;
    gap: 0.15rem;
}

.pn-rm .pn-trust__line {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--pn-ink);
}

.pn-rm .pn-trust__marks {
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--pn-slate);
    font-variant-numeric: tabular-nums;
}

/* ── Секція 2: три кроки ────────────────────────────────────────────
   Нумерація тут чесна: третій крок не може статися раніше за перші два. */
/* Тема повертає нумерацію списку правилом сильнішим за `.pn-rm ol`, і поруч
   із власним номером кроку виходило «1. 1». Свій номер лишаємо (він у стилі
   сторінки й з табличними цифрами), маркер теми гасимо. */
.pn-rm .pn-steps,
.pn-rm .pn-steps > li {
    list-style: none;
}

.pn-rm .pn-steps > li::marker {
    content: "";
}

.pn-rm .pn-steps {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.pn-rm .pn-step {
    border-block-start: 3px solid var(--pn-blue);
    padding-block-start: 1rem;
}

.pn-rm .pn-step__n {
    display: block;
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    color: var(--pn-blue);
    font-variant-numeric: tabular-nums;
}

/* Заголовків у кроках більше немає (ADDENDUM-06), тому вагу тримає сам текст:
   він більший за звичайний абзац, а номер лишається дрібною міткою послідовності. */
.pn-rm .pn-step__b {
    margin-block-start: 0.5rem !important;
    color: var(--pn-ink);
    font-size: 1.125rem;
    line-height: 1.55;
}

/* ── Секція 3: матриця технологій ───────────────────────────────────
   СИГНАТУРА СТОРІНКИ.
   Дві альтернативні технології намальовані КОНТУРОМ — це шари НА поверхні.
   Кристалічна намальована СУЦІЛЬНИМ БЛОКОМ — вона і є матеріалом.
   Форма кодує сам тезис сторінки, а не прикрашає його. */
.pn-rm .pn-matrix {
    overflow-x: auto;               /* страхувальна сітка для проміжних ширин */
    -webkit-overflow-scrolling: touch;
}

.pn-rm .pn-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.5rem 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.pn-rm .pn-table__corner {
    width: 22%;
    background: transparent;
    border: 0;
}

.pn-rm .pn-col {
    vertical-align: bottom;
    text-align: start;
    padding: 0.875rem 1rem;
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.25;
    border-radius: var(--pn-radius) var(--pn-radius) 0 0;
}

.pn-rm .pn-col__sub {
    display: block;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    margin-block-start: 0.25rem;
}

/* Прозорість тут була помилкою: slate під opacity 0.75 дає ~3,3:1, а це
   підпис, а не декор. Колір задано явно для кожного тла. */
.pn-rm .pn-col--outline .pn-col__sub { color: var(--pn-slate); }
.pn-rm .pn-col--solid .pn-col__sub { color: var(--pn-on-deep); }

/* Контур тут не оформлення, а зміст: дві альтернативні технології — це шар
   НА поверхні, тому вони намальовані рамкою. Отже рамка мусить читатися:
   --pn-line на білому дає 1,5:1, тому саме для матриці взято темніший
   --pn-line-strong (3,4:1). */
.pn-rm .pn-col--outline {
    background: var(--pn-white);
    color: var(--pn-slate);
    border: 1px solid var(--pn-line-strong);
    border-block-end: 0;
}

.pn-rm .pn-col--solid {
    background: var(--pn-blue-deep);
    color: var(--pn-white);
    border: 1px solid var(--pn-blue-deep);
    border-block-end: 0;
}

.pn-rm .pn-table__criterion {
    text-align: start;
    vertical-align: middle;
    padding: 0.875rem 0.75rem 0.875rem 0 !important;
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: var(--pn-ink);
    border-block-end: 1px solid var(--pn-line);
}

/* Тема має `td { padding: 15px 15px 0 !important }` — нижній відступ нуль,
   через що текст у клітинках притиснутий до низу. Тому тут теж !important. */
.pn-rm .pn-cell {
    vertical-align: middle;
    padding: 0.875rem 1rem !important;
    color: var(--pn-slate);
}

.pn-rm .pn-cell--outline {
    background: var(--pn-white);
    border-inline: 1px solid var(--pn-line-strong);
    border-block-end: 1px solid var(--pn-line-strong);
}

.pn-rm .pn-cell--solid {
    background: var(--pn-blue-deep);
    color: var(--pn-white);
    border-inline: 1px solid var(--pn-blue-deep);
    border-block-end: 1px solid rgba(255, 255, 255, 0.18);
}

.pn-rm .pn-table tbody tr:last-child .pn-cell {
    border-radius: 0 0 var(--pn-radius) var(--pn-radius);
}

.pn-rm .pn-table tbody tr:last-child .pn-cell--solid {
    border-block-end: 1px solid var(--pn-blue-deep);
}

/* WooCommerce смугує будь-яку таблицю на сайті правилом
   `table tbody > tr:nth-child(2n+1) > td, … > th` (специфічність 0,1,3).
   Класи вище мають 0,1,0 і програють: непарні рядки матриці отримували
   сіру заливку 7%, і білий текст у кристалічній колонці ставав нечитабельним.
   На локальному стенді без WooCommerce цього не було видно — знайдено на
   живому сайті. Нижче ті самі значення з достатньою специфічністю (0,3,4);
   !important не потрібен. */
.pn-rm .pn-table tbody > tr > td.pn-cell--outline { background: var(--pn-white); }
.pn-rm .pn-table tbody > tr > td.pn-cell--solid   { background: var(--pn-blue-deep); }
.pn-rm .pn-table tbody > tr > th.pn-table__criterion { background: transparent; }
.pn-rm .pn-table thead > tr > th.pn-col--outline  { background: var(--pn-white); }
.pn-rm .pn-table thead > tr > th.pn-col--solid    { background: var(--pn-blue-deep); }
.pn-rm .pn-table thead > tr > th.pn-table__corner { background: transparent; }

/* Тема малює власну верхню межу на кожній td/th (rgba(128,128,128,.5)).
   У кристалічній колонці це сірий шов поперек суцільної заливки, у колонці
   критеріїв — зайві бічні лінії. Гасимо явно: розділювачі рядків уже задані
   через border-block-end. */
.pn-rm .pn-table tbody > tr > td.pn-cell { border-block-start: 0; }
.pn-rm .pn-table tbody > tr > th.pn-table__criterion { border-block-start: 0; border-inline: 0; }

.pn-rm .pn-note {
    margin-block-start: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    max-width: 80ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--pn-slate);
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--pn-line);
}

/* ── Секція 4: задачі ───────────────────────────────────────────────
   Клієнт окремо просив зменшити картки — тому вони компактні: два рядки
   тексту й текстова кнопка, без зображень і без зайвого повітря. */
.pn-rm .pn-tasks {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.pn-rm .pn-task {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.125rem 1.25rem;
    background: var(--pn-surface);
    border-inline-start: 3px solid var(--pn-blue);
    border-radius: 0 var(--pn-radius) var(--pn-radius) 0;
}

.pn-rm .pn-task__sit {
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--pn-ink);
}

.pn-rm .pn-task__sol {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--pn-slate);
    flex: 1 1 auto;
}

.pn-rm .pn-task__go {
    align-self: flex-start;
    margin-block-start: 0.25rem;
    padding: 0.375rem 0;
    background: none;
    border: 0;
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--pn-orange-ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.pn-rm .pn-task__go:hover {
    color: var(--pn-blue);
}

.pn-rm .pn-task__arrow {
    transition: transform 0.15s ease;
}

.pn-rm .pn-task__go:hover .pn-task__arrow {
    transform: translateX(3px);
}

/* ── Секція 5: калькулятор ──────────────────────────────────────────
   Сам калькулятор живе в iframe і має власні стилі — ззовні тільки рамка
   й відступи. Висоту iframe виставляє батьківський скрипт плагіна
   калькулятора за postMessage, тому фіксованої висоти тут немає навмисно. */
.pn-rm .pn-calc-embed {
    margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    overflow: hidden;
    background: var(--pn-white);
}

.pn-rm .pn-calc-note {
    margin-block-start: 1rem !important;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--pn-orange);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--pn-on-deep);
    max-width: 70ch;
}

/* ── Секція 6: два канали консультанта ──────────────────────────────
   Однаковий стиль обох кнопок — це вимога, а не випадковість: жоден канал
   не форсуємо, тож ані заливки, ані розміру, ані порядку, які б робили один
   з них головним. */
.pn-rm .pn-channels {
    margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pn-rm .pn-channel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding-inline: 1.75rem;
    border: 2px solid var(--pn-blue);
    border-radius: var(--pn-radius);
    background: var(--pn-white);
    color: var(--pn-blue);
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 1.0625rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pn-rm .pn-channel:hover {
    background: var(--pn-blue);
    color: var(--pn-white);
}

.pn-rm .pn-channels__note {
    margin-block-start: 1.25rem !important;
    max-width: var(--pn-measure);
    color: var(--pn-slate);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.pn-rm .pn-disclaimer {
    margin-block-start: 1rem !important;
    max-width: var(--pn-measure);
    padding: 0.75rem 1rem;
    background: var(--pn-surface);
    border-inline-start: 3px solid var(--pn-orange);
    border-radius: 0 var(--pn-radius) var(--pn-radius) 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--pn-slate);
}

/* ── Секція 7: докази ───────────────────────────────────────────────
   Реєстр, а не «переваги»: тонкі лінійки замість плашок, табличні цифри,
   жодних піктограм. Це форма технічного паспорта — того самого жанру, до
   якого належать ДСТУ і протоколи випробувань у самих фактах.

   Дві колонки скорочують висоту вдвічі, а лінійки в рядку вирівнюються між
   колонками, бо grid тримає спільну висоту рядка. */
.pn-rm .pn-facts {
    display: grid;
    gap: 0 clamp(1.5rem, 4vw, 3.5rem);
    /* min() обов'язковий: гола minmax(24rem, 1fr) не дає колонці стиснутися
       нижче 24rem, і на екрані 390px сторінка отримувала горизонтальний скрол. */
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    font-variant-numeric: tabular-nums;
}

.pn-rm .pn-fact {
    padding-block: 0.875rem;
    border-block-end: 1px solid var(--pn-line);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--pn-ink);
}

/* Без nowrap: він тримав купи цілі фрази («понад 25 років») і на вузькому
   екрані виштовхував їх на власний рядок, розриваючи речення. */
.pn-rm .pn-fact__k {
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-weight: 700;
    color: var(--pn-blue);
}

/* ── Секція 8: ядро системи ─────────────────────────────────────────
   П'ять реальних товарів. Вимога клієнта «картки не гігантські» діє й тут,
   тому фото обмежене висотою, а не пропорцією зображення.

   Рядки картки поділені між усіма картками ряду через subgrid: фото, назва,
   роль, витрата, ціна і кнопка стоять на одній лінії в усіх п'яти. Без цього
   картка Peneplug з коротким текстом «провалювалася» і ламала ритм ряду.
   Перед subgrid стоїть звичайний grid-template-rows як запобіжник у тій самій
   каскадній позиції — там, де subgrid не підтримується, картки просто
   лишаються незалежними. */
.pn-rm .pn-core {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0.75rem;
}

@media (min-width: 33rem) {
    .pn-rm .pn-core { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 48rem) {
    .pn-rm .pn-core { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 64rem) {
    .pn-rm .pn-core { grid-template-columns: repeat(5, 1fr); }
}

.pn-rm .pn-core__item {
    display: grid;
    grid-row: span 6;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-rows: subgrid;
}

/* Уся картка — один лінк. Одна точка табуляції, велика площа дотику, і
   «витрина», а не список посилань: підкреслення теми знято, стан дає рамка. */
.pn-rm .pn-prod,
.pn-rm .pn-prod:visited {
    display: grid;
    grid-row: span 6;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-rows: subgrid;
    gap: 0;
    padding: 0.75rem 0.875rem 0.875rem;
    background: var(--pn-white);
    border: 1px solid var(--pn-line);
    border-block-start: 3px solid var(--pn-blue);
    border-radius: 0 0 var(--pn-radius) var(--pn-radius);
    color: var(--pn-ink);
    text-decoration: none;
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pn-rm .pn-prod:hover {
    background: var(--pn-surface);
    border-color: var(--pn-blue);
    border-block-start-color: var(--pn-blue-deep);
}

.pn-rm .pn-prod__media {
    display: grid;
    place-items: center;
    block-size: 7.5rem;
    margin-block-end: 0.625rem;
}

.pn-rm .pn-prod__img {
    max-block-size: 7.5rem;
    max-inline-size: 100%;
    inline-size: auto;
    block-size: auto;
    object-fit: contain;
    mix-blend-mode: multiply;   /* білі підкладки фото зливаються з карткою */
}

.pn-rm .pn-prod__name {
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.3;
    color: var(--pn-blue);
}

.pn-rm .pn-prod__role {
    margin-block-start: 0.25rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--pn-slate);
}

/* Технічна цифра — для підрядника. Дрібним рядком, щоб не тиснути на частника. */
.pn-rm .pn-prod__spec {
    margin-block-start: 0.5rem;
    padding-block-start: 0.5rem;
    border-block-start: 1px solid var(--pn-line);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--pn-slate);
    font-variant-numeric: tabular-nums;
}

.pn-rm .pn-prod__price {
    margin-block-start: 0.5rem;
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--pn-ink);
    font-variant-numeric: tabular-nums;
}

.pn-rm .pn-prod__stock {
    display: block;
    margin-block-start: 0.15rem;
    font-family: system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--pn-orange-ink);
}

.pn-rm .pn-prod__cta {
    align-self: end;
    margin-block-start: 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "DINPro-Bold", system-ui, sans-serif;
    font-size: 0.9375rem;
    color: var(--pn-orange-ink);
}

.pn-rm .pn-prod__arrow {
    transition: transform 0.15s ease;
}

.pn-rm .pn-prod:hover .pn-prod__arrow {
    transform: translateX(3px);
}

/* Це умова виконання робіт, а не виноска, тому кегль і колір як у тексту. */
.pn-rm .pn-core__temp {
    margin-block-start: clamp(1rem, 2vw, 1.5rem) !important;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--pn-blue);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--pn-ink);
}

/* ── Мобільна sticky-панель ─────────────────────────────────────────
   Показується тільки на вузьких екранах: на десктопі ті самі дві дії вже
   є в hero, дублювати їх панеллю нема потреби. */
.pn-sticky {
    display: none;
}

/* ── Фокус ──────────────────────────────────────────────────────────
   Кільце мусить читатися на тлі, на якому лежить, а не бути «фірмовим».
   Оранжевий на білому дає 2,14:1 — нижче за 3:1, які WCAG вимагає від
   нетекстових індикаторів, тому на світлому кільце темне (16,6:1), а на
   глибокому синьому — оранжеве (5,9:1). */
.pn-rm a:focus-visible,
.pn-rm button:focus-visible,
.pn-sticky a:focus-visible {
    outline: 3px solid var(--pn-ink);
    outline-offset: 3px;
    border-radius: 2px;
}

.pn-rm .pn-s--calc a:focus-visible,
.pn-rm .pn-s--calc button:focus-visible {
    outline-color: var(--pn-orange);
}

/* ====================================================================
   Мобільні
   ==================================================================== */
@media (max-width: 860px) {

    /* На вузькому екрані текст займає всю ширину, тому затемнення рівномірне,
       а не зсунуте влiво. Крапка обрізання картинки теж зсувається до тріщини. */
    .pn-rm .pn-hero__scrim {
        background: linear-gradient(
            to bottom,
            rgba(16, 32, 46, 0.82) 0%,
            rgba(16, 32, 46, 0.86) 100%
        );
    }

    .pn-rm .pn-hero__bg img {
        object-position: 42% 50%;
    }


    /* Матриця перебудовується у групи ПО КРИТЕРІЮ: у кожній групі три
       підписані значення поруч. Порівняння зберігається, горизонтального
       скролу немає, кегль не зменшується — вимога ТЗ до секції 3.
       Заливка «контур / маса» лишається тією ж. */
    .pn-rm .pn-matrix {
        overflow-x: visible;
    }

    .pn-rm .pn-table,
    .pn-rm .pn-table thead,
    .pn-rm .pn-table tbody,
    .pn-rm .pn-table tr,
    .pn-rm .pn-table th,
    .pn-rm .pn-table td {
        display: block;
        width: auto;
    }

    .pn-rm .pn-table {
        border-spacing: 0;
    }

    .pn-rm .pn-table thead {
        display: none;
    }

    .pn-rm .pn-table tbody tr {
        margin-block-end: 1.25rem;
    }

    .pn-rm .pn-table__criterion {
        padding: 0 0 0.5rem;
        border-block-end: 0;
        font-size: 1.0625rem;
        color: var(--pn-blue);
    }

    .pn-rm .pn-cell {
        padding: 0.625rem 0.875rem;
        margin-block-end: 0.375rem;
        border-radius: var(--pn-radius);
        font-size: 1rem;
    }

    .pn-rm .pn-cell--outline {
        border: 1px solid var(--pn-line-strong);
    }

    .pn-rm .pn-cell--solid {
        border: 1px solid var(--pn-blue-deep);
    }

    .pn-rm .pn-table tbody tr:last-child .pn-cell {
        border-radius: var(--pn-radius);
    }

    /* Підпис технології — те, що на десктопі стоїть у шапці таблиці */
    .pn-rm .pn-cell::before {
        content: attr(data-pn-tech);
        display: block;
        font-family: "DINPro-Bold", system-ui, sans-serif;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin-block-end: 0.25rem;
    }

    /* Той самий випадок, що й .pn-col__sub: на мобільному цей підпис —
       єдине, що каже, до якої технології належить значення. */
    .pn-rm .pn-cell--outline::before { color: var(--pn-slate); }
    .pn-rm .pn-cell--solid::before { color: var(--pn-on-deep); }

    /* Панель дій знизу */
    .pn-sticky {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        /* На сайті вже живуть три плаваючі віджети: чат `penw` (z 99998),
           кнопка дзвінка `bingc` (z 99999999) і Popup Maker. З z-index 90
           панель опинялася під ними, і тап по «Консультант» перехоплював
           бульбашка чату. Ставимо вище за чат; кнопка дзвінка лишається
           зверху — її перенос це рішення клієнта, не наше. */
        z-index: 100000;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.97);
        border-block-start: 1px solid var(--pn-line);
    }

    .pn-sticky .pn-sticky__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 3rem;
        border-radius: var(--pn-radius);
        border: 2px solid var(--pn-blue);
        color: var(--pn-blue);
        background: var(--pn-white);
        font-family: "DINPro-Bold", system-ui, sans-serif;
        font-size: 1rem;
        text-decoration: none;
    }

    .pn-sticky .pn-sticky__btn--primary,
    .pn-sticky .pn-sticky__btn--primary:visited {
        background: var(--pn-orange);
        border-color: var(--pn-orange);
        color: #241500;
    }

    /* Щоб футер теми не ховався під панеллю */
    body.penetron-rm-page {
        padding-block-end: 4.75rem;
    }

    /* Кнопка дзвінка (віджет bingc, z-index 99999999) стоїть у лівому нижньому
       куті й накривала «Розрахунок». Ховати її не можна — дзвінок робочий
       канал, — тому піднімаємо ВИЩЕ панелі, а не прибираємо. Зсув = висота
       панелі плюс запас, з урахуванням safe-area на iPhone.
       Діє тільки на цій сторінці: клас `penetron-rm-page`. */
    body.penetron-rm-page .bingc-phone-button,
    body.penetron-rm-page .bingc-passive,
    body.penetron-rm-page .bingc-active {
        transform: translateY(calc(-4.25rem - env(safe-area-inset-bottom)));
    }

    .pn-rm .pn-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-rm *,
    .pn-sticky * {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}