/* Выпадающих списков и прочих общих виджетов на этой странице нет — своя копия утилит ptr-*
   не подключается через @import: у каждой страницы своя самостоятельная таблица стилей
   (см. stan-partnerom.css, kontakty.css и т.д.), здесь класс с тем же смыслом называется fr-. */

/* Страница «Франшиза» (/franshiza) переписана по 20 макетам владельца от 2026-09-19
   (public/франшиза/, порядок блоков — «Текстовый документ.txt» в той же папке).
   Все классы с префиксом fr-, разметка — Pages/Shared/_Fr*.cshtml. */

.fr-page {
  --fr-radius: 16px;
  --fr-radius-sm: 12px;
  --fr-shadow: 0 1px 2px rgba(20, 24, 26, .04), 0 14px 34px -22px rgba(20, 24, 26, .22);
  color: var(--ink);
}

/* ===================== ОБЩИЕ ЭЛЕМЕНТЫ ===================== */

.fr-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

.fr-section { padding: 56px 0 0; }
.fr-section--tight { padding-top: 44px; }

.fr-head { margin-bottom: 26px; }
.fr-head--flush { margin-bottom: 0; }
.fr-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 40px;
  align-items: end;
}
.fr-head--split .fr-sub { max-width: none; }

.fr-eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-700);
}

.fr-eyebrow--muted { color: var(--muted); letter-spacing: .1em; }

.fr-h1 {
  margin: 4px 0 0;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.fr-h2 {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 600;
  line-height: 1.14;
  color: var(--ink);
}

.fr-h2--sm { font-size: clamp(24px, 2.1vw, 32px); }

.fr-green { color: var(--green-700); }

.fr-sub {
  margin: 10px 0 0;
  max-width: 720px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

.fr-lead {
  margin: 6px 0 0;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--green-700);
}

.fr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
}

.fr-link:hover { color: var(--green-600); }
.fr-link :is(i, svg) { width: 16px; height: 16px; }

.fr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--fr-radius-sm);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s, color .15s, opacity .15s, border-color .15s;
}

.fr-btn :is(i, svg) { width: 17px; height: 17px; }
.fr-btn--lg { min-height: 54px; padding: 0 30px; font-size: 15.5px; }
.fr-btn--primary { background: var(--green-700); color: #fff; }
.fr-btn--primary:hover { background: var(--green-600); color: #fff; }
.fr-btn--primary:disabled { opacity: .6; cursor: default; }
/* Обводка нужна всегда, не только тенью: на белой карточке тарифа (тоже #fff) сама кнопка
   без неё почти не читалась — тень поверх такого же белого фона не даёт достаточного контраста. */
.fr-btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.fr-btn--ghost:hover { background: var(--line-2); }
.fr-btn--dark { background: #16191b; color: #fff; }
.fr-btn--dark:hover { background: #22282b; color: #fff; }
.fr-btn--outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.fr-btn--outline:hover { background: rgba(255,255,255,.12); }

.fr-btn-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* Иконка в светло-зелёном квадрате — основной маркер строк и карточек */
.fr-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--fr-radius-sm);
  background: var(--green-50);
  color: var(--green-700);
}

.fr-komu {padding-top:17px;}

.fr-ico--sm { width: 34px; height: 34px; border-radius: 10px; }
.fr-ico--sm :is(i, svg) { width: 17px; height: 17px; }
.fr-ico--lg { width: 52px; height: 52px; }
.fr-ico--lg :is(i, svg) { width: 24px; height: 24px; }

.fr-round {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--green-700);
  box-shadow: 0 6px 18px -8px rgba(20, 24, 26, .35);
}

.fr-round--soft { background: var(--green-50); box-shadow: none; }
.fr-round--white { background: #fff; box-shadow: none; }
.fr-round--green { background: var(--green-700); color: #fff; box-shadow: none; }
.fr-round :is(i, svg) { width: 22px; height: 22px; }

.fr-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--fr-shadow);
}
.fr-badge :is(i, svg) { width: 15px; height: 15px; color: var(--green-700); }

.fr-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--green-50);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-700);
}
.fr-pill :is(i, svg) { width: 17px; height: 17px; }

.fr-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--line-2);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-3);
}

.fr-note {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 18px 22px;
  border: 1px solid #e2eee3;
  border-radius: var(--fr-radius);
  background: #f1f7f1;
}
.fr-note__body { min-width: 0; flex: 1 1 auto; }
.fr-note__title { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.fr-note__text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

.fr-card {
  padding: 24px;
  border-radius: var(--fr-radius);
  background: #fff;
  box-shadow: var(--fr-shadow);
}

/* Кадр в карточке — заглушка, пока файла нет (см. FranshizaModel.HasImage) */
.fr-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--fr-radius);
  background: var(--line-2);
}
.fr-media__stub {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--green-50), #f4f6f2 70%);
  color: var(--green-700);
  opacity: .7;
}
.fr-media__stub :is(i, svg) { width: 34px; height: 34px; }

/* Белая полоса с иконкой, заголовком и пояснением — повторяется почти в каждом блоке */
.fr-bar {
  display: grid;
  grid-template-columns: repeat(var(--fr-bar-cols, 3), minmax(0, 1fr));
  margin: 22px 0 0;
  padding: 16px 8px;
  list-style: none;
  border-radius: var(--fr-radius);
  background: #fff;
  box-shadow: var(--fr-shadow);
}
.fr-bar__item { display: flex; align-items: center; gap: 12px; padding: 4px 18px; }
.fr-bar__item + .fr-bar__item { border-left: 1px solid var(--line); }
.fr-bar__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fr-bar__title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.fr-bar__text { font-size: 13px; line-height: 1.35; color: var(--ink-3); }

