/**
 * Модальні вікна: пакет (1:592), послуга (1:725), кейс (усередині 1:886).
 * Геометрія — з Figma API.
 */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 140px 40px 80px;
}
.modal[hidden] { display: none; }

/* У макеті сторінка позаду лишається кольору фону (#1D1D1D = 29), а саме вікно
   чорне (0) — різниця в 29 одиниць і є тією межею, по якій вікно читається.
   Підкладка rgba(0,0,0,.72) гасила фон до ~8, і чорне вікно зливалося з ним.
   Тепер підкладка зводить тло до кольору сайту, як у макеті. */
.modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(29, 29, 29, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1363px;
}
/* JS переводить фокус на діалог, коли вікно відкривається, і глобальне
   :focus-visible малювало мідну рамку навколо всього вікна — читалось як
   випадкова лінія. Фокус лишаємо (він потрібен для клавіатури), рамку прибираємо. */
.modal__dialog:focus,
.modal__dialog:focus-visible { outline: none; }

.modal[data-variant="service"] .modal__dialog { max-width: 1136px; }

.modal__close {
  position: absolute;
  top: -98px;
  right: 0;
  width: 59px;
  height: 59px;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.modal__close:hover { color: var(--accent); transform: rotate(90deg); }

.modal-sources { display: none; }

/* ==================================================== Модалка пакета */

.mpkg {
  position: relative;
  border-radius: var(--r-modal);
  overflow: hidden;
  background: #000;
  padding-bottom: 50px;
}

.mpkg__hero { position: absolute; inset: 0 0 auto; height: 719px; }
.mpkg__img { width: 100%; height: 100%; object-fit: cover; }

.mpkg__veil {
  position: absolute;
  inset: 338px 0 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}

.mpkg__price {
  position: absolute;
  top: 59px;
  right: 62px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 37px; /* макет: «Від» 1065..1105, бейдж від 1142 */
}
.mpkg__price-label {
  font-weight: 500;
  font-size: 24px;
  line-height: 39.8px;
  text-transform: uppercase;
}
.mpkg__price-box {
  padding: 24px;
  background: var(--accent);
  border-radius: var(--r);
  font-weight: 500;
  font-size: 48px;
  line-height: 34px;
}

.mpkg__body {
  position: relative;
  z-index: 1;
  padding: 446px 93px 0;
}

.mpkg__eyebrow {
  font-weight: 500;
  font-size: 30px;
  line-height: 21px;
  text-transform: uppercase;
}

.mpkg__title {
  margin-top: 24px;
  color: var(--accent);
  font-weight: 500;
  font-size: 96px;
  line-height: 68px;
  text-transform: uppercase;
}

.mpkg__tagline {
  margin-top: 40px;
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 32.5px;
}

.mpkg__desc {
  margin-top: 22px;
  max-width: 656px;
  font-weight: 100;
  font-size: var(--fs-lg);
  line-height: 32px;
}

/* Чипи в один ряд, ширина по вмісту — як у макеті (395 / 314 / 417) */
.mpkg__benefits {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 21.6px;
  margin-top: 23px;
}

.mpkg__benefit {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 97px;
  padding: 24px;
  border: 2.4px solid rgba(184, 115, 51, 0.54);
  border-radius: var(--r);
  font-weight: 100;
  font-size: var(--fs-lg);
  line-height: 31.2px;
}
.mpkg__benefit span { white-space: pre-line; }
.mpkg__benefit .icon--benefit { flex: 0 0 44px; color: var(--accent); }

.mpkg__section { margin-top: 106px; }

.mpkg__subtitle {
  font-weight: 100;
  font-size: var(--fs-h3);
  line-height: 35px;
  text-transform: uppercase;
}

.mpkg__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 21px;
  margin-top: 40px;
  min-height: 595px;
}

