/* Общие компоненты продукта: шапка, гео-бар, меню, футер, формы, виджет, бот.
   Один источник для всех разделов — не копировать в раздел. */
/* Гео-бар над шапкой: при прокрутке уезжает, липнет только сама шапка. */
.yg-geobar {
  display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px var(--space-4);
  background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border-card);
  overflow-x: auto; scrollbar-width: none;
}
.yg-geobar::-webkit-scrollbar { display: none; }
.yg-geochip {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 11px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-soft);
  background: var(--color-surface-canvas); color: var(--color-text-secondary);
  font: 500 12.5px/1 var(--font-ui); cursor: pointer; white-space: nowrap;
}
.yg-geochip:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.yg-geochip.is-on { background: var(--c-primary-soft); border-color: var(--color-action-primary); color: var(--color-action-primary); font-weight: 600; }
.yg-geobar__sp { flex: 1; min-width: 8px; }
.yg-geobtn {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--color-border-soft); background: var(--color-surface-canvas);
  color: var(--color-text-muted); cursor: pointer;
}
.yg-geobtn:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }

.yg-header { position: sticky; top: 0; z-index: 40; background: var(--color-surface-canvas); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.yg-header__wrap { display: flex; align-items: center; gap: var(--space-2); height: 50px; padding: 0 var(--space-4); }
.yg-header__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-decoration: none; flex: none; }
.yg-header__logo b { font-size: 18px; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--color-action-primary); }
.yg-header__logo span { font-size: 9px; line-height: 1.15; letter-spacing: .01em; color: var(--color-text-subtle); }
.yg-nav { display: flex; align-items: center; gap: 1px; margin-left: var(--space-3); min-width: 0; flex: 1 1 auto; overflow: hidden; }
.yg-nav__item { position: relative; }
.yg-nav__link {
  display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 7px;
  border: none; background: none; border-radius: var(--radius-sm); cursor: pointer;
  font: 500 12.5px/1 var(--font-ui); color: var(--color-text-secondary); white-space: nowrap; text-decoration: none;
}
.yg-nav__link:hover { background: var(--color-surface-control); color: var(--color-action-primary); }
.yg-nav__caret { font-size: 9px; color: var(--color-text-subtle); }
.yg-nav__drop {
  position: absolute; top: 100%; left: 0; z-index: 5; min-width: 250px; margin-top: 4px;
  background: var(--color-surface-canvas); border: 1px solid var(--color-border-card);
  border-radius: var(--radius-md); box-shadow: var(--shadow-card-soft); padding: var(--space-2);
  display: flex; flex-direction: column; max-height: 320px; overflow-y: auto;
}
.yg-nav__drop a { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13.5px; color: var(--color-text-secondary); text-decoration: none; }
.yg-nav__drop a:hover { background: var(--color-surface-soft); color: var(--color-action-primary); }
.yg-header__acts { display: flex; align-items: center; gap: 5px; margin-left: auto; flex: none; }
.yg-hbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 0 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-soft); background: none; cursor: pointer;
  font: 500 13px/1 var(--font-ui); color: var(--color-text-secondary); text-decoration: none; white-space: nowrap;
}
.yg-hbtn:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.yg-hbtn--icon { width: 34px; padding: 0; }
.yg-hbtn.is-on { background: var(--c-primary-soft); border-color: var(--color-action-primary); color: var(--color-action-primary); }
.yg-hbtn svg { flex: none; }
.yg-burger { display: flex; width: 38px; height: 38px; border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); background: none; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.yg-burger span { display: block; width: 17px; height: 2px; background: var(--color-text-secondary); border-radius: 2px; }
@container (max-width: 1400px) { .yg-nav__item:nth-last-child(1) { display: none; } }
@container (max-width: 1290px) { .yg-nav__item:nth-last-child(2) { display: none; } }
@container (max-width: 1190px) { .yg-nav__item:nth-last-child(3) { display: none; } }
@container (max-width: 1100px) { .yg-nav__item:nth-last-child(4) { display: none; } }
@container (max-width: 1023px) { .yg-nav { display: none; } .yg-hbtn__t { display: none; } .yg-hbtn--chat { width: 34px; padding: 0; } }
/* Меню из бургера — боковая панель слева, выезжает горизонтально. */
.yg-menu {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 67; width: 320px; max-width: 100%;
  background: var(--color-surface-canvas); border-right: 1px solid var(--color-border-card);
  box-shadow: 10px 0 40px rgba(12,20,22,.2); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto;
  transform: translateX(-100%); transition: transform .26s var(--ease-standard);
}
.yg-menu.is-open { transform: translateX(0); }
.yg-menu__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.yg-menu__head b { flex: 1; font-size: 16px; font-weight: 600; }
.yg-menu__grp { margin: var(--space-3) 0 2px; font-family: var(--wb-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); }
.yg-menu__row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 0 10px;
  border: none; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font: 500 15px/1.3 var(--font-ui); color: var(--color-text-secondary); text-decoration: none; text-align: left;
}
.yg-menu__row:hover { background: var(--color-surface-soft); color: var(--color-action-primary); }
.yg-menu__row .grow { flex: 1; min-width: 0; }
.yg-menu__sub { display: flex; flex-direction: column; padding-left: 12px; }
.yg-menu__sub a { min-height: 40px; display: flex; align-items: center; font-size: 14px; color: var(--color-text-muted); text-decoration: none; padding: 0 10px; }
.yg-menu__sub a:hover { color: var(--color-action-primary); }