/* Карточка «икона + заголовок + текст» — основной строительный блок сетки преимуществ */
.fr-fact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--fr-radius);
  background: #fff;
  box-shadow: var(--fr-shadow);
}
.fr-fact__title { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.fr-fact__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.fr-fact--flat { box-shadow: none; background: var(--line-2); }

/* Сетка карточек fr-fact — число колонок задаётся модификатором на странице */
.fr-grid { display: grid; gap: 16px; }
.fr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fr-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fr-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ===================== 1. ПЕРВЫЙ ЭКРАН =====================
   Макет владельца от 2026-09-20: фотография салона — фон всего первого экрана во всю ширину
   окна, текст лежит слева на осветлённом крае, карточка фактов и цитата — справа поверх кадра,
   белая полоса внизу наезжает на нижнюю границу фото. Раньше блок был обычной сеткой
   «текст | фото-колонка» — поэтому широкий кадр приходилось резать в вертикаль. */

.fr-hero {
  /* Кадр начинается от левого края текста, а не от края окна: секция растянута во всю ширину,
     поэтому отступ до колонки контента считаем сами — половина «лишней» ширины плюс поле .fr-wrap */
  --fr-hero-left: calc((100vw - min(100vw, 1440px)) / 2 + 56px);
  /* Кадр поднимается под хлебные крошки — до нижнего края зелёного меню. Текст и крошки
     при этом остаются на месте: сдвигается только фон, не содержимое секции.
     Запас намеренно больше зазора: лишнее уходит под шапку, которая перекрывает кадр
     (см. правило .header ниже). Так стык не разъезжается, если высота крошек изменится. */
  --fr-hero-rise: 140px;
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 44px 0 34px;
}

/* Фон кончается на 34px выше низа секции — ровно настолько белая полоса заходит на кадр */
.fr-hero__media { position: absolute; top: calc(-1 * var(--fr-hero-rise)); right: 0; bottom: 34px; left: var(--fr-hero-left); z-index: -2; background: var(--line-2); }
.fr-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Слева кадр растворяется полностью: до 22% ширины заливка непрозрачная, дальше плавный сход */
.fr-hero::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--fr-hero-rise));
  right: 0;
  bottom: 34px;
  left: var(--fr-hero-left);
  z-index: -1;
  background: linear-gradient(100deg,
    var(--page) 0%, var(--page) 22%,
    rgba(250, 249, 247, .96) 34%, rgba(250, 249, 247, .78) 46%,
    rgba(250, 249, 247, .4) 58%, rgba(250, 249, 247, 0) 72%);
}

/* Кадр заходит под крошки и под шапку. Обоим нужен свой слой: крошки должны остаться поверх
   фото, а зелёное меню — закрыть ту часть кадра, что уехала выше. Правила живут в CSS страницы,
   поэтому других страниц не касаются. */
.breadcrumbs { position: relative; z-index: 1; }
.header { position: relative; z-index: 2; }

.fr-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 40px;
  align-items: start;
  min-height: 470px;
}

.fr-hero__copy { max-width: 660px; padding-top: 8px; }

.fr-hero__lead {
  margin: 14px 0 0;
  font-family: 'Lora', Georgia, serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--green-700);
}

.fr-hero__text {
  margin: 14px 0 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-3);
}

/* Обе кнопки должны уместиться в одну строку, пилюля уходит во вторую — как в макете.
   Ради этого у кнопок первого экрана поля уже, чем у обычной fr-btn--lg. */
.fr-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.fr-hero__actions .fr-btn--lg { padding: 0 20px; font-size: 14.5px; gap: 8px; }
.fr-hero__actions .fr-btn--lg :is(i, svg) { width: 16px; height: 16px; }

.fr-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--green-50);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-700);
}
.fr-hero__pill :is(i, svg) { width: 17px; height: 17px; }

/* Правая колонка: карточка фактов сверху, цитата под ней — обе лежат поверх фотографии */
.fr-hero__visual { display: flex; flex-direction: column; gap: 18px; }

.fr-hero__facts {
  width: 100%;
  padding: 20px;
  border-radius: var(--fr-radius);
  background: #fff;
  box-shadow: var(--fr-shadow);
  display: grid;
  gap: 18px;
}
.fr-hero__fact { display: flex; align-items: flex-start; gap: 12px; }
.fr-hero__fact-title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.fr-hero__fact-text { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }

.fr-hero__quote {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding: 16px 18px;
  border-radius: var(--fr-radius);
  background: rgba(20, 24, 22, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.fr-hero__quote-photo { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.fr-hero__quote-photo img { width: 100%; height: 100%; object-fit: cover; }
.fr-hero__quote-text { margin: 0; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 13.5px; line-height: 1.4; color: #fff; }
.fr-hero__quote-name { display: block; margin-top: 6px; font-family: 'Manrope', sans-serif; font-style: normal; font-size: 12px; font-weight: 700; color: #cfe6d3; }

/* Полоса лежит поверх кадра: фон секции кончается на 34px выше, она перекрывает эту границу */
.fr-hero .fr-bar { position: relative; margin-top: 36px; margin-bottom: 30px; }

/* ===================== 2. КОМУ ПОДХОДИТ ===================== */

/* Нижнюю полосу этого блока выделяем светло-зелёным: над ней идут белые карточки-аудитории,
   и белая полоса с ними сливалась. Иконки внутри переводим на белый фон — светло-зелёный
   квадрат fr-ico на зелёной полосе стал бы невидимым, а разделители делаем чуть темнее. */
.fr-komu .fr-bar,
.fr-tarify .fr-bar {
  background: var(--green-50);
  border: 1px solid #dceadd;
  box-shadow: none;
  /* Блок тарифов выровнен по центру целиком — полосу возвращаем к обычному чтению слева */
  text-align: left;
}
.fr-komu .fr-bar__item + .fr-bar__item,
.fr-tarify .fr-bar__item + .fr-bar__item { border-left-color: #cfe0d1; }
.fr-komu .fr-bar .fr-ico,
.fr-tarify .fr-bar .fr-ico { background: #fff; }

/* Карточка: кадр во всю ширину сверху, ниже текст. Иконка наезжает на нижний край кадра —
   поэтому у карточки нет верхнего отступа, а у .fr-audience__body — отрицательный сдвиг иконки. */
.fr-audience {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--fr-radius);
  background: #fff;
  box-shadow: var(--fr-shadow);
}

/* Кадры вертикальные — как в исходном спрайте (ячейка 3:4), ничего не обрезаем по высоте */
.fr-audience__media { position: relative; aspect-ratio: 3 / 4; background: var(--line-2); }
.fr-audience__media img { width: 100%; height: 100%; object-fit: cover; }

.fr-audience__body { display: flex; flex-direction: column; gap: 12px; padding: 0 22px 22px; }

/* Белый ореол вокруг кружка — так он читается и на фото, и на белом фоне карточки.
   z-index обязателен: без него верхнюю половину кружка перекрывал кадр. */
.fr-audience__ico { position: relative; z-index: 1; margin: -28px 0 2px; box-shadow: 0 0 0 5px #fff; }
.fr-audience__title { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.fr-audience__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); flex: 1 1 auto; }

/* ===================== 3. ПОЧЕМУ ПАМЯТНИКИ ===================== */

.fr-pochemu__head p.fr-sub { max-width: none; }

/* Карточки этого блока идут строкой: иконка слева, текст справа от неё */
.fr-pochemu .fr-fact { flex-direction: row; align-items: flex-start; gap: 16px; }
.fr-pochemu .fr-fact__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* По макету от 2026-09-20 это зелёная плашка, а фотография занимает только правую часть и
   слева растворяется в зелёном. Раньше фото лежало на всю ширину под тёмным градиентом —
   получалось «фото с затемнением», а не «зелёный блок с фото сбоку». */
.fr-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 28px;
  padding: 40px 44px;
  border-radius: var(--fr-radius);
  color: #fff;
  background: linear-gradient(100deg, #14401f 0%, #1a5228 58%, #1d5b2c 100%);
}

/* Фото — правая половина; маска слева уводит его в зелёный без жёсткой границы */
.fr-band__bg {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -2;
  width: 52%;
  height: 100%;
  object-fit: cover;
  /* Кадр шире окна плашки и режется по бокам. Смещаем вправо: памятник с цветами стоит
     в правой части снимка, при кропе по центру он бы уехал за границу. */
  object-position: 72% center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0, #000 30%);
}

/* Лёгкая зелёная вуаль поверх кадра — чтобы фото попадало в тон плашки */
.fr-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(16, 60, 30, .55) 0%, rgba(16, 60, 30, .2) 52%, rgba(16, 60, 30, .05) 100%);
}
.fr-band__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a9d3af; }
/* Перенос строки задаёт разметка (<br>), ограничение по ширине убрано — заголовок ровно в две строки */
.fr-band__title { margin: 0 0 26px; font-family: 'Lora', Georgia, serif; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.22; }

.fr-band__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 0; max-width: 760px; }
.fr-band__item { display: flex; align-items: flex-start; gap: 12px; padding: 0 22px; }
.fr-band__item:first-child { padding-left: 0; }
/* Вертикальные разделители между пунктами, как в макете */
.fr-band__item + .fr-band__item { border-left: 1px solid rgba(255, 255, 255, .18); }
.fr-band__ico { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); }
.fr-band__ico :is(i, svg) { width: 19px; height: 19px; }
.fr-band__item-title { display: block; font-size: 14px; font-weight: 700; }
.fr-band__item-text { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: #cfe0d1; }

/* ===================== 4. 4 ТАРИФА ===================== */

.fr-tarify { text-align: center; }
.fr-tarify .fr-head { display: flex; flex-direction: column; align-items: center; }
.fr-tarify .fr-sub { max-width: 560px; }
.fr-tarify .fr-eyebrow { display: flex; gap: 6px; }

.fr-tariff-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: left; }

.fr-tariff {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--fr-radius);
  background: #fff;
}
.fr-tariff--featured { border-color: var(--green-500); background: var(--green-50); position: relative; }

.fr-tariff__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
/* Ширину не ограничиваем: строки подписи разбиты вручную через \n в тексте тарифа,
   а max-width добавлял бы поверх этого свои переносы */
.fr-tariff__for { font-size: 12px; line-height: 1.3; color: var(--ink-3); text-align: right; }

.fr-tariff__badge {
  position: absolute;
  top: -13px;
  right: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--green-700);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.fr-tariff__title { margin: 18px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.fr-tariff__price { display: flex; align-items: baseline; gap: 6px; font-family: 'Lora', Georgia, serif; font-size: 33px; font-weight: 600; color: var(--green-700); }
.fr-tariff__period { font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-3); }

.fr-tariff__list { display: grid; gap: 10px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; flex: 1 1 auto; }
.fr-tariff--featured .fr-tariff__list { border-top-color: rgba(31, 107, 54, .18); }
.fr-tariff__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.fr-tariff__list :is(i, svg) { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--green-600); }

.fr-tariff .fr-btn { margin-top: 18px; width: 100%; }

/* ===================== 5. САЙТ В АРЕНДУ =====================
   Фотография с ноутбуком и телефоном — фон всего блока во всю ширину окна, текст слева
   на осветлённом крае, карточка «Что входит» — справа поверх кадра. */

.fr-sajt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 50px;
  padding: 56px 0;
}

/* Кадр показывается целиком — ничего не режем ни снизу, ни справа (там столешница, основание
   ноутбука и телефон). Поэтому object-fit: contain, а не cover.
   Левый край кадра совпадает с левым краем текста: секция растянута во всю ширину окна,
   поэтому отступ до колонки контента считаем сами — половина «лишней» ширины плюс поле .fr-wrap. */
.fr-sajt {
  --fr-sajt-left: calc((100vw - min(100vw, 1440px)) / 2 + 56px);
  min-height: calc((100vw - var(--fr-sajt-left)) * 952 / 1938);
}

.fr-sajt__media { position: absolute; top: 0; right: 0; bottom: 0; left: var(--fr-sajt-left); z-index: -2; }
.fr-sajt__media img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

/* Осветление идёт только по кадру — левее него фотографии нет, осветлять нечего */
.fr-sajt::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--fr-sajt-left);
  z-index: -1;
  background: linear-gradient(100deg,
    var(--page) 0%, var(--page) 22%,
    rgba(250, 249, 247, .96) 34%, rgba(250, 249, 247, .78) 46%,
    rgba(250, 249, 247, .4) 58%, rgba(250, 249, 247, 0) 72%);
}

.fr-sajt__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: center; }
.fr-sajt__copy { max-width: 560px; }

.fr-sajt__perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; }
.fr-sajt__perk { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fr-sajt__perk > span { font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ink); }

.fr-sajt__btn { margin-top: 30px; }

