/* «Москитные сетки, которые работают» — 537:9113: фон #181d24, отступы 100/110.
   Медиа блока живёт ТОЛЬКО внутри .ctaf__photo (схема intro). Фон секции — сплошной
   --ink, поэтому контраст текста здесь не зависит ни от кадра, ни от вьюпорта. */
.ctaf {
  --ctaf-pad: clamp(56px, 5.2083vw, 100px);   /* тем же значением панель выходит из padding */
  background: var(--ink);
  padding-block: var(--ctaf-pad);
  padding-inline: var(--gutter) 0;
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 2.0833vw, 40px);
  overflow: hidden;
}
.ctaf__left { flex: 0 0 665px; max-width: 100%; display: flex; flex-direction: column; gap: clamp(36px, 4.1667vw, 80px); }
.ctaf__head { display: flex; flex-direction: column; gap: 40px; }
.ctaf__title {
  width: min(570px, 100%);
  font-size: clamp(30px, 2.7083vw, 52px);
  font-weight: 900;
  line-height: 1;
  color: var(--paper);
}
.ctaf__chips { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.3021vw, 25px); }
/* Чип «стекло» бренд-бука. В макете была светлая плашка со СВЕТЛЫМ текстом
   (rgba(247,247,247,.59) + --paper = 2.51:1 при норме 4.5) — читать нечем.
   Заливку .intro__badge (intro.css:115) перенести сюда нельзя: rgba(24,29,36,.55)
   поверх сплошного --ink даёт ровно --ink, подъёма ноль. Берём поверхность на тёмном
   --surface-tint + хайрлайн --border-glass: --white на ней = 13.49:1 (замер по пикселям рендера).
   Боковые поля симметричны — в ar разная левая/правая зеркалилась бы неверно. */
.ctaf__chips li {
  display: inline-flex;
  align-items: center;
  padding: 15px 25px;
  border: 1px solid var(--border-glass);
  border-radius: var(--r-pill);
  background: var(--surface-tint);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: 1px;
  color: var(--white);
  white-space: nowrap;
}
.ctaf__lead {
  width: min(665px, 100%);
  font-size: clamp(17px, 1.25vw, 24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  color: var(--paper);
}

/* Карточка заявки 522:7835 */
.leadcard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(665px, 100%);
  padding: 30px;
  border-radius: var(--r-xl);
  background: var(--paper);
}
.leadcard__title {
  font-size: clamp(20px, 1.3542vw, 26px);
  font-weight: 900;
  line-height: var(--lh-h3);
  letter-spacing: 1px;
  color: var(--ink);
}
.leadcard__field input {
  width: 100%;
  height: 43px;
  padding: 0 19px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: rgba(24, 29, 36, 0.3);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: 1px;
  color: var(--ink);
}
/* Плейсхолдер здесь — единственная видимая подпись поля (label в visually-hidden),
   поэтому он обязан читаться: .40 на заливке поля давало 2.15:1, .75 даёт 4.85:1 по пикселям рендера
   и остаётся заметно светлее набранного текста --ink (8.33:1). */
.leadcard__field input::placeholder { color: rgba(24, 29, 36, 0.75); }

.leadcard__consent {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 43px;
  cursor: pointer;
}
.leadcard__consent input { position: absolute; opacity: 0; pointer-events: none; }
.leadcard__mark { flex: 0 0 23px; width: 23px; height: 23px; opacity: 0.35; transition: opacity 240ms ease; }
.leadcard__consent input:checked + .leadcard__mark { opacity: 1; }
.leadcard__consent input:focus-visible + .leadcard__mark { outline: 2px solid var(--gold); outline-offset: 3px; }
.leadcard__consent-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 1px;
  color: rgba(24, 29, 36, 0.65);     /* .40 на --paper = 2.45:1, .65 → 5.14:1 */
}

.leadcard__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--gold-grad);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: var(--lh-h4);
  letter-spacing: 1px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.leadcard__submit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(184, 138, 52, 0.35); }