/* Дропдаун профиля — как в Childhood: Гость → Войти → кабинет → город, тема, шрифт */
.yg-dd-back {
  position: absolute; inset: 0; z-index: 66; background: var(--color-backdrop);
  opacity: 0; pointer-events: none; transition: opacity .22s var(--ease-standard);
}
.yg-dd-back.is-open { opacity: 1; pointer-events: auto; }
/* Панель выезжает сбоку и туда же прячется — не выпадает сверху. */
.yg-dd {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 67; width: 320px; max-width: 100%;
  background: var(--color-surface-canvas); border-left: 1px solid var(--color-border-card);
  box-shadow: -10px 0 40px rgba(12,20,22,.2); padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); overflow-y: auto;
  transform: translateX(100%); transition: transform .26s var(--ease-standard);
}
.yg-dd.is-open { transform: translateX(0); }
.yg-dd__head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-2); }
.yg-dd__head b { flex: 1; font-size: 16px; font-weight: 600; }
.yg-dd__k { margin: 0 0 2px; font-family: var(--wb-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); }
.yg-dd__div { height: 1px; background: var(--color-border-card); margin: var(--space-2) 0; }
.yg-dd__row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  border: none; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font: 500 14px/1.3 var(--font-ui); color: var(--color-text-secondary); text-decoration: none; text-align: left;
}
.yg-dd__row:hover { background: var(--color-surface-soft); color: var(--color-action-primary); }
.yg-dd__row .grow { flex: 1; min-width: 0; }
.yg-dd__val { font-size: 13px; color: var(--color-text-muted); }
.yg-dd__ctl { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 2px; }
.yg-dd__ctl > span { font-size: 12.5px; color: var(--color-text-muted); }
.yg-seg { display: flex; gap: 4px; padding: 4px; background: var(--color-surface-control); border-radius: var(--radius-pill); }
.yg-seg button {
  flex: 1; min-height: 44px; border: none; border-radius: var(--radius-pill); background: none; cursor: pointer;
  font: 600 13px/1 var(--font-ui); color: var(--color-text-muted);
}
.yg-seg button.is-on { background: var(--color-surface-canvas); color: var(--color-text-primary); box-shadow: var(--shadow-button); }
.yg-seg--fs button:nth-child(2) { font-size: 15px; }
.yg-seg--fs button:nth-child(3) { font-size: 17px; }