/* Карточка «Что входит»: пункты разделены тонкими линиями, как в макете */
.fr-sajt__card {
  padding: 26px 24px;
  border-radius: var(--fr-radius);
  background: #fff;
  box-shadow: var(--fr-shadow);
}
.fr-sajt__card-title { margin: 0 0 18px; font-family: 'Lora', Georgia, serif; font-size: 24px; font-weight: 600; text-align: center; color: var(--ink); }
.fr-sajt__card-list { display: grid; margin: 0; padding: 0; list-style: none; }
.fr-sajt__card-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; }
.fr-sajt__card-list li + li { border-top: 1px solid var(--line); }
.fr-sajt__card-list strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fr-sajt__card-list span.fr-sajt__card-text { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

/* ===================== 6. КАК ВЫБРАТЬ ГОРОД =====================
   По макету от 2026-09-21: фон-фото во всю ширину окна, кадр начинается от левого края
   текста и слева растворяется в фоне страницы — тот же приём, что в шапке и «Сайте в аренду». */

.fr-gorod {
  --fr-gorod-left: calc((100vw - min(100vw, 1440px)) / 2 + 56px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 56px 0;
}

.fr-gorod__media { position: absolute; top: 0; right: 0; bottom: 0; left: var(--fr-gorod-left); z-index: -2; background: var(--line-2); }
.fr-gorod__media img { width: 100%; height: 100%; object-fit: cover; }

.fr-gorod::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--fr-gorod-left);
  z-index: -1;
  background: linear-gradient(100deg,
    var(--page) 0%, var(--page) 22%,
    rgba(250, 249, 247, .96) 34%, rgba(250, 249, 247, .82) 48%,
    rgba(250, 249, 247, .55) 62%, rgba(250, 249, 247, .25) 78%);
}

/* ——— шапка блока: заголовок слева, курсивная цитата справа ——— */
.fr-gorod__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 40px; align-items: start; }
.fr-gorod__head-copy { max-width: 560px; }

.fr-gorod__quote { margin: 8px 0 0; }
.fr-gorod__quote blockquote {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.4;
  color: var(--ink);
}
.fr-gorod__quote figcaption {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 24, 26, .18);
  font-size: 13px;
  color: var(--ink-3);
}

/* ——— четыре шага ——— */
.fr-gorod__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; width: 69%;}
.fr-gorod__step { padding: 20px; border-radius: var(--fr-radius); background: #fff; box-shadow: var(--fr-shadow); }
.fr-gorod__step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fr-gorod__step-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.fr-gorod__step h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.fr-gorod__step p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* ——— большая панель подбора ——— */
.fr-gorod__panel { margin-top: 20px; padding: 26px; border-radius: var(--fr-radius); background: #fff; box-shadow: var(--fr-shadow); }

.fr-gorod__panel-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 300px); gap: 28px 28px; align-items: start; }

.fr-gorod__pick-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.fr-gorod__pick-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.fr-gorod__pick-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }

.fr-gorod__search-wrap { position: relative; }
.fr-gorod__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--fr-radius-sm);
  background: #fff;
  font-size: 13.5px;
  color: var(--muted);
}
.fr-gorod__search:focus-within { border-color: var(--green-700); }
.fr-gorod__search :is(i, svg) { flex: 0 0 auto; width: 17px; height: 17px; }
.fr-gorod__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
}
.fr-gorod__search-input:focus { outline: none; }
.fr-gorod__search-input::-webkit-search-cancel-button { display: none; }
.fr-gorod__search-clear { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; }
.fr-gorod__search-clear:hover { color: var(--ink); }

/* Подсказки поиска — над остальным содержимым панели, поэтому z-index. */
.fr-gorod__suggest {
  position: absolute;
  z-index: 3;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 268px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--fr-radius-sm);
  background: #fff;
  box-shadow: var(--fr-shadow);
}
.fr-gorod__suggest-btn { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; text-align: left; cursor: pointer; }
.fr-gorod__suggest-btn:hover { background: var(--green-50); }
.fr-gorod__suggest-name { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.fr-gorod__suggest-region { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-3); }
.fr-gorod__search-empty { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }

.fr-gorod__cities-label,
.fr-gorod__near-title { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); }
.fr-gorod__cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fr-gorod__city { padding: 9px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.fr-gorod__city:hover { border-color: var(--green-700); color: var(--green-700); }
.fr-gorod__city--active,
.fr-gorod__city--active:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; }

.fr-gorod__hint { display: grid; gap: 10px; justify-items: end; position: relative; }
.fr-gorod__hint-top { display: flex; align-items: flex-start; gap: 12px; }
.fr-gorod__hint-arrow { flex: 0 0 auto; width: 62px; height: auto; margin-top: 6px; position: absolute; left: -66px; top: -16px; }
.fr-gorod__hint p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.fr-gorod__hint-map { position: relative; width: 100%; margin-top: 2px; }
.fr-gorod__hint-map img { display: block; width: 100%; height: auto; position: absolute; top: -60px;}
/* Пин стоит над европейской частью — там, где на карте сходятся города списка.
   Селектор с двумя классами: иначе правило .fr-gorod__hint-map img растянет пин на всю карту. */
.fr-gorod__hint-map .fr-gorod__hint-pin { position: absolute; top: 53px; left: 34%; width: 22px; height: auto; transform: translate(-50%, -50%); }

/* ——— пример разбора ——— */
.fr-gorod__sample { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 28px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
/* С кадром города слева — три колонки. Класс ставится только когда файл кадра есть. */
.fr-gorod__sample--photo { grid-template-columns: minmax(0, 330px) minmax(0, 1fr) minmax(0, 300px); }
.fr-gorod__photo-col { display: flex; flex-direction: column; }
.fr-gorod__photo { position: relative; margin: 0; overflow: hidden; border-radius: 16px; }
.fr-gorod__photo :is(img, picture) { display: block; width: 100%; }
.fr-gorod__photo img { height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* Подпись поверх кадра: слева город с пином, справа ссылка на карту. Снизу — затемнение,
   иначе белый текст теряется на светлом небе. */
.fr-gorod__photo-bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 44px 16px 14px;
  background: linear-gradient(to top, rgba(17, 24, 20, .72), rgba(17, 24, 20, 0));
  color: #fff;
}
.fr-gorod__photo-city { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; }
.fr-gorod__photo-city :is(i, svg) { width: 16px; height: 16px; }
.fr-gorod__photo-map { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #fff; text-decoration: underline; }
.fr-gorod__photo-map :is(i, svg) { width: 14px; height: 14px; }
/* Пометка, что кадр обобщённый: намеренно мелкая и серая, спорить с разбором она не должна. */
.fr-gorod__photo-note { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); }

.fr-gorod__badge { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--green-50); font-size: 11.5px; font-weight: 700; color: var(--green-700); }
.fr-gorod__sample-city { margin: 12px 0 2px; font-family: 'Lora', Georgia, serif; font-size: 28px; font-weight: 600; color: var(--ink); }
.fr-gorod__sample-region { margin: 0 0 18px; font-size: 13px; color: var(--ink-3); }