.leadcard__submit[disabled] { opacity: 0.7; cursor: progress; transform: none; }
.leadcard__submit img { flex: 0 0 20px; }
.leadcard__note { font-size: 14px; line-height: 1.3; color: #6b5a2a; }
.leadcard__note:empty { display: none; }
.leadcard__note.is-error { color: #b3261e; }

/* ——— Панель-кадр ———
   Одна схема медиа на блок: <img> и <video class="vbg"> лежат ВНУТРИ панели
   (sections/intro.html:41-48, intro.css:155-157). Пока .vbg был прямым ребёнком
   секции, та же машина рисовалась второй раз во всю ширину, и на x=777 был шов. */
.ctaf__photo {
  position: relative;
  flex: 1 1 1106px;
  min-width: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
}
/* Кадр и петля кадрируются одинаково, иначе при появлении видео композиция прыгает.
   65%: на 1280/1440/1920 ливрея «MOSQUITO NETS» и телефон целиком в нерастворённой
   части панели (замер: надпись в кадре 1672px это x=997..1235, панель на 1280 — 515px). */
.ctaf__photo img,
.ctaf__photo .vbg { object-position: 65% center; }
.ctaf__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ctaf__photo .vbg { border-radius: inherit; }

/* В RTL панель стоит слева и растворяется её ПРАВЫЙ край — надпись на борту должна
   уехать левее. Это не зеркало (1-0.65=0.35 обрезало бы ливрею): кадр зеркалить
   запрещено, на борту читаемые надпись, телефон и номер. Замер даёт 72%. */
[dir="rtl"] .ctaf__photo img,
[dir="rtl"] .ctaf__photo .vbg { object-position: 72% center; }

@media (min-width: 1280px) {
  /* Панель во всю высоту секции: padding-block висит на самой .ctaf, поэтому
     stretch + компенсация ровно этого же отступа (--ctaf-pad). Скруглять нечего —
     три стороны за краем секции, четвёртая растворяется; заодно исчезает
     физический 20px 0 0 20px, который в ar смотрел скруглениями в край экрана. */
  .ctaf__photo {
    align-self: stretch;
    height: auto;
    /* Высоту секции держала макетная высота кадра (749px): 749+2×100 = 949 на 1920,
       749+2×75 = 899 на 1440 — ровно те числа, по которым сняты эталоны .design/ref.
       Панель теперь выходит из padding, поэтому нижней границей служит её МАРГИН-бокс,
       и 749px пишется вместе с компенсацией. Без этой строки текстовая колонка (748.39px)
       становится ниже макета, секция теряет доли пикселя, всё, что ниже, перерисовывается
       в другой субпиксельной фазе — verify.py читает это как регрессию соседей
       (banner-kinds 3.97%→8.07%), которой на экране нет. */
    min-height: calc(749px + 2 * var(--ctaf-pad));
    margin-block: calc(-1 * var(--ctaf-pad));
    border-radius: 0;
  }
  /* Внутренний край растворяется в фоне секции — машина не приставлена карточкой,
     а выезжает из той же темноты. Вуаль строится на var(--ink), НЕ на --ink-deep:
     ink-deep поверх --ink дал бы на месте бывшего шва тёмную полосу.
     Ширина процентом, а не 180px: 16.5% = 182px на макетной панели 1106px, но на
     1280 панель всего ~515px, и фиксированная вуаль съела бы треть кадра с ливреей. */
  .ctaf__photo::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 16.5%;
    background: linear-gradient(to right, var(--ink), rgba(24, 29, 36, 0));
    pointer-events: none;
  }
  /* Логические ключевые слова в linear-gradient движки не поддерживают —
     зеркалим отдельным правилом по образцу hero.css:254. */
  [dir="rtl"] .ctaf__photo::after {
    background: linear-gradient(to left, var(--ink), rgba(24, 29, 36, 0));
  }
}

@media (max-width: 1279px) {
  .ctaf { flex-direction: column; padding-inline-end: var(--gutter); }
  .ctaf__left { flex: 0 0 auto; width: 100%; }
  /* Панель — обычный контейнерный кадр со скруглением по всем углам: к тексту она
     не примыкает, растворять нечего. Высота по пропорции кадра, а не clamp:
     40vw на 768 давало 307px при ширине 680 — 2.2:1, машина резалась поперёк. */
  .ctaf__photo { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .ctaf__photo img,
  .ctaf__photo .vbg,
  [dir="rtl"] .ctaf__photo img,
  [dir="rtl"] .ctaf__photo .vbg { object-position: center; }
  .leadcard, .ctaf__lead, .ctaf__title { width: 100%; }
}
@media (max-width: 599px) {
  .ctaf__chips li { white-space: normal; }
}