/* Топ-шит городов */
.yg-topsheet-scrim { position: absolute; inset: 0; z-index: 64; background: var(--color-backdrop); }
.yg-topsheet {
  position: absolute; top: 0; left: 0; right: 0; z-index: 65; max-height: 86%; overflow-y: auto;
  background: var(--color-surface-canvas); border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl);
  box-shadow: 0 16px 50px rgba(12,20,22,.28); padding: var(--space-4) var(--space-5) var(--space-6);
}
.yg-topsheet__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); }
.yg-topsheet__head h3 { margin: 0; flex: 1; font: 600 18px/1.3 var(--font-ui); }
.yg-topsheet__hint { margin: 0 0 var(--space-3); font-size: 13px; color: var(--color-text-muted); }
.yg-citygrp { margin: var(--space-3) 0 2px; display: flex; align-items: center; gap: 6px; font-family: var(--wb-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-subtle); }
.yg-city {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  border: none; border-radius: var(--radius-sm); background: none; cursor: pointer;
  font: 500 15px/1.3 var(--font-ui); color: var(--color-text-secondary); text-align: left;
}
.yg-city:hover { background: var(--color-surface-soft); }
.yg-city.is-on { background: var(--c-primary-soft); color: var(--color-action-primary); font-weight: 700; }
.yg-citybox { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--color-border-soft); display: grid; place-items: center; font-size: 12px; }
.yg-city.is-on .yg-citybox { background: var(--color-action-primary); border-color: var(--color-action-primary); color: #fff; }

.yg-card__foot { display: flex; align-items: center; gap: 10px; padding: 10px 2px 0; flex-wrap: wrap; }
.yg-card__state { font-size: 12.5px; color: var(--color-text-subtle); }

/* Модалка формы — «вызов по кнопке» */
.yg-back {
  position: absolute; inset: 0; z-index: 70;
  background: var(--color-backdrop); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: var(--space-5);
}
@container (max-width: 640px) { .yg-back { align-items: flex-end; padding: 0; } }
.yg-sheet {
  position: relative; width: 100%; max-width: 480px; max-height: 100%; overflow-y: auto;
  background: var(--color-surface-canvas); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
@container (max-width: 640px) { .yg-sheet { max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 92%; } }
.yg-sheet__head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: var(--color-surface-canvas);
  border-bottom: 1px solid var(--color-border-card);
}
.yg-sheet__head h2 { margin: 0; flex: 1; font: 600 18px/1.3 var(--font-ui); }
.yg-sheet__body { padding: var(--space-5); }
/* В модалке рамка и кромка карточки лишние — их роль играет сам лист. */
.yg-sheet .lf { border: none; padding: 0; box-shadow: none; background: none; }
.yg-sheet .lf::before { display: none; }
.yg-sheet .lf__head__t { display: none; }
.yg-sheet .lf__head { justify-content: flex-start; margin-bottom: 16px; }
.yg-x { width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; background: var(--color-surface-control); color: var(--color-text-muted); font-size: 21px; line-height: 1; cursor: pointer; }
.yg-x:hover { background: var(--color-surface-input); color: var(--color-text-primary); }

/* Модалка телефона */
.yg-phone { max-width: 360px; text-align: center; padding: var(--space-6) var(--space-5) var(--space-5); }
.yg-phone__l { font-size: 13px; color: var(--color-text-muted); }
.yg-phone__n { display: block; margin: 8px 0 var(--space-4); font: 700 28px/1.2 var(--font-ui); color: var(--color-text-primary); letter-spacing: .5px; text-decoration: none; font-variant-numeric: tabular-nums; }

/* Кнопки ДС */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  font: 600 15px/1 var(--font-ui); transition: background var(--duration-fast) var(--ease-standard);
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Главное действие: градиент шириной в две кнопки — на наведении он «проезжает». */
.btn-primary {
  color: #fff; box-shadow: var(--sh-cta);
  background: var(--grad-cta); background-size: 200% 100%; background-position: 100% 0;
  transition: background-position .45s var(--ease-standard), box-shadow var(--ease-ui), transform var(--ease-ui);
}
.btn-primary:hover:not(:disabled) { background-position: 0 0; box-shadow: var(--sh-cta-hover); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn__arrow { flex: none; width: 18px; height: 18px; }
.btn-secondary { background: var(--color-surface-canvas); color: var(--color-action-primary); border-color: var(--color-action-primary); }
.btn-secondary:hover:not(:disabled) { background: var(--c-primary-soft); }
.btn-ghost { background: none; color: var(--color-text-secondary); border-color: var(--color-border-soft); }
.btn-ghost:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.btn-sm { min-height: 44px; padding: 0 var(--space-4); font-size: 13.5px; }
.btn-block { width: 100%; }
:where(.wb-frame) :focus-visible { outline: 2px solid var(--color-action-primary); outline-offset: 2px; }

/* =======================================================================
   Атомы форм. Оформление — по макету из Claude Design: карточка с градиентной
   кромкой сверху, плашка адресата в шапке, варианты выбора карточками.
   ======================================================================= */
.lf {
  position: relative; background: var(--color-surface-canvas);
  border: 1px solid var(--color-border-card); border-radius: var(--r-form);
  box-shadow: var(--sh-form); padding: 30px 30px 26px;
}
/* Кромка действия: единственное место, где градиент занимает всю ширину. */
.lf::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--r-form) var(--r-form) 0 0; background: var(--grad-topline);
}
@container (max-width: 560px) { .lf { padding: 22px 18px 20px; border-radius: 18px; } .lf::before { border-radius: 18px 18px 0 0; } }

.lf__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.lf__head__t { flex: 1 1 220px; min-width: 0; }
.lf__title { margin: 0; font: 600 24px/1.3 var(--font-ui); letter-spacing: -.02em; text-wrap: balance; }
.lf__promise { margin: 6px 0 0; font-size: 13px; color: var(--color-text-secondary); }
.lf__sub { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--color-text-muted); }

/* Плашка адресата: видно, к кому уйдёт заявка, ещё до первого шага. */
.lf__addr {
  flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px;
  border: 1px solid var(--color-border-card); border-radius: var(--radius-pill);
  background: var(--color-surface-header);
}
.lf__addr__ava {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gradient-marketing); color: #06231f; font: 700 10.5px/1 var(--font-ui);
}
.lf__addr__b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lf__addr__b b { font: 600 12px/1.25 var(--font-ui); color: var(--color-text-primary); }
.lf__addr__b span { font-size: 10.5px; line-height: 1.2; color: var(--color-text-subtle); }