/* Цена города — одной строкой под названием, без плашки: разбор и так плотный.
   Годовая цифра главная, помесячная рядом мельче, выгода живёт у кнопки в правой колонке. */
.fr-gorod__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 18px;
}
.fr-gorod__price-label { font-size: 12px; color: var(--ink-3); }
.fr-gorod__price strong { font-size: 19px; font-weight: 700; color: var(--ink); }
.fr-gorod__price-period { font-size: 13px; color: var(--ink-2); }
.fr-gorod__price-month { font-size: 12.5px; color: var(--muted); }
.fr-gorod__price-note { margin: 10px 0 0; font-size: 12px; line-height: 1.4; text-align: center; color: var(--green-700); }

.fr-gorod__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.fr-gorod__stats li { min-width: 0; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--fr-radius-sm); overflow: hidden; }
/* Значения бывают длинными («Максимальный»), поэтому строка переносится, а не вылезает из карточки. */
.fr-gorod__stat-head { display: flex; align-items: flex-start; gap: 8px; }
.fr-gorod__stat-head :is(i, svg) { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--green-700); }
.fr-gorod__stat-head strong { min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--ink); overflow-wrap: break-word; }
.fr-gorod__stat-label { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--ink-3); }

.fr-gorod__recommend { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; padding: 16px 18px; border-radius: var(--fr-radius-sm); background: var(--green-50); }
.fr-gorod__recommend strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.fr-gorod__recommend p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }

.fr-gorod__sample-note { display: flex; align-items: start; gap: 8px; margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.fr-gorod__sample-note :is(i, svg) { width: 14px; height: 19px; flex: 0 0 auto; }

.fr-gorod__near-card { padding: 16px 18px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--fr-radius-sm); background: #fff; }
.fr-gorod__near-list { display: grid; margin: 0; padding: 0; list-style: none; }
.fr-gorod__near-list li + li { border-top: 1px solid var(--line); }
/* Строка соседа — кнопка: по ней открывается разбор уже этого города, за тем и шеврон. */
.fr-gorod__near-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.fr-gorod__near-btn > span:first-child { flex: 1 1 auto; }
.fr-gorod__near-btn:hover { color: var(--green-700); }
.fr-gorod__near-btn :is(i, svg) { flex: 0 0 auto; width: 15px; height: 15px; color: var(--muted); }
.fr-gorod__near-btn:hover :is(i, svg) { color: var(--green-700); }
.fr-gorod__near-km { font-weight: 600; color: var(--ink-3); }
.fr-gorod__near-title { margin-bottom: 8px; }
.fr-gorod__near-note { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: var(--muted); }

/* Пока грузится разбор другого города — гасим только содержимое, высоту не трогаем. */
.fr-gorod__sample { transition: opacity .15s; position:relative; background-color: white;}
.fr-gorod__sample.is-loading { opacity: .55; }

/* ===================== ПОЛНОШИРИННЫЕ БЛОКИ С ФОНО-ФОТО (7, 8, 9, 16) ===================== */

.fr-split {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: 48px 0 56px;
}
.fr-split__media { position: absolute; inset: 0; z-index: -2; background: var(--page); }
.fr-split__media img { width: 100%; height: 100%; object-fit: cover; }
.fr-split::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    var(--page) 0%, rgba(250, 249, 247, .97) 34%, rgba(250, 249, 247, .74) 52%, rgba(250, 249, 247, .12) 74%);
}
/* Модификатор для блоков, где текст справа, а не слева (8, 16) — градиент светлеет с другой стороны */
.fr-split--right::before {
  background: linear-gradient(260deg,
    var(--page) 0%, rgba(250, 249, 247, .97) 34%, rgba(250, 249, 247, .74) 52%, rgba(250, 249, 247, .12) 74%);
}

.fr-split__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 28px 30px; align-items: start; }
.fr-split--right .fr-split__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.fr-split--right .fr-split__copy { grid-column: 2; }
.fr-split--right .fr-split__side { grid-column: 1; grid-row: 1; }

.fr-split__copy { max-width: 620px; padding: 6px 0; }
.fr-split__lead { margin-top: 14px; max-width: 480px; }
.fr-split .fr-h2 { max-width: 15ch; }

.fr-split__side { display: grid; gap: 14px; align-self: start; }
.fr-split__side .fr-fact { padding: 16px 18px; }
.fr-split__side .fr-fact__title { font-size: 14px; }
.fr-split__side .fr-fact__text { font-size: 12.5px; }

/* Блок 7: по макету справа не пять карточек, а одна — пункты внутри разделены линиями. */
.fr-split__side--card {
  gap: 0;
  padding: 8px 26px;
  border-radius: var(--fr-radius);
  background: #fff;
  box-shadow: var(--fr-shadow);
}
/* Текст справа от иконки, а не под ней (по умолчанию .fr-fact — колонка). */
.fr-split__side--card .fr-fact { flex-direction: row; align-items: flex-start; gap: 14px; padding: 20px 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.fr-split__side--card .fr-fact > div { min-width: 0; }
.fr-split__side--card .fr-fact + .fr-fact { border-top: 1px solid var(--line); }
.fr-split__side--card .fr-fact__title { font-size: 15px; }

/* ——— Блок 7 по макету 2026-09-21 ———
   Сетка на две строки: слева текст и под ним белая полоса на 3 пункта, справа одна карточка,
   которая тянется вдоль обеих строк. Полоса намеренно НЕ во всю ширину — она обрывается там,
   где начинается карточка, как на макете. */
.fr-split--ritual .fr-split__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  grid-template-rows: auto auto;
  gap: 26px 30px;
  align-items: start;
}
.fr-split--ritual .fr-split__copy { grid-column: 1; grid-row: 1; }
.fr-split--ritual .fr-split__side { grid-column: 2; grid-row: 1 / span 2; }
.fr-split--ritual .fr-split__bar { grid-column: 1; grid-row: 2; }
.fr-split--ritual .fr-lead { max-width: 480px; }
.fr-split--ritual .fr-split__lead { max-width: 470px; }