.mpkg__col {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 54px;
  /* У макеті колонка 595 (стільки треба вмісту пакета Base). Жорстка height
     ламала пакети з довшими списками: у Smart Home середня колонка потребує
     622px — пункти вилазили за плашку й налазили на «Орієнтовну вартість».
     min-height лишає розмір макета мінімумом, а три колонки в гріді і далі
     тягнуться до однакової висоти. */
  min-height: 595px;
  padding: 42px 36px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: var(--r);
}

.mpkg__col-title {
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 32px; /* макет: 25/32, дворядкові заголовки з нормальним інтерліньяжем */
  text-transform: uppercase;
}

.mpkg__list { display: grid; gap: 0; }
.mpkg__list li {
  display: flex;
  align-items: center;
  gap: 10.8px;
  font-weight: 100;
  font-size: var(--fs-lg);
  line-height: 41.5px;
}
.mpkg__list .icon--check { flex: 0 0 18px; }
/* Примітка до пункту з «*» (умова замовника 02.10 до «90 днів» у Rent Ready).
   У макеті приміток немає — дрібніше й приглушено, з відступом під галочку,
   щоб не читалась як ще один пункт */
.mpkg__list li.mpkg__list-note {
  display: block;
  margin-top: 10px;
  padding-left: 28.8px;      /* галочка 18 + проміжок 10.8 */
  color: var(--ink-muted);
  font-size: 18px;
  line-height: 26px;
}

.mpkg__col-img {
  align-self: end;
  width: 302px;
  height: 201px;
  object-fit: cover;
  border-radius: 4px;
}

/* Одна колонка «Що входить» (Safe / Smart / Energy Home — кожне вікно лише
   своє рішення). У макеті сітка намальована тільки на три колонки, тож це
   власне рішення в стилі решти вікон: та сама плашка, заголовок і список, але
   на всю ширину сітки (1177), а фото — праворуч у пропорції 3:2 замість низу.
   Фото 520: лишає під текст 1177 − 2·36 (поля плашки) − 54 (проміжок, як між
   рядами колонки) − 520 = 531, а найдовший пункт Smart Home «централізоване
   керування через додаток» разом із галочкою займає 503 — усі пункти стають
   в один рядок із запасом (548 впритул давало перенос на 1920).
   Мінімальна висота 595 зі звичайної колонки тут не потрібна: висоту задає
   фото (347) або список, якщо він вищий. */
.mpkg__cols--single {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
}
.mpkg__cols--single .mpkg__col { min-height: 0; }
/* без фото третій ряд гріда (1fr під знімок) лишав би порожнє місце внизу */
.mpkg__cols--single .mpkg__col:not(.mpkg__col--media) { grid-template-rows: auto; }
.mpkg__col--media {
  grid-template-columns: minmax(0, 1fr) 520px;
  grid-template-rows: auto 1fr;
  gap: 54px;
}
.mpkg__col--media .mpkg__col-title,
.mpkg__col--media .mpkg__list { grid-column: 1; }
.mpkg__col--media .mpkg__list { align-self: start; }
.mpkg__col--media .mpkg__col-img {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
/* Одна колонка без фото: довгий список (від 6 пунктів) — у два стовпчики,
   порядок читання згори вниз, як у звичайній колонці */
.mpkg__list--split {
  display: block;
  columns: 2;
  column-gap: 54px;
}
.mpkg__list--split li { break-inside: avoid; }

/* Плиток може бути від 1 до 6 — залежить від того, скільки цифр дав клієнт */
.mpkg__costs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 20px;
  margin-top: 46px;
}

.mpkg__cost {
  display: grid;
  align-content: start;
  gap: 54px;
  padding: 54px 30px;
  background: rgba(184, 115, 51, 0.25);
  border-radius: var(--r);
}
.mpkg__cost--total { background: var(--accent); }

.mpkg__costs-note {
  margin-top: 40px;
  font-weight: 100;
  font-size: var(--fs-lg);
  line-height: 32px;
}