.lf__form { display: flex; flex-direction: column; gap: var(--space-3); }
/* Квиз: шкала шагов + один экран за раз */
.lf__quiz { display: flex; gap: 8px; margin-bottom: 22px; }
.lf__qs { flex: 1; display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; color: var(--color-text-subtle); }
.lf__qs i { display: block; height: 3px; border-radius: 999px; background: var(--color-border-soft); }
.lf__qs.is-done i { background: color-mix(in srgb, var(--color-action-primary) 45%, var(--color-surface-input)); }
.lf__qs.is-on i { background: var(--color-action-primary); }
.lf__qs.is-on { color: var(--color-text-primary); font-weight: 600; }
.lf__stepbox { display: flex; flex-direction: column; gap: var(--space-3); }
.lf__nav { display: flex; gap: var(--space-2); align-items: center; margin-top: 4px; }
.lf__nav .btn-primary { flex: 1; min-height: 52px; border-radius: var(--r-control); font-size: 15.5px; }
.lf__nav .btn-ghost { min-height: 52px; border-radius: var(--r-control); }
.lf__hint { margin: 0; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; }
/* Сводка на шаге контактов: что уже выбрано */
.lf__recap { display: flex; flex-wrap: wrap; gap: 6px; }
.lf__recap span {
  font-size: 12.5px; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--c-primary-soft); color: var(--color-action-primary); font-weight: 600;
}
.lf__fs { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.lf__field { display: flex; flex-direction: column; gap: 5px; }
.lf__label { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.lf__label small { font-weight: 400; font-size: 12px; color: var(--color-text-subtle); }
.lf__req { color: var(--color-error); }
.lf__inp {
  width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--color-border-soft); border-radius: 10px;
  font: 400 15px/1.35 var(--font-ui); color: var(--color-text-primary); background: var(--color-surface-canvas);
}
.lf__inp:focus { outline: none; border-color: var(--color-action-primary); box-shadow: 0 0 0 3px rgba(20,167,160,.16); }
.lf__inp--err { border-color: var(--color-error); }
select.lf__inp { cursor: pointer; }
textarea.lf__inp { min-height: 84px; resize: vertical; }
.lf__err { font-size: 13px; font-weight: 500; color: var(--color-error); }
.lf__cascade { display: flex; flex-direction: column; gap: var(--space-2); }
.lf__ai { margin-top: 8px; padding: 11px 12px; background: var(--color-surface-soft); border: 1px solid var(--color-border-card); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 9px; }
.lf__check { display: flex; align-items: flex-start; gap: 9px; min-height: 44px; padding: 6px 0; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; line-height: 1.4; }
.lf__check input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--color-action-primary); cursor: pointer; }
/* Галочка «я закончил описание» — как в проде: подбор по явному действию, а не на каждый ввод. */
.lf__done-check {
  display: flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 4px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--color-surface-soft); border: 1px solid var(--color-border-card);
  font: 600 13.5px/1.35 var(--font-ui); color: var(--color-action-primary); cursor: pointer;
}
.lf__done-check input { flex: none; width: 18px; height: 18px; accent-color: var(--color-action-primary); cursor: pointer; }
.lf__sum { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(24,122,223,.06); border: 1px solid rgba(24,122,223,.25); font-size: 13.5px; line-height: 1.55; }
.lf__sum b { color: var(--color-link); }
.lf__sum-n { font-size: 12px; color: var(--color-text-muted); }
/* Разделитель «или»: выбор из справочника и описание словами — равноправны. */
.lf__or { display: flex; align-items: center; gap: 12px; color: var(--color-text-subtle); font-size: 12.5px; }
.lf__or::before, .lf__or::after { content: ""; flex: 1; height: 1px; background: var(--color-border-card); }

/* Шаг «Кому»: карточки юристов бюро горизонтальным списком.
   min-width:0 по всей цепочке — иначе флекс-потомок не сжимается уже содержимого
   и горизонтальный скролл «протекает» на всю форму вместо своей области. */
.lf__form, .lf__stepbox, .lf__field, .lf__cascade, .lf__opts, .lf__opt { min-width: 0; }
.lf__people {
  display: flex; gap: 10px; padding: 2px 2px 8px;
  min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.lf__person {
  position: relative; flex: none; width: 124px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 10px 12px;
  border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-md);
  background: var(--color-surface-canvas); cursor: pointer; text-align: center;
}
.lf__person:hover { border-color: var(--color-action-primary); }
.lf__person.is-on { border-color: var(--color-action-primary); background: var(--c-primary-soft); }
.lf__person b { font-size: 13px; font-weight: 600; color: var(--color-text-primary); line-height: 1.25; }
.lf__person span:not(.lf__person__ava):not(.lf__person__ok) { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.3; }
.lf__person__ava {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gradient-marketing); color: #06231f; font: 700 15px/1 var(--font-ui);
}
.lf__person__ava--any { background: var(--color-surface-control); color: var(--color-text-muted); }
.lf__person__ok {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-action-primary); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}

