/**
 * Мобільна гілка — чотири модалки.
 * Макети: пакет 151:5955 (402×1956), послуга 147:4559 (402×942),
 *         кейс 173:958 (402×1139), лід-форма 150:5815 (402×666).
 *
 * Усі числа зняті з рендерів 1:1 (figma-ref/mobile/*.png) і переведені
 * в CSS-бокси через метрики MuseoSansCyrl (upm 1000, asc 770/771/772,
 * cap 700/703/706, x-height 500/503/506, hheaLineGap 200):
 *   baseline = boxTop + (lh − fs)/2 + asc·fs
 *   capTop   = baseline − cap·fs
 * Figma центрує рядок по капітелі, CSS — по боксу asc/desc, тому там,
 * де текст вирівняний по центру (кнопки, бейдж ціни), додано зсув
 * 0.081·fs ≈ 1.2px у вигляді padding-top (позначено «зсув Figma»).
 *
 * Кожен селектор із префіксом [data-layout="mobile"] — десктоп не чіпається.
 */

/* ==================================================== Оболонка модалки */

/* На десктопі .modal — грід із padding 140/40/80 і колонкою по вмісту.
   На 402 колонка max-content розпиралась до 1091px (три колонки «Що входить»),
   тому гілка переходить на блок: діалог рівно у ширину полотна. */
[data-layout="mobile"] .modal {
  display: block;
  padding: 0;
}

/* display:block вище за .modal[hidden]{display:none} десктопу — повертаємо приховування */
[data-layout="mobile"] .modal[hidden],
[data-layout="mobile"] .modal[data-variant][hidden] { display: none; }

[data-layout="mobile"] .modal__dialog {
  width: 100%;
  max-width: none;
}

/* Десктопні 0.94 лишають сторінку ледь видимою крізь підкладку (виміряно на
   402: поза карткою лід-форми значення гуляють 28..42). У мобільному фреймі
   150:5815 поза карткою РІВНО один колір — (29,29,29) на всій площі, жодного
   іншого пікселя. Тому на мобільній гілці підкладка суцільна. */