.mpkg__cost-label {
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: 31.2px;
  text-transform: uppercase;
}

.mpkg__cost-value { display: grid; gap: 20.6px; }
.mpkg__cost-from {
  font-weight: 500;
  font-size: 24px;
  line-height: 17px;
  text-transform: capitalize;
}
.mpkg__cost-value b {
  font-weight: 500;
  font-size: 72px;
  line-height: 51px;
}
.mpkg__cost-value i {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 24px;
}
.mpkg__cost-value b + i { margin-left: 20.4px; }

/* =================================================== Модалка послуги */

/* Каркас, спільний для обох полотен. Розміри й відступи — окремо:
   десктоп (макет 1-725, 1136×1320) — нижче під [data-layout="desktop"],
   телефон — у mobile/30-modals.css під [data-layout="mobile"]. */
.msrv {
  position: relative;
  overflow: hidden;
  background: #111;
}

.msrv__media { position: absolute; inset: 0; }
.msrv__img { width: 100%; height: 100%; object-fit: cover; }
.msrv__veil { position: absolute; inset: 0; }

.msrv__title {
  position: relative;
  z-index: 1;
  text-transform: uppercase;
}
/* Однолітерне слово тримається з наступним: «БУДИНКІВ / І КОТЕДЖІВ» (196:2) */
.msrv__nobr { white-space: nowrap; }

.msrv__panel {
  position: relative;
  z-index: 1;
  display: grid;
  background: rgba(29, 29, 29, 0.38);
}

.msrv__col {
  display: grid;
  align-content: start;
}

.msrv__col-title {
  font-weight: 300;
  text-transform: uppercase;
}

.msrv__col-text { font-weight: 100; }
/* Частина єдиного блоку-списку (див. шаблон): на десктопі — стовпчик сітки,
   на телефоні — звичайний блок, список іде суцільно */
.msrv__col-part { display: block; }

.msrv__actions {
  position: relative;
  z-index: 1;
  display: flex;
}

/* ------------------------------------------ Десктоп: за макетом 1-725 */

/* Панель і кнопки прив'язані до НИЗУ вікна: у макеті кнопки закінчуються
   на 1184 (136 до низу 1320), між панеллю і кнопками 56. Раніше панель
   стояла в потоці на 302 нижче заголовка, і у вікнах із заголовком у два
   рядки опинялась на рядок (≈102) вище макета. Тепер вікно — стовпчик:
   заголовок угорі, панель із margin-top:auto забирає весь вільний простір,
   тож низ однаковий за будь-якої кількості рядків заголовка. Коли вміст
   вищий за 1320 (довгі списки + заголовок у три рядки), вікно росте, а під
   заголовком лишається щонайменше 56. */
[data-layout="desktop"] .msrv {
  display: flex;
  flex-direction: column;
  min-height: 1320px;
  padding-bottom: 136px;
  border-radius: var(--r);
}

/* Затемнення — виміряне по 1-725: рендер = (1 − α)·фото, фото зіставлене
   з вихідним файлом вкладення 99 (крос-кореляція 0.91). Коефіцієнт по смугах
   рядків: 0.795 на y=0, лінійно до 0.49 на y≈194, далі рівно 0.49 до низу
   (0.483–0.503 на смугах 320…1320, без залежності від x і від каналу).
   Тобто чорне 20.5% угорі → 51% від 194 px і нижче. */
[data-layout="desktop"] .msrv__veil {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.205) 0, rgba(0, 0, 0, 0.51) 194px);
}