.fr-wrap .fr-bar {background-color: var(--green-50);}

/* Кнопка блока 7 крупная, как на макете: иконка слева, текст, стрелка у правого края. */
.fr-split__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 420px;
  margin-top: 26px;
  padding: 19px 26px;
  font-size: 16px;
}
.fr-split__btn :is(i, svg) { width: 20px; height: 20px; }
.fr-split__btn :is(i, svg):last-child { margin-left: auto; }

.fr-split .fr-bar { position: relative; }

.fr-split__note {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 18px 22px;
  border-radius: var(--fr-radius);
  background: var(--green-50);
  box-shadow: var(--fr-shadow);
}
/* Блок 16 «Обучение»: кадр сдвинут вправо по композиции (видно правую часть снимка) и обрезается
   по высоте — так решил владелец. Секция не растягивается под пропорцию кадра, а заканчивается
   почти сразу за нижней плашкой: под ней остаётся 40 px. */
/* Между зелёной плашкой «Этапов запуска» и началом кадра — 50 px. */
.fr-split--obuchenie { margin-top: 50px; padding-bottom: 40px; }
.fr-split--obuchenie .fr-split__media img { object-position: 80% center; }
/* Плашка под карточками — на 60 % ширины колонки: подпись «Ваш рост» из неё убрана,
   и во всю ширину она смотрелась пустой. */
.fr-split--obuchenie .fr-split__note { max-width: 60%; }

/* Блок 8 «Для действующих мастерских»: заметка на три четверти ширины и на зелёном фоне.
   Другие блоки с .fr-split__note (новички, обучение) остаются белыми — поэтому модификатор. */
/* Три четверти ширины экрана, но не шире самой колонки контента. */
.fr-split--masterskie .fr-split__note { max-width: min(60vw, 100%); background: var(--green-50); box-shadow: none; }

.fr-split--masterskie .fr-split__note > div:nth-of-type(2) {width: 25%; min-width: 248px;}
/* Текст и кнопка — в одну строку, пока хватает ширины. Сам по себе nowrap не помогает:
   .fr-split__note-copy ограничен max-width: 640px, и при плашке в 60vw пара 640 + 248 не влезает,
   поэтому здесь ограничение снимается, а текстовая колонка получает право сжиматься. */
.fr-split--masterskie .fr-split__note { flex-wrap: nowrap; }
.fr-split--masterskie .fr-split__note-copy { flex: 1 1 auto; min-width: 0; max-width: none; }

.fr-split__note-copy { display: flex; align-items: flex-start; gap: 14px; max-width: 640px; }
.fr-split__note-copy strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.fr-split__note-copy p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }

/* Карточка канала в блоке 11: кадр сверху, иконка наезжает на его нижний край.
   Свои классы, а не .fr-audience из блока 2 — карточки живут отдельно друг от друга. */
.fr-photo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--fr-radius);
  background: #fff;
  box-shadow: var(--fr-shadow);
}
.fr-photo-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--line-2); }
.fr-photo-card__media :is(img, picture) { display: block; width: 100%; height: 100%; }
.fr-photo-card__media img { object-fit: cover; }
.fr-photo-card__body { display: flex; flex-direction: column; gap: 10px; padding: 0 22px 22px; }
/* Белая обводка вокруг иконки отделяет её от кадра. */
.fr-photo-card__ico { position: relative; z-index: 1; margin: -28px 0 2px; box-shadow: 0 0 0 5px #fff; }
.fr-photo-card__title { margin: 2px 0 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.fr-photo-card__text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

/* Карточки поверх фона в блоках 8/9 — сетка 3 колонки в правой (широкой) части */
.fr-split__cards { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
.fr-split__cards .fr-fact { padding: 18px; }
.fr-split__cards .fr-fact__title { font-size: 14px; }
.fr-split__cards .fr-fact__text { font-size: 12.5px; }

/* ===================== 10. ВАМ НЕ НУЖЕН ЗАВОД ===================== */

/* Шапка была в две колонки — справа стоял абзац-пояснение. Его убрали, осталась одна колонка. */
.fr-zavod__lead { margin-top: 12px; max-width: 760px; }

.fr-chain { display: flex; align-items: stretch; gap: 0; margin: 30px 0 0; padding: 22px; border-radius: var(--fr-radius); background: #fff; box-shadow: var(--fr-shadow); overflow-x: auto; }
.fr-chain__node { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1 1 0; min-width: 120px; text-align: center; padding: 0 6px; }
.fr-chain__arrow { display: flex; align-items: center; flex: 0 0 auto; color: var(--line); padding-top: 26px; }
.fr-chain__arrow :is(i, svg) { width: 20px; height: 20px; }
.fr-chain__node strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.fr-chain__node span { font-size: 12px; line-height: 1.35; color: var(--ink-3); }

.fr-zavod__cards { margin-top: 16px; }
.fr-zavod__foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.fr-zavod__foot-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }

/* ===================== 12/13. СЕТКИ ИКОНОК (ПАКЕТ, ПРОДУКТЫ) ===================== */

.fr-icon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.fr-icon-card { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--fr-radius-sm); background: #fff; box-shadow: var(--fr-shadow); }
.fr-icon-card__title { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.fr-icon-card__text { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--ink-3); }

.fr-icon-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.fr-poluchaet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding: 22px;
  border-radius: var(--fr-radius);
  background: var(--green-50);
}
.fr-poluchaet__foot-copy { display: flex; align-items: flex-start; gap: 14px; max-width: 480px; }
.fr-poluchaet__foot-copy strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.fr-poluchaet__foot-copy p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.fr-poluchaet__checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fr-poluchaet__checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fr-poluchaet__checks :is(i, svg) { width: 16px; height: 16px; color: var(--green-600); }

/* ===================== 14. КАК ВЫГЛЯДИТ МАГАЗИН ===================== */

.fr-vyglyadit { text-align: center; }
.fr-vyglyadit .fr-head { display: flex; flex-direction: column; align-items: center; }

.fr-vyglyadit__media { position: relative; margin-top: 26px; border-radius: var(--fr-radius); overflow: hidden; aspect-ratio: 16/7; }
.fr-vyglyadit__media img { width: 100%; height: 100%; object-fit: cover; }
.fr-vyglyadit__badge { position: absolute; right: 18px; bottom: 18px; }

.fr-vyglyadit__grid { text-align: left; margin-top: 16px; }

/* ===================== 15. ЭТАПЫ ЗАПУСКА ===================== */

.fr-timeline { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 34px; list-style: none; padding: 0; }
.fr-timeline::before { content: ""; position: absolute; top: 40px; left: 8%; right: 8%; height: 1px; background: var(--line); z-index: 0; }
.fr-timeline__item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 0 6px; }
.fr-timeline__node { position: relative; display: grid; place-items: center; width: 81px; height: 81px; border-radius: 50%; background: var(--green-50); color: var(--green-700); }
/* Иконка растёт вместе с кругом: у lucide по умолчанию 24px. */
.fr-timeline__node :is(i, svg) { width: 36px; height: 36px; }
.fr-timeline__num { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--ink-3); }
.fr-timeline__item h3 { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.fr-timeline__item p { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }

/* ===================== 17. ПОДДЕРЖКА ПОСЛЕ ЗАПУСКА ===================== */

/* Шапка блока — отдельной строкой сетки над обеими колонками: так карточка-цитата
   начинается на одной высоте с карточками, а не с заголовком. */
.fr-podderzhka__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 26px 28px; align-items: start; }
.fr-podderzhka__head { grid-column: 1; }
.fr-podderzhka__main { grid-column: 1; grid-row: 2; min-width: 0; }