/* Резюме заявки — то, что уходит исполнителю от имени ЮрГида */
.lf__brief {
  border: 1px solid var(--color-border-card); border-radius: var(--r-control);
  background: var(--color-surface-soft); padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: 6px;
}
.lf__brief__h { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-card); }
.lf__brief__logo { font-weight: 700; font-size: 13px; color: var(--color-action-primary); letter-spacing: -.01em; }
.lf__brief__h span:last-child { font-size: 11.5px; color: var(--color-text-subtle); }
.lf__brief__row { display: flex; gap: 12px; align-items: baseline; font-size: 13px; }
.lf__brief__row span { flex: none; min-width: 74px; color: var(--color-text-muted); }
.lf__brief__row b { font-weight: 600; color: var(--color-text-primary); overflow-wrap: anywhere; }
.lf__dt { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.lf__dt .lf__inp { flex: 1 1 130px; min-width: 0; }
.lf__reset { border: none; background: none; color: var(--color-text-muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 6px 2px; }
.lf__alert { padding: 11px 13px; border-radius: var(--radius-sm); background: var(--color-error-soft); border: 1px solid rgba(217,45,32,.28); color: var(--color-error); font-size: 13.5px; }
.lf__alert a { color: var(--color-link); }
.lf__pause { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--color-warning-soft); border: 1px solid rgba(138,109,26,.3); color: var(--color-warning); font-size: 13.5px; line-height: 1.5; }

.lf__done { display: flex; flex-direction: column; gap: var(--space-3); }
.lf__done-hd { text-align: center; padding: var(--space-2) 0 0; }
.lf__done-ic { width: 56px; height: 56px; margin: 0 auto var(--space-3); border-radius: 50%; background: var(--c-accent-soft); color: var(--color-action-primary); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.lf__done-t { margin: 0 0 5px; font: 600 20px/1.3 var(--font-ui); }
.lf__done-d { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.lf__receipt { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--c-accent-soft); border: 1px solid rgba(20,167,160,.3); font-size: 13.5px; line-height: 1.7; }
.lf__acts { display: flex; flex-direction: column; gap: var(--space-2); }
.lf__act {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 var(--space-4);
  border: 1.5px solid var(--color-action-primary); border-radius: var(--radius-sm);
  background: var(--color-surface-canvas); color: var(--color-action-primary);
  font: 600 14px/1 var(--font-ui); text-decoration: none; cursor: pointer;
}
.lf__act:hover { background: var(--color-action-primary); color: #fff; }
.lf__act.is-used { background: var(--c-accent-soft); }
.lf__act-check { margin-left: auto; font-weight: 700; }
.lf__fog {
  font-variant-numeric: tabular-nums;
  -webkit-mask-image: linear-gradient(to right, #000 42%, rgba(0,0,0,.35) 60%, transparent 82%);
  mask-image: linear-gradient(to right, #000 42%, rgba(0,0,0,.35) 60%, transparent 82%);
  user-select: none;
}
.lf__note { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--c-accent-soft); border: 1px solid rgba(20,167,160,.3); font-size: 13px; }
.lf__soft { text-align: center; font-size: 13.5px; margin: 0; }
.lf__soft a { color: var(--color-link); }

/* Дверь звонка */
.crv { display: flex; flex-direction: column; gap: var(--space-2); }
.crv__note { margin: 0; font-size: 12.5px; color: var(--color-text-muted); }
.crv__item {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 var(--space-4);
  border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-sm);
  color: var(--color-text-primary); text-decoration: none; font-size: 14.5px;
}
.crv__item--phone { border-color: var(--color-action-primary); color: var(--color-action-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.crv__item:hover { border-color: var(--color-action-primary); }

/* =======================================================================
   Футер — по образцу Childhood: всё по центру, группы-гармошки на мобиле,
   на десктопе раскрыты всегда.
   ======================================================================= */
.ftr { background: var(--color-surface-muted); border-top: 1px solid var(--color-border-card); padding: var(--space-8) var(--space-4) 120px; }
.ftr__in { max-width: var(--content-max); margin-inline: auto; }
.ftr-brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ftr-brand b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--color-action-primary); }
.ftr-tag { margin: 0; max-width: 40ch; font-size: 13.5px; color: var(--color-text-muted); }
.ftr-join {
  display: flex; align-items: center; gap: 12px; max-width: 460px; margin: var(--space-5) auto var(--space-4);
  padding: 14px 16px; border-radius: var(--radius-lg); background: var(--c-primary-soft);
  border: 1px solid color-mix(in srgb, var(--color-action-primary) 24%, transparent);
  color: var(--color-text-primary); text-decoration: none;
}
.ftr-join svg { flex: none; color: var(--color-action-primary); }
.ftr-join__b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ftr-join__b b { font-size: 14px; }
.ftr-join__b span { font-size: 12.5px; color: var(--color-text-muted); }
.ftr-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; margin: var(--space-5) 0 var(--space-2); }
.ftr-group { border-bottom: 1px solid var(--color-border-card); }
.ftr-group__head {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  min-height: 46px; padding: 12px 4px; border: none; background: none; cursor: pointer;
  font: 600 14px/1 var(--font-ui); color: var(--color-text-primary);
}
.ftr-chev { color: var(--color-text-subtle); transition: transform var(--duration-fast); display: inline-flex; }
.ftr-group.is-open .ftr-chev { transform: rotate(180deg); }
.ftr-group__body { display: none; flex-direction: column; align-items: center; gap: 2px; padding: 0 0 12px; }
.ftr-group.is-open .ftr-group__body { display: flex; }
.ftr-link { font-size: 13.5px; color: var(--color-text-muted); padding: 8px 4px; text-align: center; text-decoration: none; }
.ftr-link:hover { color: var(--color-action-primary); }
.ftr-social { display: flex; justify-content: center; gap: 10px; margin: var(--space-5) 0; }
.ftr-soc {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--color-border-soft); background: none; color: var(--color-text-muted); cursor: pointer;
}
.ftr-soc:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.ftr-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 4px 0 14px; }
.ftr-legal a { font-size: 12.5px; color: var(--color-text-muted); text-decoration: none; }
.ftr-legal a:hover { color: var(--color-action-primary); }
.ftr-bottom { text-align: center; padding-top: 14px; border-top: 1px solid var(--color-border-card); font-size: 12.5px; color: var(--color-text-subtle); }
@container (min-width: 768px) {
  .ftr-cols { grid-template-columns: repeat(4, 1fr); }
  .ftr-group { border-bottom: none; }
  .ftr-group__head { cursor: default; min-height: 0; padding: 0 0 10px; }
  .ftr-chev { display: none; }
  .ftr-group__body { display: flex !important; }
}