/* Фото «Дизайн інтерʼєру» (вкладення 99) у 1-725 кадроване: вихідний файл
   1200×1599 збільшено до 1.3265 px макета на px фото, лівий верхній кут на
   (−444, −722) — зіставлено перебором масштабу й зсуву по всьому кадру
   поза текстом, панеллю і кнопками. Звичайне cover дає 0.9467, тож
   zoom = 1.3265 / 0.9467 = 1.4012; точку масштабу пораховано для вікна 1320
   при object-position 100% 100% (низ cover-кадру = низ вікна): x 1106.6
   (97.41%), y 1122.9 (85.07%). Обидві точки всередині вікна — збільшений
   бокс гарантовано накриває вікно будь-якої висоти. Інші фото — звичайне cover.
   Той самий масштаб 1.4012 стоїть у template-parts/modal-service.php: за ним
   рахується sizes (на екрані фото 1592 px макета, а не 1136), інакше браузер
   бере зі srcset менший файл і розтягує його. Міняти — в обох місцях. */
[data-layout="desktop"] .msrv__media[data-photo="99"] .msrv__img {
  object-position: 100% 100%;
  transform: scale(1.4012);
  transform-origin: 97.41% 85.07%;
}

/* Заголовок у два рядки зліва: базові лінії 206 і 308, перша літера з
   x=107. Біла частина — вага 100 (стем «І» 4 px), мідна — 300 (стем «Д»
   6–7 px). Верхнє поле 130 (було 139 — обидва рядки стояли на 9–10 нижче
   макета): Chrome ставить базові лінії на цілі пікселі, і 206 / 308 разом
   виходять при 129.9…130.2. */
[data-layout="desktop"] .msrv__title {
  max-width: 745px;
  margin-bottom: 56px;
  padding: 130px 0 0 107px;
  font-weight: 100;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
[data-layout="desktop"] .msrv__title-word {
  color: var(--accent);
  font-weight: 300;
}

/* Скляна панель: x 82…1030 (948), висота 302 (y 749…1051), радіус 10.
   Роздільники 1 px на x=389 і 707 — колонки 307 / 318 / 323. Текст
   кожної колонки — бокс 247 з x 107 / 425 / 743 (25 від краю панелі,
   35 після роздільника): саме така ширина дає ті самі переноси, що
   в макеті.
   Розмиття скла — 20.8 = 41.6 / 2 (правило проєкту: радіус BACKGROUND_BLUR
   з Figma ділиться навпіл; 41.6 стояло без ділення, як і 25 = 41.6 × 0.6 на
   телефоні). З 41.6 скло виходило вдвічі рівнішим за 1-725 — модель
   «фото під склом, розмите гаусом σ, під шаром rgba(29,29,29,.38)»
   найкраще описує скло макета при σ≈19–21 (RMSE 0.67–0.80 рівня), а при
   41.6 — 3.04; 21% вікон 30×30 відхилялись від макета більш ніж на 10%. */
[data-layout="desktop"] .msrv__panel {
  grid-template-columns: 307px 318px 323px;
  min-height: 302px;
  margin: auto 106px 0 82px;
  border-radius: var(--r-lg);
  backdrop-filter: blur(20.8px);
  -webkit-backdrop-filter: blur(20.8px);
}
/* Два блоки — дві рівні колонки з одним роздільником; один — на всю
   ширину рамки. Ширина рамки та сама, що в макеті. */
[data-layout="desktop"] .msrv__panel--cols-2 { grid-template-columns: 1fr 1fr; }
[data-layout="desktop"] .msrv__panel--cols-1 { grid-template-columns: minmax(0, 1fr); }

/* Заголовок колонки вгорі (капітель на 35 від верху панелі), текст
   притиснутий донизу (остання базова лінія на 35 від низу панелі; крок
   рядків у макеті рівно 26). Між ними щонайменше 45 — якщо текст довгий,
   панель росте вгору, а низ лишається на місці. */
[data-layout="desktop"] .msrv__col {
  grid-template-rows: auto 1fr;
  align-content: stretch;
  row-gap: 45px;
  padding: 38.4px 33px 26.9px 35px;
}
[data-layout="desktop"] .msrv__col:first-child { padding-left: 25px; }
[data-layout="desktop"] .msrv__col + .msrv__col { border-left: 1px solid rgba(255, 255, 255, 0.28); }
[data-layout="desktop"] .msrv__panel--cols-3 .msrv__col-text { max-width: 247px; }

[data-layout="desktop"] .msrv__col-title {
  font-size: var(--fs-lg);
  line-height: 18px;
}

[data-layout="desktop"] .msrv__col-text {
  align-self: end;
  font-size: var(--fs-body);
  line-height: 26px;
}

/* Список: маркер — гліф «•» того самого шрифту (як у списках Figma), текст
   пункту з 28 від краю боксу. У макеті центроїди маркерів (438.5; 880.7 +
   26·n), площа 17.7–18.4 px², текст пункту з x=454; гліф на 9.5 дає
   (438.5; 880.4), 17.6–19.0 px². Кружечок із border-radius Chrome
   прив'язує до цілих пікселів — він виходив квадратнуватим 5×5. */
[data-layout="desktop"] .msrv__col-text--list br { display: none; }
[data-layout="desktop"] .msrv__col-text--list .msrv__col-line {
  display: block;
  position: relative;
  padding-left: 28px;
}
[data-layout="desktop"] .msrv__col-text--list .msrv__col-line::before {
  content: "\2022";
  position: absolute;
  top: 0;
  left: 9.5px;
}
/* Один блок-список на всю ширину: шаблон ділить пункти порівну на три
   частини (.msrv__col-part), тут вони — три стовпчики з тим самим кроком,
   що й колонки макета (бокси 247 з x 107 / 425 / 743), щоб рамка не стояла
   порожньою праворуч. Кожен стовпчик притиснутий донизу, як тексти колонок
   у 1-725: останні рядки всіх трьох — на одній базовій лінії. (CSS columns
   вирівнював стовпчики по верху, і низ одного виходив на рядок вище.) */
[data-layout="desktop"] .msrv__panel--cols-1 .msrv__col { padding-right: 40px; }
[data-layout="desktop"] .msrv__col-text--split {
  display: grid;
  grid-template-columns: repeat(3, 247px);
  column-gap: 71px;
  align-items: end;
}
/* Два пункти — дві рівні половини (по 398), а не два стовпчики з трьох і
   порожня третина праворуч. Друга половина — з x=592, як текст другої
   колонки панелі з двох блоків (82 + 474 + 1 + 35): 107 + 398 + 87 = 592. */
[data-layout="desktop"] .msrv__col-text--split-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 87px;
}