.fr-podderzhka__side { grid-column: 2; grid-row: 2; display: grid; gap: 14px; }

/* Карточка-цитата по макету: фоном — снимок основателя за столом, текст лежит слева,
   на размытом окне. aspect-ratio 1/1 равна пропорции снимка, поэтому кадр виден целиком:
   ни обрезки по краям, ни тёмной маски по лицу (это личное фото владельца). */
.fr-podderzhka__quote {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--fr-radius);
  background: var(--line-2);
  color: var(--ink);
}
.fr-podderzhka__quote-bg { position: absolute; inset: 0; z-index: -1; display: block; }
.fr-podderzhka__quote-bg :is(img, picture) { display: block; width: 100%; height: 100%; }
/* object-position справа — страховка: если текст перерастёт квадрат, подрежется размытое
   окно слева, а основатель останется в кадре полностью. */
.fr-podderzhka__quote-bg img { object-fit: cover; object-position: 100% 50%; }
/* Светлая вуаль — только под колонкой текста; к середине кадра сходит на нет. */
.fr-podderzhka__quote-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(97deg,
    rgba(250, 249, 247, .97) 0%,
    rgba(250, 249, 247, .95) 30%,
    rgba(250, 249, 247, .78) 42%,
    rgba(250, 249, 247, .3) 53%,
    rgba(250, 249, 247, 0) 64%);
}

.fr-podderzhka__quote-body {
  display: flex;
  flex-direction: column;
  width: 47%;
  min-width: 0;
  margin: 0;
  padding: 26px 0 26px 26px;
}
/* Кавычка прижата к заголовку: line-height меньше единицы срезает пустую строку под ней. */
.fr-podderzhka__quote-mark { font-family: 'Lora', Georgia, serif; font-size: 38px; line-height: .58; color: var(--green-600); }
.fr-podderzhka__quote-title { margin: 4px 0 12px; font-family: 'Lora', Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.24; color: var(--ink); }
.fr-podderzhka__quote-text { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-3); }

.fr-podderzhka__quote-sign { margin-top: auto; padding-top: 22px; }
.fr-podderzhka__quote-sign strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.fr-podderzhka__quote-sign > span:last-child { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* Кнопка и плашка — под снимком, как в макете, а не поверх него. */
.fr-podderzhka__actions { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 12px; }
.fr-podderzhka__cta { justify-content: space-between; min-height: 56px; padding: 0 20px; text-align: left; }

.fr-podderzhka__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--fr-radius-sm);
  background: var(--green-50);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}
.fr-podderzhka__chip-ico { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: #fff; color: var(--green-700); }
.fr-podderzhka__chip-ico :is(i, svg) { width: 17px; height: 17px; }
.fr-podderzhka__chip-text { display: grid; min-width: 0; }

/* ===================== 18. ИСТОРИЯ ЕВГЕНИЯ ===================== */

/* Кадр занимает три четверти ширины: начинается на 25 % от левого края и прижат к правому.
   Показан целиком — ширина 75 % и aspect-ratio 4/3 повторяют пропорцию снимка, поэтому
   object-fit: cover ничего не режет. Фото владельца не обрезаем, поэтому под кадр подстраивается
   высота секции (min-height = 75vw × 9/16), а не наоборот; текст из-за этого центрируем по вертикали.
   Кадр широкий (16:9), поэтому блок не вырастает в полотно — высота примерно как у соседних секций.
   Отступ сверху — margin, а не padding: padding ушёл бы внутрь снимка. */
.fr-split--istoriya {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42.2vw;
  margin-top: 50px;
  padding: 52px 0 56px;
}
.fr-split--istoriya .fr-split__media {
  left: auto;
  right: 0;
  top: 0;
  bottom: auto;
  width: 75%;
  height: auto;
  aspect-ratio: 16 / 9;
}
/* Растворение слева. У левого края кадра (25 %) вуаль ещё сплошная — снимок растворён полностью;
   под колонкой текста (кончается около 40 %) держим ещё 0.9, поэтому тёмный текст читается;
   дальше прозрачность плавно уходит в ноль к 86 %. */
.fr-split--istoriya::before {
  background: linear-gradient(94deg,
    var(--page) 0%,
    var(--page) 26%,
    rgba(250, 249, 247, .93) 38%,
    rgba(250, 249, 247, .74) 48%,
    rgba(250, 249, 247, .44) 60%,
    rgba(250, 249, 247, .16) 73%,
    rgba(250, 249, 247, 0) 86%);
}

.fr-istoriya__copy { position: relative; max-width: 560px; }

.fr-istoriya__text { display: grid; gap: 14px; margin: 16px 0 22px; }
.fr-istoriya__text p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }

.fr-istoriya__quote { margin: 0 0 22px; padding: 2px 0 2px 16px; border-left: 2px solid var(--green-700); }
.fr-istoriya__quote p { margin: 0; font-family: 'Lora', Georgia, serif; font-style: italic; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

.fr-istoriya__sign { display: grid; gap: 2px; }
.fr-istoriya__sign strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.fr-istoriya__sign span { font-size: 12.5px; color: var(--ink-3); }

/* Факты — отдельной строкой под секцией с кадром: внутри неё они тянули бы высоту вверх,
   а вместе с высотой росла бы и ширина кадра, съедая колонку текста. */
/* Разделительной черты сверху больше нет: факты и так отделены от текста нижним краем кадра,
   а линия впритык к фотографии читалась как случайная. */
.fr-istoriya-facts { padding-top: 34px; }
.fr-istoriya__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.fr-istoriya__fact strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.fr-istoriya__fact p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }

/* ===================== 19. FAQ ===================== */

.fr-faq__list { margin-top: 26px; column-count: 2; column-gap: 20px; }
.fr-faq-item { break-inside: avoid; margin-bottom: 12px; border-radius: var(--fr-radius-sm); background: #fff; box-shadow: var(--fr-shadow); overflow: hidden; }
.fr-faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 16px 18px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: left; }
.fr-faq-item__sign { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); transition: transform .15s, background-color .15s, color .15s; }
.fr-faq-item__sign :is(i, svg) { width: 14px; height: 14px; }
.fr-faq-item.is-open .fr-faq-item__sign { background: var(--green-700); border-color: var(--green-700); color: #fff; transform: rotate(45deg); }
.fr-faq-item__a { padding: 0 18px 16px; }
.fr-faq-item__a p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }
/* Ответы теперь из нескольких абзацев — им нужен воздух между собой. */
.fr-faq-item__a p + p { margin-top: 10px; }

/* ===================== 20. ФИНАЛЬНАЯ ЗАЯВКА ===================== */

/* ===================== 20. ОСТАЛИСЬ ВОПРОСЫ (ЗАЯВКА) ===================== */

/* По макету от 2026-09-21 блок стал полноширинным с кадром-фоном: слева на светлой зоне
   заголовок и карточка формы, справа сверху девиз, внизу белая полоса на 4 пункта.
   Прежней правой колонки с портретом 4:5 и цитатой поверх него больше нет. */
.fr-zayavka {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-top: 50px;
  padding: 52px 0 56px;
}

.fr-zayavka__media { position: absolute; inset: 0; z-index: -2; background: var(--page); }
.fr-zayavka__media :is(img, picture) { display: block; width: 100%; height: 100%; }
/* Кадр прижат к правому верхнему углу: основатель стоит справа, и при обрезке по высоте
   у него не срезается голова. */
.fr-zayavka__media img { object-fit: cover; object-position: 100% 0; }
/* Растворение слева: под колонкой с формой (до ~52 %) вуаль почти сплошная, дальше кадр
   открывается и к 88 % виден полностью. */
.fr-zayavka::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(94deg,
    var(--page) 0%,
    var(--page) 10%,
    rgba(250, 249, 247, .95) 18%,
    rgba(250, 249, 247, .82) 26%,
    rgba(250, 249, 247, .5) 34%,
    rgba(250, 249, 247, .18) 42%,
    rgba(250, 249, 247, 0) 55%);
}

.fr-zayavka__head { max-width: 660px; }
.fr-zayavka .fr-h2 { font-size: clamp(32px, 3.4vw, 50px); }
.fr-zayavka__sub { margin: 10px 0 0; max-width: 560px; font-family: 'Lora', Georgia, serif; font-size: 18px; line-height: 1.4; color: var(--ink-2); }

.fr-zayavka__form-card { max-width: 780px; margin-top: 26px; padding: 26px; border-radius: var(--fr-radius); background: #fff; box-shadow: var(--fr-shadow); }
.fr-zayavka__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.fr-zayavka__submit { width: 100%; margin-top: 16px; }
.fr-zayavka__note { display: flex; align-items: center; gap: 8px; justify-content: center; margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.fr-zayavka__error { margin: 10px 0 0; font-size: 13px; color: #b3392c; }

.fr-zayavka__done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 10px; text-align: center; }
.fr-zayavka__done-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--green-50); color: var(--green-700); }
.fr-zayavka__done strong { font-size: 17px; font-weight: 700; color: var(--ink); }
.fr-zayavka__done p { margin: 0; max-width: 320px; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

.fr-wrap .fr-zayavka__bar .fr-bar { background-color: #fff; }
.fr-zayavka__bar .fr-ico { border-radius: 50%; background: var(--green-50); }

.fr-field { display: flex; flex-direction: column; gap: 6px; }
.fr-field__label { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.fr-field__box { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--fr-radius-sm); background: #fff; }
.fr-field__box:focus-within { border-color: var(--green-500); }
.fr-field__box :is(i, svg) { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }
.fr-field__box input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 13.5px; background: transparent; color: var(--ink); }
.fr-field__box input::placeholder { color: var(--muted); }

/* ===================== АДАПТИВ ===================== */

/* ===================== ТЕЛЕФОН (19.10.2026) =====================
   Ленты m-swipe стоят в разметке: «Кому подходит», тарифы, карточки мастерских/новичков/обучения, «Вам не нужен завод»,
   «Откуда клиенты», «Что входит в пакет», «Что получает магазин» (--half), зоны магазина, поддержка. */

/* Телефон, второй круг (2026-10-19): в одну колонку текст идёт на всю ширину, а боковой градиент светлил только левую
   половину — подзаголовки «Обучение», «Для действующих мастерских» и буквы с фото «Для ритуальных агентств» оказывались
   на пёстром фоне. Вуаль на всю ширину, плотная сверху (текст), чуть легче к низу (там карточки на своей подложке). */