/* =======================================================================
   Perplexity-виджет — по образцу Childhood.
   ======================================================================= */
.pplx-scrim { position: absolute; inset: 0; z-index: 48; background: rgba(0,19,54,.38); backdrop-filter: blur(2px); }
.pplx-zone { position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px; }
.pplx-bar {
  display: flex; align-items: center; gap: 10px; width: 100%; max-width: 760px; margin-inline: auto;
  min-height: 52px; padding: 6px 6px 6px 14px; cursor: text;
  background: var(--color-surface-canvas); border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-pill); box-shadow: 0 6px 24px rgba(12,20,22,.14); text-align: left;
}
.pplx-bar:hover { border-color: var(--color-action-primary); }
.pplx-spark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--color-action-primary); }
@media (prefers-reduced-motion: no-preference) { .pplx-spark { animation: pplx-pulse 2.6s ease-in-out infinite; } }
@keyframes pplx-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.pplx-bar__ph { flex: 1; min-width: 0; font-size: 14px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pplx-lead { color: var(--color-text-primary); font-weight: 600; }
.pplx-mic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: none; background: none; border-radius: 50%; color: var(--color-text-subtle); }
.pplx-bar__bot {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--color-action-primary); color: #fff; font: 600 13px/1 var(--font-ui);
}
.pplx-bar__bot:hover { background: var(--color-action-primary-hover); }
@container (max-width: 560px) { .pplx-bar__bot span { display: none; } .pplx-bar__bot { width: 44px; padding: 0; justify-content: center; } }