/* Кнопки: мідна 82…532 (450), контурна 564.4…1025.4 (461), проміжок 32.4,
   висота 77 (y 1107…1184). Ширини з макета — як основа; довший підпис
   розширює свою кнопку, а сусідня стискається. Ряд — рівно 943.4 (82…1025.4,
   як у макеті): правий край кнопок однаковий в усіх вікнах, і коли кнопка
   розширюється, ряд не вилазить до краю рамки (1030). Бічне поле підпису —
   щонайменше 18 (у макеті 44): довгий підпис з адмінки розсуває кнопку, а не
   впирається в її край (було 12). Більше 18 не вміщується: у «Пакетах для
   інвесторів» обидва підписи разом 827 px, і при 18 на кожен бік у рядку
   943.4 лишається запас 11.7. Підпис опущено на 3.4 від центру боксу: Figma
   центрує рядок по капітелі (у макеті капітель з 30 від верху кнопки), CSS —
   по боксу рядка. */
[data-layout="desktop"] .msrv__actions {
  gap: 32.4px;
  margin: 56px 110.6px 0 82px;
}
[data-layout="desktop"] .msrv__title + .msrv__actions { margin-top: auto; }
[data-layout="desktop"] .msrv__actions .btn {
  flex: 0 1 450px;
  height: 77px;
  padding: 21.4px 18px 14.6px;
  white-space: nowrap;
}
[data-layout="desktop"] .msrv__actions .btn + .btn { flex-basis: 461px; }
[data-layout="desktop"] .msrv__actions .btn--ghost { background: rgba(29, 29, 29, 0.24); }
/* підкладка вище перекривала загальний hover контурної кнопки (main.css) */
[data-layout="desktop"] .msrv__actions .btn--ghost:hover { background: rgba(184, 115, 51, 0.16); }