[data-layout="mobile"] .modal__backdrop { background: #1D1D1D; }

[data-layout="mobile"] .modal[data-variant="service"] .modal__dialog { max-width: none; }

/* Хрестика закриття в мобільних макетах немає в ЖОДНОМУ з чотирьох фреймів,
   а Esc на телефоні недоступний і тапнути повз повноекранне вікно неможливо.
   Тому кнопка зроблена самостійно: чорнило 14×14, штрих 2.5 — те саме, що
   в .nav__close мобільного меню. Позиція — правий верхній кут, по правому
   краю контентної колонки (368), фіксована, щоб лишатись видимою під час
   скролу модалки пакета (1956px). */
[data-layout="mobile"] .modal__close {
  position: fixed;
  top: 15.5px;
  right: 29.5px;
  z-index: 3;
  width: 23px;
  height: 23px;
  display: block;
  padding: 0;
  color: var(--ink);
}
/* Зона дотику 45×45 навколо іконки 23 — самої іконки не змінює */
[data-layout="mobile"] .modal__close::before {
  content: "";
  position: absolute;
  inset: -11px;
}
[data-layout="mobile"] .modal__close svg {
  display: block;
  width: 23px;
  height: 23px;
}
/* viewBox 24, геометрія 12 од. → 10.5px + штрих 2.5px = чорнило рівно 14px */
[data-layout="mobile"] .modal__close svg path { stroke-width: 2.6; }
[data-layout="mobile"] .modal__close:hover { transform: none; }

/* На білих вікнах (кейс, лід) хрестик темний */
[data-layout="mobile"] .modal[data-variant="case"] .modal__close,
[data-layout="mobile"] .modal[data-variant="lead"] .modal__close { color: #1D1D1D; }

/* ================================================== Модалка пакета (151:5955) */

/* Вікно впритул до країв полотна; у рендері видно лише легке скруглення кутів */
[data-layout="mobile"] .mpkg {
  border-radius: 4px;
  padding-bottom: 111px;   /* макет: остання плитка 1844 → низ фрейму 1956 */
}

/* Макет: фото 402×272, вуаль стартує на 128 (та сама пропорція, що на
   десктопі: 338/719 = 0.470 → 272 × 0.470 = 128) */
[data-layout="mobile"] .mpkg__hero { height: 272px; }
[data-layout="mobile"] .mpkg__veil { inset: 128px 0 0; }

/* Бейдж ціни. Плашка в рендері переміряна по краях мідної заливки:
   x 210.13..369.88 (159.74), y 79.0..124.75 (45.75) — тобто на 2px ширша
   й на 0.75 вища, ніж було взято раніше (158×45). Сам набір «145 USD/м²»
   стоїть правильно (чорнило 225.9..354.0 і в макеті, і на сайті), тому
   ширина добирається полями плашки, а не кеглем. */
[data-layout="mobile"] .mpkg__price {
  top: 79px;
  right: 32.12px;          /* правий край плашки 369.88 */
  gap: 10.85px;            /* «ВІД» у макеті на 1.1px правіше, ніж було */
}
[data-layout="mobile"] .mpkg__price-label {
  /* зсув Figma: капітель «ВІД» 96.75..107.4. 3.2 замість 4 — компенсація
     того, що плашка підросла на 0.75, а align-items:center опускає підпис
     на половину цього приросту */
  padding-top: 3.2px;
  font-size: 14.4px;
  line-height: 19px;
}
/* 45.75 = 15.3 + 19 + 11.45; падінги асиметричні саме через зсув Figma.
   Приріст висоти пішов увесь у нижнє поле: Chrome квантує базову лінію до
   цілого пікселя, і навіть +0.35 зверху зсували набір на цілий піксель униз. */
[data-layout="mobile"] .mpkg__price-box {
  padding: 15.3px 14.5px 11.45px;
  border-radius: 4px;
  font-size: 24px;
  line-height: 19px;
}

/* Макет: капітель «ПАКЕТ» на y=199, колонка 333 (ліве поле 35, праве 34) */
[data-layout="mobile"] .mpkg__body { padding: 199.2px 34px 0 35px; }

[data-layout="mobile"] .mpkg__eyebrow {
  font-size: 15px;
  line-height: 14.6px;
}
/* «BASE»: капітель 224.3..249, кегль 35 (звірено шириною набору й висотою капітелі) */
[data-layout="mobile"] .mpkg__title {
  margin-top: 13.2px;
  font-size: 35px;
  line-height: 25px;
}
/* базова лінія 284.5 */
[data-layout="mobile"] .mpkg__tagline {
  margin-top: 18.7px;
  font-size: 15px;
  line-height: 19.5px;
}
/* три рядки, базові лінії 317.5 / 336.5 / 355.5 */
[data-layout="mobile"] .mpkg__desc {
  margin-top: 13.8px;
  max-width: none;
  font-size: 15px;
  line-height: 19px;
}

/* Чипи: ряд із трьох → стовпчик на всю ширину. 378..436.5, 450..508.5, 522..580.5 */
[data-layout="mobile"] .mpkg__benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: 13.5px;
  margin-top: 17px;
}
/* Рамка: у рендері верх чипа дає два рядки покриття (1.00 + 0.51), тобто
   товщина 1.5px; десктопні 2.4 × 0.6 = 1.44. Chrome округлює border-width до
   цілого пікселя пристрою (перевірено: 1.44px дає computed 1px і на dpr 1, і
   на dpr 3), тому рамка намальована inset-тінню — вона лягає субпіксельно.
   Внутрішня геометрія лишилась як була: 14.5 = 1 рамки + 13.5, тобто
   іконка й текст стоять на тих самих x, що й до правки. */
[data-layout="mobile"] .mpkg__benefit {
  gap: 13.5px;
  min-height: 58.5px;
  padding: 0 14.5px;
  border: 0;
  box-shadow: inset 0 0 0 1.44px rgba(184, 115, 51, 0.54);
  border-radius: 3.6px;
  font-size: 15px;
  line-height: 19px;
}
/* бокс іконки 26 (геометрія maximize 21, settings 25 — збігається з рендером) */
[data-layout="mobile"] .mpkg__benefit .icon--benefit {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

/* Проміжок між секціями: 580.5 → 637.4 і 1317 → 1375.3 */
[data-layout="mobile"] .mpkg__section { margin-top: 57.5px; }

/* Заголовок секції переноситься на два рядки: кегль 30, інтерліньяж 39
   (на десктопі 50/35 — інтерліньяж НЕ множиться на 0.6, інакше рядки злипнуться) */
[data-layout="mobile"] .mpkg__subtitle {
  font-size: 30px;
  line-height: 39px;
}

/* Три колонки → стовпчик; висота плаває за вмістом */
/* Верх першої картки в макеті на y=727.8 (рядок 727 покритий на 26%, 728
   майже повністю), а не на 728.55. padding-bottom повертає ті ж 0.7px
   наступній секції, щоб підзаголовок «Вартість» лишився на місці. */
[data-layout="mobile"] .mpkg__cols {
  grid-template-columns: 1fr;
  gap: 12.5px;
  margin-top: 11.9px;
  padding-bottom: 0.4px;
  min-height: 0;
}
/* grid-template-rows: auto auto 1fr десктопу давав зайвий порожній ряд
   після того, як фото колонки сховане, і разом з ним зайвий gap унизу картки */
[data-layout="mobile"] .mpkg__col {
  grid-template-rows: auto;
  gap: 21px;
  min-height: 0;
  padding: 21.6px 21.6px 17.25px;
  border-radius: 3.6px;
}
[data-layout="mobile"] .mpkg__col-title {
  font-size: 15px;
  line-height: 19.7px;
}
/* У макеті галочка стоїть не по центру рядка, а на 2.5px вище — тому
   вирівнювання по верху рядка плюс власний відступ іконки */
[data-layout="mobile"] .mpkg__list li {
  align-items: flex-start;
  gap: 6.4px;
  font-size: 15px;
  /* крок рядків у макеті 25.09 (центроїди галочок: 800.92 / 826.01 / 851.09 /
     876.17 / 901.26). Те, що знято з інтерліньяжу, повернуто в padding-bottom
     картки, тож висоти карток лишаються 205 / 205 / 154.8, як у макеті. */
  line-height: 25.09px;
}
[data-layout="mobile"] .mpkg__list li.mpkg__list-note {
  margin-top: 6px;
  padding-left: 16.4px;      /* галочка 10 + проміжок 6.4 */
  font-size: 12px;
  line-height: 16px;
}
[data-layout="mobile"] .mpkg__list .icon--check {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  margin-top: 5.7px;
}
/* У мобільному макеті знімків у колонках немає (висоти карток це підтверджують) */
[data-layout="mobile"] .mpkg__col-img { display: none; }

/* Одна колонка (Safe / Smart / Energy Home): на 402 вона має бути такою ж,
   як будь-яка колонка в стовпчику, тож десктопні модифікатори скасовуємо —
   фото праворуч (його тут і так сховано) і список у два стовпчики */
[data-layout="mobile"] .mpkg__col--media { grid-template-columns: minmax(0, 1fr); }
[data-layout="mobile"] .mpkg__col--media .mpkg__col-title,
[data-layout="mobile"] .mpkg__col--media .mpkg__list { grid-column: auto; }
[data-layout="mobile"] .mpkg__list--split { display: grid; columns: auto; }

/* Плитки вартості: 162×181, проміжки 9. auto-fit дає рівно дві колонки на 333
   (4 плитки Base → 2×2, як у макеті) і одну — коли плитка одна. */
[data-layout="mobile"] .mpkg__costs {
  grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
  gap: 9px;
  margin-top: 19.7px;
}
/* Підпис притиснутий до верху, значення — до низу: у макеті «Від» стоїть на
   тій самій відстані від низу плитки і в дворядкових, і в однорядкових підписах */
[data-layout="mobile"] .mpkg__cost {
  align-content: space-between;
  gap: 0;
  min-height: 181px;
  /* У макеті довгі підписи («ВАРТІСТЬ РОБОТИ» 134px, «ДИЗАЙН-ПРОЄКТ» 129px)
     і рядок «145 USD/м²» майже дістають правого краю плитки — тому праве поле
     мале, інакше вони переносяться зайвий раз */
  padding: 30px 6px 28.8px 18px;
  border-radius: 3.6px;
}
/* Мідна плитка «РАЗОМ» має в макеті власне ліве поле — на 3px менше за решту.
   Виміряно по рендеру 151:5955 у координатах, відрахованих від лівого краю
   самої плитки (звичайні 35 і 206, мідна 206): перший штрих «РАЗОМ» 16,
   «Від» 16, «145» 17 — проти 19 / 19 / 20 у трьох звичайних плиток.
   Крос-кореляція профілів чорнила дає зсув −2.85 / −3.25 / −3.10 при
   кореляції 0.99, тоді як ті самі три рядки звичайних плиток збігаються
   з макетом у межах 0.2px. Отже 18 − 3 = 15. */
[data-layout="mobile"] .mpkg__cost--total { padding-left: 15px; }
[data-layout="mobile"] .mpkg__cost-label {
  font-size: 15px;
  line-height: 19px;
}
/* На десктопі «Від», число й одиниця — три рядки гріда. У макеті число й
   одиниця стоять поруч на спільній базовій лінії. */
[data-layout="mobile"] .mpkg__cost-value {
  grid-template-columns: max-content auto;
  align-items: baseline;
  gap: 14.2px 0;
}
[data-layout="mobile"] .mpkg__cost-from {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 10.2px;
}
[data-layout="mobile"] .mpkg__cost-value b {
  font-size: 43.5px;
  line-height: 30.6px;
}
/* У макеті число на звичайних плитках мідне #B87333 (виміряно по рендеру:
   рівно (184,115,51) на всіх трьох), а на плитці «РАЗОМ» з мідним фоном —
   біле. Десктопний modals.css кольору не задає, тому там успадковувався
   білий текст модалки. */
[data-layout="mobile"] .mpkg__cost:not(.mpkg__cost--total) .mpkg__cost-value b {
  color: var(--accent);
}
/* Вага 500 правильна: Figma растеризує текст на ~11% легше за Chrome при тій
   самій вазі — контроль на слові «Від» (однаковий вміст): сайт 21425 одиниць
   чорнила й ширина 21, макет 19339 і 20. Та сама пропорція, що на «USD/м²». */
[data-layout="mobile"] .mpkg__cost-value i {
  font-size: 15px;
  line-height: 14.4px;
}
[data-layout="mobile"] .mpkg__cost-value b + i { margin-left: 12.2px; }
/* Той самий випадок, що з лівим полем: у мідної плитки власний проміжок між
   числом і одиницею. Чистого поля між чорнилом «145» і чорнилом «USD/м²»
   у макеті 7px, у трьох звичайних плитках — рівно 15px (і стільки ж на сайті).
   Літера «U» мідної плитки стоїть на 11.1px лівіше, ніж на сайті; 3 із них
   забирає ліве поле вище, решту 8.1 — цей проміжок: 12.2 − 8.1 = 4.1. */
[data-layout="mobile"] .mpkg__cost--total .mpkg__cost-value b + i { margin-left: 4.1px; }

/* У макеті пакета Base примітки немає — масштаб узятий за рештою тексту */
[data-layout="mobile"] .mpkg__costs-note {
  margin-top: 24px;
  font-size: 15px;
  line-height: 19px;
}

/* ================================================= Модалка послуги (147:4559) */

/* Повноекранний аркуш: без полів, без радіуса, фото від краю до краю */
[data-layout="mobile"] .msrv {
  min-height: 942px;
  padding-bottom: 73px;
  border-radius: 0;
}

/* Затемнення фото — рівномірне, чорне 50%, без градієнта «темніше донизу».
   Виміряно 26.09 на всіх шести кадрах (147:4559, 196:2, 196:33, 196:65, 196:95,
   197:125): фон кадру зіставлено з файлом фото (крос-кореляція 0.86–0.996)
   і для кожного каналу підібрано кадр = a·фото + b по смугах y 0–60 / верх /
   низ / останні 70px. Скрізь a = 0.47–0.48, b ≈ 1, без залежності від y —
   тобто чорна плашка ≈ 50%. Остаточно добрано по самому сайту: різниця
   яскравості фону сайт − кадр (смуги x 2–27, 376–390 і верх 3–55, середнє
   по шести вікнах) на 0.52 / 0.51 / 0.50 — −2.0 / −1.0 / −0.1 рівня.
   Раніше вуаль тут була вимкнена (opacity 0), бо фото в «Дизайн інтерʼєру»
   здавалось темним саме по собі — насправді воно було і кадроване (див.
   нижче), і затемнене так само, як у п'яти нових кадрах. */
[data-layout="mobile"] .msrv__veil {
  opacity: 0.5;
  background: #000;
}

/* Кадрування фото — у кожному кадрі своє (imageTransform у Figma): фото
   збільшене відносно cover. Числа — з тієї ж крос-кореляції (масштаб перебором
   із кроком 0.1%, зсув — до пікселя), переведені у три параметри:
   object-position (який шматок cover-кадру), scale і transform-origin.
   Розраховано на вікно висотою 942 (min-height): на такому вікні фото лежить
   рівно як у кадрі — той самий розмір і зсув, навіть коли кадр 979 (заголовок
   у два рядки, а реальний текст коротший за заглушку). Точка масштабу завжди
   всередині вікна — тому збільшений бокс <img> гарантовано накриває вікно
   будь-якої висоти (вміст img обрізається по його боксу, тож точка поза
   вікном оголювала б край). Прив'язка — до ID вкладення (data-photo): нове
   фото з адмінки отримає звичайне cover без збільшення.
   Кадр фото — завжди 942 від верху вікна, а не вся висота вікна (30.09):
   вище вікно (довші тексти) лише продовжує фото донизу, а не збільшує й не
   зсуває його. Раніше кроп рахувався від висоти вікна, і в «Пакетах для
   інвесторів» (вікно 1065 після нових текстів) фото збільшилось на 13% —
   кореляція з 196:33 у смугах без тексту впала до 0.66 / −0.33; у
   «Бізнес-просторах» (964) — 0.35 / 0.43. З кадром 942 — 0.96 / 0.87 і
   0.96 / 0.92, як у вікнах висотою рівно 942. Запобіжник: якщо вікно вище,
   ніж сягає низ збільшеного фото (942·c, c = p + (1 − p)·zoom, p — точка
   масштабу по y), кадр росте разом із вікном і фото все одно накриває його
   до низу; для нового фото без кропу (c = 1) це звичайне cover на все вікно. */
[data-layout="mobile"] .msrv__media[data-photo] .msrv__img {
  height: max(942px, calc(100% / var(--msrv-cover, 1)));
  object-position: var(--msrv-pos, 50%) 50%;
  transform: scale(var(--msrv-zoom, 1));
  transform-origin: var(--msrv-origin, 50% 50%);
}
[data-layout="mobile"] .msrv__media[data-photo="99"]  { --msrv-pos: 100%;   --msrv-zoom: 1.3651; --msrv-origin: 65.90% 91.01%; } /* Дизайн інтерʼєру, 147:4559 */
[data-layout="mobile"] .msrv__media[data-photo="100"] { --msrv-pos: 67.15%; --msrv-zoom: 2.1558; --msrv-origin: 50% 74.12%; }    /* Ремонт квартир, 196:65 */
[data-layout="mobile"] .msrv__media[data-photo="101"] { --msrv-pos: 44.54%; --msrv-zoom: 1.9946; --msrv-origin: 50% 21.03%; }    /* Ремонт будинків, 196:2 */
[data-layout="mobile"] .msrv__media[data-photo="102"] { --msrv-pos: 81.66%; --msrv-zoom: 1.7780; --msrv-origin: 50% 84.87%; }    /* Бізнес-простори, 196:95 */
[data-layout="mobile"] .msrv__media[data-photo="103"] { --msrv-pos: 76.46%; --msrv-zoom: 2.0085; --msrv-origin: 50% 52.00%; }    /* Пакети для інвесторів, 196:33 */
[data-layout="mobile"] .msrv__media[data-photo="113"] { --msrv-pos: 99.92%; --msrv-zoom: 3.0364; --msrv-origin: 50% 51.24%; }    /* Індивідуальні рішення, 197:125 */
/* c = p + (1 − p)·zoom — до якої висоти вікна фото з кадром 942 ще накриває низ (942·c) */
[data-layout="mobile"] .msrv__media[data-photo="99"]  { --msrv-cover: 1.0328; } /* до 972.9 */
[data-layout="mobile"] .msrv__media[data-photo="100"] { --msrv-cover: 1.2991; } /* до 1223.7 */
[data-layout="mobile"] .msrv__media[data-photo="101"] { --msrv-cover: 1.7854; } /* до 1681.8 */
[data-layout="mobile"] .msrv__media[data-photo="102"] { --msrv-cover: 1.1177; } /* до 1052.9 */
[data-layout="mobile"] .msrv__media[data-photo="103"] { --msrv-cover: 1.4840; } /* до 1397.9 */
[data-layout="mobile"] .msrv__media[data-photo="113"] { --msrv-cover: 1.9929; } /* до 1877.3 */

/* Заголовок; базова лінія першого рядка 101, другого — 138.5 (крок 37.5).
   Вага однакова в усіх шести кадрах: біла частина — 100, мідна — 300.
   У п'яти кадрах 196:2, 196:33, 196:65, 196:95, 197:125 дизайнерка 26.09
   зробила білу частину тонкою (v2 → v3, змінились лише рядки заголовка
   y 76–142), як у 147:4559: площа білого чорнила впала на 40–45%, мідна
   не змінилась. До того тут стояла вага 300 (звірено з v2: «РЕМОНТ» у 196:65
   — 852.6, на сайті на 300 — 852.5). У 147:4559 площа «ІНТЕРʼЄРУ» 605.7,
   на сайті на вазі 100 — 605.0; мідне «ДИЗАЙН» — 258.5 проти 264.1 на 300.
   Після переходу на 100 (30.09) середня різниця з v3 у смузі заголовка —
   5.2 / 6.7 / 5.2 / 7.5 / 5.4 рівня (196:65 / 2 / 95 / 33, 197:125),
   на 300 було 57 / 109 / 37 / 88 / 56.
   Відрізняється лише вирівнювання — так і в макетах:
   · п'ять кадрів 196/197 — зліва. Чорнило першої літери на x=34 у кожному
     рядку, текстовий бокс — ширина панелі (30..372), другий рядок опускає
     панель на 37 (181 замість 144);
   · «Дизайн інтерʼєру» (147:4559) — по центру вікна.
   Перемикач — поле послуги «Заголовок вікна на телефоні». */
[data-layout="mobile"] .msrv__title {
  max-width: none;
  padding: 72.7px 30px 0;
  text-align: left;
  font-weight: 100;
  font-size: 35px;
  line-height: 37.5px;
}
[data-layout="mobile"] .msrv__title--center {
  padding: 72.7px 0 0;
  text-align: center;
}
/* Мідна частина задається в полі «Заголовок вікна» ([[…]]) — у кожному кадрі
   своє слово: ДИЗАЙН / КВАРТИР / РЕМОНТ / БІЗНЕС-ПРОСТОРІВ / ІНВЕСТОРІВ / ІНДИВІДУАЛЬНІ */
[data-layout="mobile"] .msrv__title-word {
  color: var(--accent);
  font-weight: 300;
}
/* Однолітерне слово тримається з наступним: «БУДИНКІВ / І КОТЕДЖІВ» (196:2) */
[data-layout="mobile"] .msrv__nobr { white-space: nowrap; }

/* Панель 342×565 на y=144; три колонки → три ряди */
/* Верх панелі збігається (144.0 в обох), а низ був на 709.33 замість 710.0:
   три колонки разом на 0.67 нижчі за макетні. Добираємо різницю полем самої
   панелі, щоб не зсувати роздільники між колонками. */
[data-layout="mobile"] .msrv__panel {
  grid-template-columns: 1fr;
  margin: 33.8px 30px 0;
  padding-bottom: 0.67px;
  border-radius: 7px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
/* 24.75 замість 25.5 — рівно на ті 0.75, що додані заголовку зверху (див. нижче):
   сума 0.75 + 13.34 + 24.75 = 38.84 та сама, що була, тож абзаци, висоти
   колонок, розділювачі й кнопки не рухаються. */
[data-layout="mobile"] .msrv__col {
  gap: 24.75px;
  min-height: 0;
  padding: 35px 25px 26.7px;
}
/* Вертикальна межа між колонками стає горизонтальною на всю ширину панелі */
[data-layout="mobile"] .msrv__col + .msrv__col {
  border-left: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}
/* Капітель заголовків колонок у макеті починається на рядках 179 / 368 / 578,
   а на сайті починалася на 178 / 367 / 578: Chrome квантує базову лінію до
   цілого пікселя, і три колонки через свої дробові висоти округлювались у
   різні боки. Порогові значення знайдені перебором (0.5 → ще 178/367,
   0.75 → вже 179/368, 1.0 → 179/368/579): 0.75px зверху заголовка і рівно
   стільки ж знято з gap, тож абзаци, висоти колонок, розділювачі й кнопки
   лишаються на місці. */
[data-layout="mobile"] .msrv__col-title {
  padding-top: 0.75px;
  font-size: 15px;
  line-height: 12.6px;
}
[data-layout="mobile"] .msrv__col-text {
  font-size: 15px;
  line-height: 22px;
}

/* Список (текст колонки з кількох рядків — «Включає», а також «Для кого»,
   коли там перелік): у макеті кожен рядок з маркером-кружечком 4px на x=64,
   текст з x=79. Десктопні маркери — у modals.css. */
[data-layout="mobile"] .msrv__col-text--list br { display: none; }
[data-layout="mobile"] .msrv__col-text--list .msrv__col-line {
  display: block;
  position: relative;
  padding-left: 24px;
}
[data-layout="mobile"] .msrv__col-text--list .msrv__col-line::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* Дві кнопки в ряд → стовпчик на всю ширину контенту */
/* Мідна плашка в макеті лежить рівно на 753..800 (усі чотири краї без
   згладжування), ghost — 819.5..866.49. Звідси поле 43.02 (709.98 + 43.02 = 753)
   і проміжок 19.5. */
[data-layout="mobile"] .msrv__actions {
  flex-direction: column;
  gap: 19.5px;
  margin: 43.02px 30px 0;
}
[data-layout="mobile"] .msrv__actions .btn {
  flex: 0 0 auto;
  height: 47px;
  padding: 2.4px 12px 0;   /* 2.4 = зсув Figma 1.2px при align-items:center */
  border-radius: 3px;
  font-size: 15px;
  line-height: 19.2px;
}
/* У макеті ghost — лише мідна рамка: ні підкладки, ні розмиття.
   Висота така сама, як у мідної плашки — 47, а не 48: у рендері рамка
   займає 819.5..866.49. Товщина рамки в макеті 0.72px (виміряно по обох
   вертикальних краях: x=30 дає 0.75 покриття, x=371 — 0.77; це десктопні
   1.2 × 0.6). Chrome округлює border-width до цілого пікселя пристрою, тому
   рамка намальована inset-тінню — так само, як у .mpkg__benefit. */
[data-layout="mobile"] .msrv__actions .btn--ghost {
  height: 47px;
  border: 0;
  box-shadow: inset 0 0 0 0.72px var(--accent);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =================================================== Модалка кейса (173:958) */

/* У фреймі всі чотири кути білі — скруглення немає (на відміну від пакета) */
[data-layout="mobile"] .mcase {
  padding: 60px 35px 59px;
  border-radius: 0;
}

[data-layout="mobile"] .mcase__gallery { border-radius: 3.6px; }
[data-layout="mobile"] .mcase__slide img { height: 209px; }

/* Кнопка 42×42 з іконкою 16 по центру дає відступ 13 від краю колонки — як у макеті */
[data-layout="mobile"] .mcase__arrows { margin-top: 23.5px; }
[data-layout="mobile"] .mcase__arrows .arrows__btn {
  width: 42px;
  height: 42px;
}
/* У icon-arrow-*.php геометрія займає 25..51 із 76 (плюс штрих 3.42), тобто
   29.42/76 бокса. Щоб чорнило стало 16×16, як у макеті, бокс має бути 41.3 —
   штрих тоді 1.86px, що збігається з виміряним по рендеру. */
[data-layout="mobile"] .mcase__arrows .arrows__btn svg {
  width: 41.3px;
  height: 41.3px;
}
/* У фреймі кейса обидві стрілки суцільно мідні (виміряно: найтемніший піксель
   лівої і правої однаковий, (184,115,51)). Але намальовано ЛИШЕ перший слайд,
   де вимкнена саме ЛІВА — отже макет каже про неї, а не про обидві.
   Тому скасовуємо десктопне .arrows__btn[aria-disabled]{opacity:.35} тільки
   для --prev. Права мусить гаснути в кінці стрічки: інакше на галереї з 13 фото
   людина не розуміє, що дійшла до останнього. Так само зроблено в усіх інших
   мобільних каруселях (21-page-portfolio.css:289 і далі). Стан «права вимкнена»
   у макеті не намальований — винесено в питання до дизайнерки. */
[data-layout="mobile"] .mcase__arrows .arrows__btn--prev[aria-disabled="true"],
[data-layout="mobile"] .mcase__arrows .arrows__btn--prev:disabled {
  opacity: 1;
}

[data-layout="mobile"] .mcase__body { margin-top: 20.9px; }

/* padding-left:30 десктопу зникає — заголовок урівень з фото й панелями */
[data-layout="mobile"] .mcase__title {
  padding-left: 0;
  font-size: 15px;
  line-height: 22px;
}

/* Один ряд із шести полів → сітка 3×2. Колонки в макеті нерівні:
   початки 35 / 155.5 / 282.8, права межа третьої — 367. */
[data-layout="mobile"] .mcase__meta {
  display: grid;
  grid-template-columns: 120.5px 127.3px 84px;
  column-gap: 0;
  row-gap: 53px;
  margin: 41.6px 0 0;
  padding-left: 0;
}
/* У макеті 6 плашок у сітці 3×2. «Формат робіт» прибрано за рішенням
   замовника, «Тип обʼєкта» ще не заповнений — реально приходить 4 або 5
   значень. На п'яти сітка лишається 3×2 (порожня тільки остання комірка),
   а на чотирьох третій стовпець залишав би самотню плашку в нижньому ряду,
   тому рівно на чотирьох сітка стає 2×2 на макетних колонках 1 і 2.
   Висота блоку не змінюється (ряд + 53 + ряд), тож нічого нижче не рухається.
   Цього в макеті немає — рішення прийнято на верстці. */
[data-layout="mobile"] .mcase__meta:has(> .mcase__meta-item:nth-child(4):last-child) {
  grid-template-columns: 120.5px 127.3px;
}

/* align-content:start — інакше рядок сітки розтягує dt під найвище поле ряду
   і значення сусідніх колонок перестають стояти на одній лінії, як у макеті */
[data-layout="mobile"] .mcase__meta-item {
  align-content: start;
  gap: 14.9px;
}
/* Підпис у макеті завжди у два рядки — значення всіх трьох колонок стоять
   на одній лінії. 84px — ширина текстового боксу підпису в макеті. */
[data-layout="mobile"] .mcase__meta dt {
  min-height: 34px;
  max-width: 84px;
  font-size: 15px;
  line-height: 17px;
}
[data-layout="mobile"] .mcase__meta dd {
  font-size: 15px;
  line-height: 17px;
}

/* Дві панелі поруч → одна під одною */
[data-layout="mobile"] .mcase__panels {
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 51.1px;
}
[data-layout="mobile"] .mcase__panel {
  gap: 13.4px;
  padding: 19.5px 20px 15.6px;
  border-radius: 5px;
}
[data-layout="mobile"] .mcase__panel h3 {
  font-size: 15px;
  line-height: 15px;
}
[data-layout="mobile"] .mcase__panel p {
  font-size: 15px;
  line-height: 19px;
}
[data-layout="mobile"] .mcase__cta {
  height: 53px;
  margin-top: 24px;
  padding: 2.4px 12px 0;   /* зсув Figma */
  border-radius: 5px;
  font-size: 15px;
  line-height: 19.2px;
}

/* ================================================ Модалка лід-форми (150:5815) */

/* Єдина з чотирьох, що не на весь екран: картка 333 по центру полотна
   (поля 34.5) і по центру по вертикалі. margin:auto у флексі, а не
   place-items:center, щоб при відкритій клавіатурі не зрізало верх. */
[data-layout="mobile"] .modal[data-variant="lead"] { display: flex; }
[data-layout="mobile"] .modal[data-variant="lead"] .modal__dialog {
  width: 333px;
  max-width: none;
  margin: auto;
}
/* Хрестик — усередині білої картки, у правому верхньому куті (чорнило 10px від краю) */
[data-layout="mobile"] .modal[data-variant="lead"] .modal__close {
  position: absolute;
  top: 5.5px;
  right: 5.5px;
}

/* Дві колонки 598 + 619 → одна */
[data-layout="mobile"] .mlead {
  grid-template-columns: 1fr;
  gap: 20px;
  min-height: 0;
  padding: 24.1px 30px 30px;
}
[data-layout="mobile"] .mlead__title {
  max-width: none;
  font-size: 35px;
  line-height: 42px;
}
/* У макеті абзац важчий за десктопний (300 замість 100) — зважено по площі чорнила */
[data-layout="mobile"] .mlead__text {
  margin-top: 5.9px;
  font-weight: 300;
  font-size: 15px;
  line-height: 19px;
}

/* Поля й кнопка: форма приходить із Fluent Forms, а forms.css тримає їх
   на !important — тому тут теж !important. */
[data-layout="mobile"] body .mlead .fluentform form fieldset { gap: 15px !important; }
[data-layout="mobile"] body .mlead .ff-el-form-control,
[data-layout="mobile"] .mlead .field__control {
  /* У макеті блок «поле + 15 + поле» рівно 112px (поля 49 і 48 після
     округлення Figma) — 48.5 дає 112.0 замість 112.18 */
  height: 48.5px !important;
  /* 20.2/17.8 замість 19/19 — той самий зсув Figma 1.2px: браузер центрує
     текст поля по боксу asc/desc, а Figma — по капітелі */
  padding: 20.2px 19px 17.8px !important;
  border-radius: 4.7px !important;
  font-size: 15px;
  line-height: 19px;
}
[data-layout="mobile"] body .mlead .ff-btn-submit,
[data-layout="mobile"] .mlead .btn {
  height: 52px !important;
  padding: 2.4px 12px 0;   /* зсув Figma */
  border-radius: 4.7px;
  font-size: 15px;
  line-height: 19.2px;
}
[data-layout="mobile"] .mlead__form form { gap: 15px; }