.pplx-panel {
  position: relative; width: 100%; max-width: 760px; margin-inline: auto;
  background: var(--color-surface-canvas); border: 1px solid var(--color-border-card);
  border-radius: var(--radius-lg); box-shadow: 0 -8px 40px rgba(12,20,22,.22);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
  max-height: calc(100vh - 40px);
}
.pplx-close { position: absolute; top: 10px; right: 10px; }
.pplx-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--color-surface-control); border-radius: var(--radius-pill); align-self: flex-start; }
.pplx-seg button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: none; border-radius: var(--radius-pill); background: none; cursor: pointer;
  font: 600 13px/1 var(--font-ui); color: var(--color-text-muted);
}
.pplx-seg button.is-active { background: var(--color-surface-canvas); color: var(--color-text-primary); box-shadow: var(--shadow-button); }
.pplx-field {
  display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 13px;
  border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-pill); background: var(--color-surface-canvas);
}
.pplx-field:focus-within { border-color: var(--color-action-primary); box-shadow: var(--ring); }
.pplx-field input { flex: 1; min-width: 0; min-height: 40px; border: none; outline: none; background: none; font: 400 15px/1.3 var(--font-ui); color: var(--color-text-primary); }
.pplx-send { flex: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--color-action-primary); color: #fff; cursor: pointer; display: grid; place-items: center; }
.pplx-send:disabled { opacity: .45; cursor: not-allowed; }
.pplx-list { display: flex; flex-direction: column; gap: var(--space-3); overflow-y: auto; }
.pplx-a { background: var(--color-surface-soft); border: 1px solid var(--color-border-card); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.pplx-a__q { margin: 0 0 6px; font: 600 14px/1.4 var(--font-ui); }
.pplx-a__q::before { content: "Вы спросили: "; color: var(--color-text-subtle); font-weight: 400; font-size: 12.5px; }
.pplx-a__t { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); }
.pplx-a__links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pplx-a__links a { font-size: 13px; color: var(--color-link); text-decoration: none; padding: 5px 11px; border: 1px solid rgba(24,122,223,.28); border-radius: var(--radius-pill); }
.pplx-a__f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.pplx-prompts { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.pplx-chip {
  flex: none; min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-soft); background: var(--color-surface-canvas);
  font: 400 12.5px/1 var(--font-ui); color: var(--color-text-secondary); cursor: pointer; white-space: nowrap;
}
.pplx-chip:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.pplx-note { margin: 0; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-text-subtle); }
.pplx-skel { display: flex; flex-direction: column; gap: 8px; }
.pplx-skel i { display: block; height: 11px; border-radius: 6px; background: linear-gradient(90deg, var(--color-surface-subtle) 25%, var(--color-surface-control) 37%, var(--color-surface-subtle) 63%); background-size: 400% 100%; animation: pplx-sh 1.3s ease infinite; }
.pplx-skel i:nth-child(2) { width: 86%; } .pplx-skel i:nth-child(3) { width: 60%; }
@keyframes pplx-sh { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Чат-бот */
.bot-screen {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 60;
  width: 420px; max-width: 100%;
  background: var(--color-surface-canvas); border-left: 1px solid var(--color-border-card);
  box-shadow: -10px 0 40px rgba(12,20,22,.18);
  display: flex; flex-direction: column;
}
@container (max-width: 640px) { .bot-screen { width: 100%; border-left: none; } }
.bot-head { display: flex; align-items: center; gap: 10px; padding: 11px var(--space-4); background: var(--color-dark-navy); color: #fff; }
.bot-ava { width: 32px; height: 32px; border-radius: 50%; background: var(--gradient-marketing); display: grid; place-items: center; color: #06231f; }
.bot-ttl { flex: 1; min-width: 0; }
.bot-ttl b { display: block; font-size: 14px; font-weight: 600; }
.bot-ttl span { font-size: 11.5px; color: var(--color-text-on-dark-muted); }
.bot-x { width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; cursor: pointer; }
.bot-body { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; background: var(--color-surface-muted); }
.bot-msg { max-width: 84%; padding: 9px 13px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; }
.bot-msg--bot { align-self: flex-start; background: var(--color-surface-canvas); border: 1px solid var(--color-border-card); border-bottom-left-radius: var(--radius-xs); }
.bot-msg--me { align-self: flex-end; background: var(--color-action-primary); color: #fff; border-bottom-right-radius: var(--radius-xs); }
.bot-qr { display: flex; flex-wrap: wrap; gap: 6px; }
.bot-qr button {
  min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-action-primary); background: var(--color-surface-canvas);
  color: var(--color-action-primary); font: 500 13px/1 var(--font-ui); cursor: pointer;
}
.bot-meta { padding: 7px var(--space-4); font-size: 11px; color: var(--color-text-subtle); background: var(--color-surface-muted); display: flex; gap: 14px; }
.bot-meta button { border: none; background: none; padding: 0; color: var(--color-link); font-size: 11px; cursor: pointer; text-decoration: underline; }
.bot-input { padding: 10px var(--space-3); border-top: 1px solid var(--color-border-card); display: flex; gap: 8px; align-items: center; background: var(--color-surface-canvas); }
.bot-input input { flex: 1; min-width: 0; min-height: 44px; padding: 9px 13px; border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-pill); font: 400 14px/1.3 var(--font-ui); background: var(--color-surface-canvas); color: var(--color-text-primary); }
.bot-input input:focus { outline: none; border-color: var(--color-action-primary); }
.yg-top {
  position: absolute; right: 16px; bottom: 84px; z-index: 47;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border-soft); cursor: pointer;
  background: var(--color-surface-canvas); color: var(--color-action-primary);
  box-shadow: var(--shadow-card-soft); display: grid; place-items: center;
}
.yg-top:hover { background: var(--color-action-primary); color: #fff; border-color: var(--color-action-primary); }
.bot-send { width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; background: var(--color-action-primary); color: #fff; cursor: pointer; display: grid; place-items: center; }

[x-cloak] { display: none !important; }

/* ---------- Экран оффера подробной формы ---------- */
.lf__offer { gap: var(--space-4); }
.lf__offer__head { text-align: center; padding: var(--space-2) 0; }
.lf__offer__eyebrow { margin: 0 0 6px; font-family: var(--wb-mono, monospace); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-action-primary); }
.lf__offer__t { margin: 0 0 8px; font: 600 22px/1.25 var(--font-ui); letter-spacing: -.01em; }
.lf__offer__d { margin: 0 auto; max-width: 44ch; font-size: 14px; line-height: 1.55; color: var(--color-text-muted); }
.lf__route { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border-card); border-radius: var(--radius-md); background: var(--color-surface-soft); }

/* ---------- Ориентир по цене: обещанная ценность до контактов ---------- */
.lf__price { padding: var(--space-4); border-radius: var(--r-choice); background: var(--c-primary-soft); border: 1px solid color-mix(in srgb, var(--color-action-primary) 30%, transparent); text-align: center; }
.lf__price__l { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-action-primary); }
.lf__price__v { margin: 4px 0 2px; font: 700 30px/1.15 var(--font-ui); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.lf__price__s { font-size: 13.5px; color: var(--color-text-secondary); }
.lf__price__n { margin-top: 6px; font-size: 12px; color: var(--color-text-muted); }

/* ---------- Подпись адресата и источника ---------- */
.lf__src { color: var(--color-text-subtle); }

/* ---------- Пост-экран: что дальше ---------- */
.lf__after { padding-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.lf__after__t { margin: 0; font-size: 13px; font-weight: 600; color: var(--color-text-muted); }

/* ---------- Честная пометка про имитацию в стенде ---------- */
.crv__mock { display: block; margin-top: 4px; color: var(--color-text-subtle); }

/* Шкала шагов кликабельна: вернуться можно на любой пройденный шаг. */
.lf__qs { border: none; background: none; padding: 0; text-align: left; font-family: inherit; cursor: default; }
.lf__qs.is-open { cursor: pointer; }
.lf__qs.is-open:hover span { color: var(--color-action-primary); }
.lf__qs:disabled { cursor: default; }

/* Оффер подробной формы */
.lf__offer { text-align: center; gap: var(--space-3); }
.lf__offer .btn-primary { min-height: 52px; border-radius: var(--r-control); }
.lf__offer__n { margin: 0; font-size: 12.5px; color: var(--color-text-subtle); }

/* =======================================================================
   Варианты выбора — карточки: иконка, название, короткое пояснение.
   Уточнение висит ПОД своей кнопкой, а не под всем рядом.
   ======================================================================= */
.lf__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; align-items: start; }
/* Каналов четыре: держим их сеткой 2×2, иначе последний висит один в ряду. */
.lf__opts--pair { grid-template-columns: repeat(auto-fit, minmax(min(180px, 46%), 1fr)); }
.lf__opt { display: flex; flex-direction: column; gap: 8px; }
.lf__pick {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  width: 100%; padding: 14px 14px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-choice);
  background: var(--color-surface-canvas);
  transition: border-color var(--ease-ui), transform var(--ease-ui), box-shadow var(--ease-ui), background var(--ease-ui);
}
.lf__pick:hover { border-color: var(--color-border-hover); transform: translateY(-1px); }
/* Выбранное — кольцо внутрь, а не толстая рамка: размер карточки не скачет. */
.lf__pick.is-on { border-color: transparent; background: var(--wash-choice); box-shadow: var(--ring-choice); }
.lf__ic { flex: none; margin-bottom: 4px; color: var(--color-action-primary); }
.lf__pick__t { font: 600 14.5px/1.25 var(--font-ui); color: var(--color-text-primary); }
.lf__pick__d { font: 400 11.5px/1.35 var(--font-ui); color: var(--color-text-muted); }