/* ===================================================== Модалка кейсу */

.mcase {
  background: #FFFFFF;
  border-radius: var(--r-modal);
  padding: 75px 60px 65px;
  color: #000;
}

.mcase__gallery { border-radius: var(--r); overflow: hidden; }
.mcase__slide { flex: 0 0 100%; }
.mcase__slide img { width: 100%; height: 776px; object-fit: cover; }
/* Вертикальне фото — цілим по центру, поля кадру — те саме фото, розмите */
.mcase__slide--tall { position: relative; overflow: hidden; background: #1D1D1D; }
.mcase__slide--tall img { position: relative; z-index: 1; object-fit: contain; }
.mcase__slide--tall img.mcase__slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  filter: blur(28px) brightness(0.55);
  transform: scale(1.12);
}

.mcase__arrows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 22px;
}
/* У макеті обидві стрілки модалки кейса мідні */
.mcase__arrows .arrows__btn--prev,
.mcase__arrows .arrows__btn--next { color: var(--accent); }

.mcase__body { margin-top: 66px; }

.mcase__title {
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 36.2px;
  text-transform: uppercase;
  padding-left: 30px;
}

.mcase__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 114px;
  margin: 48px 0 0; /* макет: 57px від капу заголовка до підписів */
  padding-left: 30px;
}
.mcase__meta-item { display: grid; gap: 20.4px; }
.mcase__meta dt {
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 13px;
  text-transform: uppercase;
  color: #CDCDCD;
}
.mcase__meta dd {
  margin: 0;
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 13px;
}

.mcase__panels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 27.6px;
  margin-top: 60px; /* макет: 59px від значень до панелей */
}

.mcase__panel {
  display: grid;
  align-content: start;
  gap: 20.4px;
  padding: 30px;
  border-radius: var(--r);
}
.mcase__panel--task { background: var(--accent-06); }
.mcase__panel--done { background: var(--accent-26); }

.mcase__panel h3 {
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 13px;
  text-transform: uppercase;
  color: var(--accent);
}
.mcase__panel p {
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 29.9px;
}

.mcase__cta { height: 78px; margin-top: 27px; }

/* ============================== Світла модалка із заявкою (фрейм 59:2) */

.modal[data-variant="lead"] .modal__dialog { max-width: 1363px; }

.mlead {
  display: grid;
  grid-template-columns: 598px 619px;
  gap: 23px;
  min-height: 355px;
  padding: 68px 61px 67px 62px;
  background: #FFFFFF;
  color: #000000;
}

.mlead__intro { align-self: start; }

.mlead__title {
  max-width: 560px;
  font-weight: 300;
  font-size: 50px;
  line-height: 59.5px;
  text-transform: uppercase;
}

.mlead__text {
  margin-top: 37px;
  font-weight: 100;
  font-size: var(--fs-body);
  line-height: 24.5px;
}

.mlead__form form { display: grid; gap: 16px; }

.mlead .field { position: relative; }

.mlead .field__control {
  width: 100%;
  height: 61px;
  padding: 24px;
  background: #FBF7F3;
  border: 0;
  border-radius: var(--r);
  color: #1D1D1D;
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 23px;
}
.mlead .field__control::placeholder { color: #1D1D1D; }
.mlead .field__control:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

.mlead .btn { height: 66px; padding: 18px 12px; }

/* Клікабельна зона картки пакета: усе, крім ціни й кнопки внизу */
.pkg__open {
  position: absolute;
  inset: 0 0 228px;
  z-index: 2;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.pkg__foot { z-index: 3; }