/* ============================================================
   ЗАЯВКА С ОФФЕРОМ
   Слева — что человек получит, справа — форма. Именно в таком
   порядке: сначала причина, потом просьба. Форма, стоящая раньше
   объяснения, читается как «дайте контакт просто так».

   Фон секции — тон футера (#f7f9fc). Блок должен отделиться от
   белой страницы, но не карточкой: карточек выше уже три ряда,
   и четвёртая не прочиталась бы как главное действие.
   ============================================================ */
.lead-sect{
  margin-top:clamp(24px, 2.6vw, 44px);
  background:#f7f9fc;
}

.offer{
  display:grid;
  /* Текстовой части чуть больше: в ней заголовок в две строки и
     список из четырёх пунктов, форме хватает и меньшего. */
  grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  gap:clamp(28px, 3.4vw, 72px);
  align-items:start;
}

.offer__lead{
  margin:clamp(16px, 1.7vw, 28px) 0 clamp(22px, 2.2vw, 36px);
  max-width:46ch;
  font-size:clamp(14px, 1.06vw, 18px);
  line-height:1.6;
  color:var(--fg-lead);
}

.offer__cap{
  margin:0 0 clamp(10px, 1vw, 16px);
  font-family:var(--font);
  font-size:clamp(12px, .72vw, 12px);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--fg-mute);
}

.offer__list{
  margin:0 0 clamp(18px, 1.8vw, 30px);
  padding:0;
  list-style:none;
  display:grid;
  gap:clamp(8px, .7vw, 12px);
  max-width:52ch;
}
/* Галочка, а не тире, — и это тот редкий случай, когда она уместна:
   в услугах маркером стоит тире, потому что состав собирается под
   задачу и «включено в пакет» там обещать нельзя. Здесь наоборот:
   это ровно то, что человек получит, и обещание прямое. */
.offer__list li{
  position:relative;
  padding-left:26px;
  font-size:clamp(13px, 1vw, 16px);
  line-height:1.55;
  color:var(--fg);
}
.offer__list li::before{
  content:'';
  position:absolute;
  left:0; top:.42em;
  width:13px; height:7px;
  border-left:1.6px solid var(--accent-1);
  border-bottom:1.6px solid var(--accent-1);
  transform:rotate(-45deg);
}

.offer__free{
  margin:0;
  font-size:clamp(14px, .92vw, 15px);
  color:var(--fg-mute);
}

/* Знак под текстом, прижат вправо — к форме, а не к краю страницы.
   Так он читается как связка между обещанием слева и действием
   справа, а не как отдельная картинка в углу. */
.offer__art{
  width:clamp(150px, 15vw, 230px);
  aspect-ratio:1 / 1;
  margin:clamp(14px, 1.6vw, 30px) 0 0 auto;
}
.offer__art canvas,
.offer__art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
/* Появление знака ведёт его собственный фронт отрисовки — общее
   правило .reveal с него снимаем, чтобы не было двух проявлений. */
.js .reveal .offer__art{ opacity:1; transform:none; }

@media (max-width: 1100px){
  /* В одну колонку знак только разводит обещание и кнопку — убираем,
     действие должно идти сразу за обещанием. */
  .offer__art{ display:none; }
}

/* ------------------------------------------------------------
   КАРТОЧКА ДЕЙСТВИЯ
   Белая карточка на подложке секции. До 02.09.2026 в ней стояла
   форма из двух полей; теперь заявку собирает только модальное
   окно, и в карточке одна кнопка с data-lead.
   ------------------------------------------------------------ */
.offer__card{
  padding:clamp(22px, 2.2vw, 40px);
  background:var(--surface);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-card);
}

/* Кнопка во всю ширину карточки. Раньше это делало правило «.lead2 .btn»
   у формы; форма ушла, ширину задаём здесь. Своего вида у карточки нет,
   всё остальное она берёт у .offer__card. */
.offer__card--call .btn{ width:100%; }

/* Правая колонка: карточка плюс знак под ней. Карточка короткая — в ней
   одна кнопка, — и без знака под ней оставалось 504px пустоты при левой
   колонке в 718px (замер 02.09.2026). Знак прижат вправо тем же правилом
   .offer__art, ниже — только его отбивка сверху. */
.offer__side{
  display:grid;
  align-content:start;
}
.offer__side .offer__art{ margin-top:clamp(20px, 2.4vw, 44px); }

.offer__calltext{
  margin:0 0 clamp(16px, 1.6vw, 26px);
  font-size:clamp(13px, 1vw, 16px);
  line-height:1.6;
  color:var(--fg-lead);
}

/* Правило `.field__area` уехало в common.css: текстовое окно теперь стоит
   в модалке, а она есть на каждой странице — здесь оно оказалось бы
   подключено не везде, и на главной поле схлопнулось бы в одну строку.
   Вместе с ним ушли стили формы `.lead2`: форм на страницах больше нет. */

/* Разделитель «или» — черта с надписью посередине */
.offer__or{
  position:relative;
  margin:clamp(16px, 1.6vw, 26px) 0;
  text-align:center;
}
.offer__or::before{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background:var(--line);
}
.offer__or span{
  position:relative;
  padding-inline:12px;
  background:var(--surface);
  font-size:clamp(12px, .76vw, 12px);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-mute);
}

.offer__msgs{
  display:grid;
  gap:clamp(8px, .7vw, 12px);
}

@media (max-width: 1100px){
  .offer{ grid-template-columns:1fr; }
}