.lf__opt__sub {
  display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border: 1px solid var(--color-border-card); border-radius: var(--r-control);
  background: var(--color-surface-soft);
}
.lf__sub-btn {
  min-height: 44px; padding: 0 10px; cursor: pointer;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-sub);
  background: var(--color-surface-canvas);
  font: 500 12.5px/1 var(--font-ui); color: var(--color-text-secondary);
  transition: border-color var(--ease-ui), box-shadow var(--ease-ui), background var(--ease-ui);
}
.lf__sub-btn:hover { border-color: var(--color-border-hover); }
.lf__sub-btn.is-on { border-color: transparent; background: var(--wash-choice); box-shadow: var(--ring-choice); color: var(--color-action-primary); font-weight: 600; }
.lf__sub-inp {
  width: 100%; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-sub);
  background: var(--color-surface-canvas);
  font: 400 13.5px/1.2 var(--font-ui); color: var(--color-text-primary);
}
.lf__sub-inp:focus { outline: none; border-color: var(--color-action-primary); box-shadow: 0 0 0 3px rgba(20,167,160,.16); }
/* Пустое поле даты/времени показывает не «мм.дд.гггг», а подсказку словом.
   Служебный формат прячем, пока поле пустое и не в фокусе. */
.lf__sub-cell { position: relative; display: block; }
.lf__sub-ph {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 400 13.5px/1 var(--font-ui); color: var(--color-text-subtle);
}
.lf__sub-inp.is-empty { color: transparent; }
.lf__sub-inp.is-empty::-webkit-datetime-edit { color: transparent; }
.lf__sub-inp:focus { color: var(--color-text-primary); }
.lf__sub-inp:focus::-webkit-datetime-edit { color: var(--color-text-primary); }
.lf__sub-cell:focus-within .lf__sub-ph { display: none !important; }

/* Подпись о защите данных — последнее, что видно перед отправкой. */
.lf__safe {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin: 2px 0 0;
  font-size: 12px; line-height: 1.4; color: var(--color-text-subtle);
}
.lf__safe > span { text-align: center; }
.lf__safe__ic { flex: none; width: 15px; height: 15px; }

/* Результат отправки: без празднования, сразу нужное действие. */
.lf__done-k { margin: 0; text-align: center; font-size: 13px; color: var(--color-text-muted); }
.lf__phone { display: block; margin: 6px 0 14px; text-align: center; font: 700 30px/1.15 var(--font-ui); color: var(--color-text-primary); text-decoration: none; font-variant-numeric: tabular-nums; }
.lf__done-n { margin: 0; text-align: center; font-size: 12.5px; color: var(--color-text-subtle); }

/* Второй путь к услуге: пока человек не ушёл в каталог глубже первой ступени. */
.lf__alt { display: flex; flex-direction: column; gap: var(--space-3); }

/* =======================================================================
   Режим для слабовидящих — как в проде: zoom по data-a11y (app.css: 1.15 / 1.32).
   Атрибут ставится на корень раздела, поэтому правила общие: и рамка стенда
   раздела 01, и полотно разделов 02–04, и все выезжающие панели.
   ======================================================================= */
[data-a11y='large'] .wb-frame,
[data-a11y='large'] .pf-page,
[data-a11y='large'] .yg-menu,
[data-a11y='large'] .yg-dd,
[data-a11y='large'] .yg-topsheet,
[data-a11y='large'] .yg-back,
[data-a11y='large'] .pplx-zone,
[data-a11y='large'] .bot-screen,
[data-a11y='large'] .lf-sheet,
[data-a11y='large'] .qp,
.wb-frame[data-a11y='large'] { zoom: 1.15; }
[data-a11y='xlarge'] .wb-frame,
[data-a11y='xlarge'] .pf-page,
[data-a11y='xlarge'] .yg-menu,
[data-a11y='xlarge'] .yg-dd,
[data-a11y='xlarge'] .yg-topsheet,
[data-a11y='xlarge'] .yg-back,
[data-a11y='xlarge'] .pplx-zone,
[data-a11y='xlarge'] .bot-screen,
[data-a11y='xlarge'] .lf-sheet,
[data-a11y='xlarge'] .qp,
.wb-frame[data-a11y='xlarge'] { zoom: 1.32; }