/*
 * Дополнительные стили публичной главной: общая desktop-сцена, отдельная
 * mobile-композиция и смысловые блоки совместной работы. Базовый visual language
 * принадлежит index-new.css и общей дизайн-системе; brand mark наследует topbar.
 * Тот же файл подключается синхронизированным landing fallback в index.html.
 */

/* Общий shell скрывает app actions на signed-out root. Dedicated landing
   владеет собственным login slot и показывает его, не открывая app controls
   в index.html и не меняя слоты других публичных страниц. */
body.page-root-home.landing-home-preview-page .topbar-actions {
  display: flex !important;
}

/* В product-mosaic сохраняем фирменные синие icon tiles текущей главной, но
   ставим их в одну строку с названием. Карточки остаются узнаваемыми и при этом
   не превращаются в повторяющийся шаблон «иконка над заголовком» семь раз. */
.landing-home__advantage-card-title--with-icon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.95rem;
  align-items: center;
}

/* Пояснения на светлых landing-surfaces используют text-muted:
   на белой и soft surface этот token проходит WCAG AA для обычного текста. */
.landing-home__support-note,
.landing-home__advantages-lead,
.landing-home__pricing-lead,
.landing-home__faq-lead,
.landing-home__pricing-note {
  color: var(--text-muted);
}

/* В hero muted-текст лежит прямо на синем radial-gradient, а не на белой
   surface. Слегка смешиваем его с основным текстом, чтобы lead и бесплатный
   лимит сохраняли secondary-роль, но не опускались ниже AA на самом тёмном
   участке фона. Остальные muted-строки на белых карточках не меняем. */
.landing-home__hero-copy .landing-home__lead,
.landing-home__hero-copy .landing-home__support-note {
  color: color-mix(in oklch, var(--text-muted) 88%, var(--text-main));
}

/* На desktop четыре смысловых шага hero должны читаться раздельно: оффер,
   пояснение, действия и бесплатный лимит. Базовый gap текущей главной слишком
   плотный для нового трёхстрочного заголовка, поэтому расширяем только
   hero-колонку поверх базового index-new.css. */
@media (min-width: 992px) {
  .landing-home__hero-copy {
    gap: 1.5rem;
  }

  /* Три строки крупного оффера получают небольшой ink-clearance: при 1.02
     нижние глифы выходили за line box на 2px, хотя визуально не обрезались. */
  .landing-home__title {
    line-height: 1.04;
  }
}

/*
 * Hero теперь держит одну авторскую иллюстрацию совместной работы на бумаге.
 * Человек задаёт исходный набросок, геометрический AI-персонаж собирает результат
 * на том же листе. Светло-голубой фон и бумажная фактура продолжают страницу,
 * а смысл сцены доступен без чтения мелких деталей и выдуманного интерфейса.
 */
.landing-home__hero-illustration {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
}

.landing-home__hero-illustration-picture {
  display: block;
  width: min(100%, 780px);
}

.landing-home__hero-illustration-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* На desktop иллюстрация становится общей сценой первого экрана. Её левая
   часть специально свободна под copy; лист бумаги заходит под нижнюю часть
   композиции. Оба слоя остаются в одной grid-строке, поэтому высота картинки
   резервируется до загрузки и следующий раздел не попадает под изображение. */
@media (min-width: 992px) {
  /* Обе иллюстрации привязаны к одной внешней границе hero. Общие значения
     задают только desktop-сцену: tablet/mobile сохраняют свои окна и порядок. */
  .landing-home {
    --landing-scene-max-width: 1400px;
    --landing-scene-padding: clamp(0.75rem, 2vw, 1.5rem);
    --landing-scene-outset: clamp(0.75rem, 4.5vw, 4rem);
  }

  .landing-home__hero-card {
    width: min(100%, var(--landing-scene-max-width));
  }

  .landing-home__hero-body {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    isolation: isolate;
    padding-inline: var(--landing-scene-padding);
  }

  .landing-home__hero-copy {
    position: relative;
    z-index: 2;
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: start;
    max-width: 600px;
    margin-top: clamp(3rem, 7vh, 6rem);
  }

  .landing-home__hero-preview {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    /* Общий вынос зеркально повторяется у истории команды. Он помещается
       в page gutter, не уменьшая масштаб сцены и не меняя её высоту. */
    left: var(--landing-scene-outset);
    pointer-events: none;
  }

  /* У artwork уже есть собственный светло-голубой фон. Дополнительное синее
     свечение окрашивало бы бумагу и выдавало границы прямоугольного asset. */
  .landing-home__hero-preview::before {
    content: none;
  }

  .landing-home__hero-illustration-picture {
    width: 100%;
    /* Мягко соединяем края растра с фоном страницы. Маска меняет только края,
       оставляя персонажей и весь смысловой центр изображения непрозрачными. */
    mask-image:
      linear-gradient(to right, transparent, black 12%, black 98%, transparent),
      linear-gradient(to bottom, transparent, black 10%, black 85%, transparent);
    mask-composite: intersect;
  }
}

/* На небольшом ноутбуке узкая текстовая колонка освобождает место руке
   человека. Размеры canonical Button не меняются: действия идут друг под другом. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .landing-home__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-home__lead {
    max-width: 32ch;
  }

  .landing-home__support-note {
    max-width: 26ch;
  }
}

/* На планшете показываем правые две трети desktop-сцены: большое свободное
   поле под текст больше не нужно. Телефон ниже получает отдельный source. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .landing-home__hero-illustration-picture {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 8%, black 90%, transparent);
  }

  .landing-home__hero-illustration-image {
    width: 150%;
    max-width: none;
    margin-left: -50%;
  }

  .landing-home__hero-preview::before {
    content: none;
  }
}

/*
 * Первая surface после hero формулирует продукт через две равноправные роли.
 * Обе половины используют одну и ту же двухразмерную шкалу: title 2xl и body
 * base. Различие создают только содержимое и мягкая заливка agent-половины,
 * поэтому блок не возвращает прежнюю «чехарду» из локальных кеглей.
 */
.landing-home__audiences {
  display: grid;
  gap: 1.8rem;
  width: min(100%, 1024px);
  margin: clamp(4.5rem, 7vw, 6.5rem) auto 0;
}

.landing-home__audience-surface {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
  border-color: var(--line-soft);
  border-radius: 28px;
}

.landing-home__audience {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon text";
  column-gap: 1rem;
  row-gap: 0.55rem;
  align-content: start;
  min-width: 0;
  padding: 1.7rem 1.6rem 1.75rem;
}

.landing-home__audience--agents {
  border-inline-start: 1px solid var(--line-soft);
  background: var(--surface-soft);
}

.landing-home__audience-icon {
  grid-area: icon;
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  font-size: 1.2rem;
  box-shadow: 0 14px 28px color-mix(in oklch, var(--accent) 18%, transparent);
}

.landing-home__audience-title {
  grid-area: title;
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.3;
}

.landing-home__audience-text {
  grid-area: text;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Заголовок и пояснение цены используют существующие текстовые роли. */
.landing-home__price-heading {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.3;
}

.landing-home__price-copy {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Общая сцена повторяет hero в зеркальной композиции: команда слева,
   рассказ справа, стол продолжается под свободной частью текстовой колонки.
   Оба слоя участвуют в grid-потоке: ни lazy-загрузка, ни увеличенный текст
   не позволяют следующему разделу подняться под иллюстрацию. */
.landing-home__origin-section {
  width: 100%;
  margin: clamp(4.5rem, 7vw, 6.5rem) 0 0;
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

.landing-home__origin-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  isolation: isolate;
  text-align: left;
  color: color-mix(in oklch, var(--text-muted) 88%, var(--text-main));
  font-size: var(--font-size-base);
  line-height: 1.7;
}

.landing-home__origin-copy {
  position: relative;
  z-index: 1;
  grid-column: 8 / -1;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
}

.landing-home__origin-layout h2 {
  margin-bottom: 1.5rem;
  text-align: left;
  font-size: var(--font-size-display-hero);
  line-height: 1.08;
}

.landing-home__origin-layout p {
  margin: 0 0 1.5rem;
}

.landing-home__origin-layout a {
  color: var(--accent-dark);
  text-underline-offset: 0.2em;
}

.landing-home__origin-illustration {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  width: 92%;
  margin: 0;
  pointer-events: none;
}

/* У растра бумажный фон. Краевые маски соединяют его с фоном страницы,
   сохраняя персонажей непрозрачными; правая часть мягко уходит под рассказ.
   Это декоративная маска изображения, а не заливка или карточка под текстом. */
.landing-home__origin-illustration picture {
  display: block;
  width: 100%;
  mask-image:
    linear-gradient(to right, transparent, black 7%, black 72%, transparent),
    linear-gradient(to bottom, transparent, black 12%, black 82%, transparent);
  mask-composite: intersect;
}

.landing-home__origin-illustration img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 992px) {
  .landing-home__origin-section {
    padding-inline: var(--landing-scene-padding);
  }

  .landing-home__origin-illustration {
    /* Рассказ и масштаб растра остаются в прежней широкой сетке. Только левый
       край картинки равняется зеркальному правому краю hero: половина избытка
       ширины над 1400px минус общий вынос. Процент считается от origin-layout,
       поэтому возвращаем его два padding, чтобы сравнить равные outer boxes.
       На узком desktop избыток равен нулю; фиксированного отступа от окна нет. */
    margin-left: calc(
      max(0px, (100% + 2 * var(--landing-scene-padding) - var(--landing-scene-max-width)) / 2)
      - var(--landing-scene-outset)
    );
  }
}

/* На небольшом ноутбуке рассказу нужна половина сцены. Чуть меньшая и
   опущенная иллюстрация оставляет карточки на столе ниже абзацев, поэтому
   декоративные штрихи не оказываются за буквами при длинных переносах. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .landing-home__origin-copy {
    grid-column: 7 / -1;
  }

  .landing-home__origin-illustration {
    width: 82%;
    padding-top: 4rem;
  }
}

/* Планшет оставляет две колонки, но убирает свободное правое поле растра:
   так команда не становится слишком мелкой рядом с длинным рассказом. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .landing-home__origin-copy {
    grid-column: 7 / -1;
    padding-top: 0;
  }

  .landing-home__origin-illustration {
    grid-column: 1 / 7;
    align-self: center;
    width: calc(100% - 1.5rem);
    margin: 0;
  }

  .landing-home__origin-illustration picture {
    aspect-ratio: 1;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 8%, black 85%, transparent);
  }

  .landing-home__origin-illustration img {
    width: 150%;
    max-width: none;
  }
}

/* Один тариф: бесплатная база слева, две строки доплат справа, пример снизу.
   Native dl сохраняет связь цены и предмета оплаты на телефоне и без CSS. */
.landing-home__price-surface {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  overflow: hidden;
}

.landing-home__price-base,
.landing-home__price-extras,
.landing-home__price-example {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.75rem 2rem;
}

.landing-home__price-base {
  background: var(--surface-soft);
}

.landing-home__price-zero {
  margin: 0;
  color: var(--accent-dark);
  font-size: var(--font-size-display);
  font-weight: 700;
  line-height: 1.1;
}

.landing-home__price-extras {
  border-inline-start: 1px solid var(--line-soft);
}

.landing-home__price-rows {
  display: grid;
  gap: 1rem;
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.landing-home__price-rows > div + div {
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
}

.landing-home__price-rows dt {
  color: var(--text-muted);
  font-weight: 400;
}

.landing-home__price-rows dd {
  margin: 0.25rem 0 0;
  color: var(--text-main);
  font-weight: 700;
}

.landing-home__price-example {
  grid-column: 1 / -1;
  gap: 0.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--text-main);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.landing-home__price-example p {
  margin: 0;
}

/* Поля используют canonical Field. Здесь только адаптивная раскладка,
   типографика результата и native hidden для no-JS fallback. */
.landing-home__calculator-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 0.75rem;
}

.landing-home__calculator-fields .ui-field {
  flex: 1 1 12rem;
  min-width: 0;
}

.landing-home__calculator-result {
  color: var(--text-main);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.4;
}

[data-landing-calculator] [hidden] {
  display: none !important;
}

/* Следующий сценарий подробно раскрывает только agent-половину, поэтому обычный
   section-gap оставляет парному тезису собственный визуальный такт. */
.landing-home__audiences + .landing-home__collaboration {
  margin-top: clamp(4.5rem, 7vw, 6.5rem);
}

/*
 * Пошаговый блок после парной surface показывает один пользовательский сценарий.
 * Четыре шага остаются частями общей surface с hairline-разделителями, а не
 * превращаются в четыре самостоятельные feature-card с конкурирующими тенями.
 */
.landing-home__collaboration,
.landing-home__story-section {
  display: grid;
  gap: 1.8rem;
  width: min(100%, 1024px);
  margin: clamp(4.5rem, 7vw, 6.5rem) auto 0;
}

.landing-home__agent-steps {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: landing-agent-step;
  overflow: hidden;
  border-color: var(--line-soft);
  border-radius: 28px;
}

/* На широком экране общий hairline связывает четыре номера в один маршрут.
   Это именно последовательность работы, а не ряд взаимозаменяемых карточек. */
.landing-home__agent-steps::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(1.45rem + 18px);
  inset-inline-start: calc(1.3rem + 18px);
  inset-inline-end: calc(25% - 1.3rem - 18px);
  height: 1px;
  background: var(--line-strong);
  pointer-events: none;
}

.landing-home__agent-step {
  position: relative;
  counter-increment: landing-agent-step;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.75rem;
  align-content: start;
  min-width: 0;
  padding: 1.45rem 1.3rem 1.55rem;
}

.landing-home__agent-step:nth-child(even) {
  background: var(--surface-soft);
}

.landing-home__agent-step + .landing-home__agent-step {
  border-inline-start: 1px solid var(--line-soft);
}

.landing-home__agent-step::before {
  content: counter(landing-agent-step);
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--accent-dark);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
}

.landing-home__agent-step h3,
.landing-home__agent-step p {
  position: relative;
  z-index: 2;
}

.landing-home__agent-step:nth-child(even)::before {
  background: var(--surface-strong);
}

/* Пошаговая surface напрямую переиспользует title/body scale feature-карточек
   и не заводит отдельную маркетинговую типографику. */
.landing-home__agent-step h3 {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.3;
}

.landing-home__agent-step p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

/* Context-секция напрямую переиспользует heading, title и lead действующего
   landing-блока. Внутри остаются только три источника: простая пиктограмма,
   короткая подпись и одно основное значение без повторных статусов и
   пояснений. Иконки наследуют уже знакомую синюю surface feature-карточек,
   поэтому добавляют визуальные опоры без новой палитры и без намёка на action. */
.landing-home__context-surface {
  overflow: hidden;
  border-color: var(--line-soft);
  border-radius: 28px;
}

.landing-home__context-sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.landing-home__context-source {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  min-width: 0;
  padding: 1.6rem 1.5rem 1.65rem;
}

.landing-home__context-source + .landing-home__context-source {
  border-inline-start: 1px solid var(--line-soft);
}

.landing-home__context-kind {
  color: var(--text-muted);
  /* Подпись и значение используют один кегль. Иерархию здесь создают цвет и
     вес, поэтому карточка не дробится ещё на один мелкий текстовый уровень. */
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.4;
}

/* Размер чуть спокойнее, чем в feature-mosaic: здесь иконка помогает быстро
   различить уровни контекста, а не становится самостоятельным акцентом. */
.landing-home__context-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.25rem;
  border-radius: 16px;
  font-size: 1.2rem;
  box-shadow: 0 14px 28px color-mix(in oklch, var(--accent) 18%, transparent);
}

.landing-home__context-source dd {
  margin: 0;
  color: var(--text-main);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 575.98px) {
  /* На телефоне немного выходим за текстовую колонку, чтобы персонажи и
     контекст не становились мелкими, но сохраняем безопасный page gutter. */
  .landing-home__hero-illustration {
    width: calc(100% + 0.5rem);
    margin-inline: -0.25rem;
  }
}

@media (max-width: 1199.98px) {
  /* На средней ширине четыре коротких шага складываются в две строки. Третий
     шаг начинает новую строку, поэтому вертикальная граница у него снимается,
     а нижняя пара получает общий горизонтальный hairline. */
  .landing-home__agent-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* В сетке 2 × 2 связь уже читается через общие границы строк и колонок;
     один сквозной горизонтальный маршрут здесь был бы ложным. */
  .landing-home__agent-steps::before {
    display: none;
  }

  .landing-home__agent-step:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
  }

  .landing-home__agent-step:nth-child(3) {
    border-inline-start: 0;
  }
}

@media (max-width: 991.98px) {
  .landing-home__collaboration,
  .landing-home__story-section {
    width: min(100%, 960px);
  }
}

@media (max-width: 767.98px) {
  .landing-home__price-surface {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-home__origin-section {
    padding-inline: 0;
  }

  .landing-home__origin-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .landing-home__origin-copy {
    display: contents;
  }

  .landing-home__origin-layout h2 {
    grid-row: 1;
    margin: 0;
  }

  .landing-home__origin-layout p {
    margin: 0;
  }

  /* Телефон показывает левую сюжетную часть без пустого поля для desktop-copy.
     Квадратный picture заранее резервирует её высоту; персонажи остаются целыми.
     Один DOM сохраняет заголовок, иллюстрацию и рассказ без дубликатов текста. */
  .landing-home__origin-illustration {
    width: 100%;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .landing-home__origin-illustration picture {
    aspect-ratio: 1;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent, black 8%, black 85%, transparent);
  }

  .landing-home__origin-illustration img {
    width: 150%;
    max-width: none;
  }

  .landing-home__price-base,
  .landing-home__price-extras,
  .landing-home__price-example {
    padding: 1.5rem 1.25rem;
  }

  .landing-home__price-extras {
    border-inline-start: 0;
    border-top: 1px solid var(--line-soft);
  }

  /* Телефон начинает с оффера, а компактная специально нарисованная сцена
     стоит между пояснением и действиями. Copy-wrapper раскрываем только для
     grid: DOM остаётся единым, дубликатов заголовка и CTA нет. Неинтерактивная
     иллюстрация не меняет последовательность клавиатурного фокуса. */
  .landing-home__hero-body {
    grid-template-areas:
      "hero-title"
      "hero-lead"
      "hero-preview"
      "hero-actions"
      "hero-note";
    gap: 1rem;
  }

  .landing-home__hero-copy {
    display: contents;
  }

  .landing-home__title {
    grid-area: hero-title;
    max-width: none;
    font-size: clamp(1.94rem, 8.6vw, 2.25rem);
    line-height: 1.08;
  }

  .landing-home__lead {
    grid-area: hero-lead;
  }

  .landing-home__actions {
    grid-area: hero-actions;
    gap: 0.75rem;
    padding-top: 0;
  }

  .landing-home__support-note {
    grid-area: hero-note;
  }

  .landing-home__hero-preview {
    grid-area: hero-preview;
    width: 100%;
    margin-block: -0.25rem;
  }

  .landing-home__hero-preview::before {
    content: none;
  }

  .landing-home__hero-illustration-picture {
    /* Ограничиваем высоту сцены её шириной, чтобы обе CTA были доступны уже
       на первом экране обычного телефона без уменьшения touch targets. */
    width: min(100%, 340px);
    mask-image:
      linear-gradient(to right, transparent, black 5%, black 95%, transparent),
      linear-gradient(to bottom, transparent, black 5%, black 90%, transparent);
    mask-composite: intersect;
  }

  /* На телефоне карточка начинается ближе к hero, а её две половины становятся
     компактнее. Благодаря этому оба базовых обещания полностью считываются в
     одном визуальном фрагменте без уменьшения кегля. */
  .landing-home__audiences {
    gap: 1.45rem;
    margin-top: 3.5rem;
  }

  .landing-home__audiences + .landing-home__collaboration {
    margin-top: 4rem;
  }

  .landing-home__collaboration,
  .landing-home__story-section,
  .landing-home__origin-section {
    gap: 1.45rem;
    margin-top: 3rem;
  }

  .landing-home__agent-steps,
  .landing-home__audience-surface,
  .landing-home__context-sources {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-home__audience--agents {
    border-inline-start: 0;
    border-top: 1px solid var(--line-soft);
  }

  .landing-home__audience {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 0.85rem;
    row-gap: 0.4rem;
    padding: 1.1rem 1rem 1.15rem;
  }

  .landing-home__audience-icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .landing-home__agent-step {
    padding: 1.3rem 1.2rem 1.35rem;
  }

  .landing-home__agent-step + .landing-home__agent-step,
  .landing-home__context-source + .landing-home__context-source {
    border-inline-start: 0;
    border-top: 1px solid var(--line-soft);
  }

  .landing-home__context-source {
    /* На телефоне иконка становится левым якорем для двух строк текста. Так
       три источника легче сканировать, а surface не растягивается втрое. */
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.9rem;
    row-gap: 0.3rem;
    align-items: start;
    padding: 1.3rem 1.2rem 1.35rem;
  }

  .landing-home__context-icon {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .landing-home__context-kind,
  .landing-home__context-source dd {
    grid-column: 2;
  }
}

/*
 * Hero-сцена намеренно статична. Reduced-motion здесь нужен только прежней
 * drag-демонстрации feature cards, которая остаётся отдельной возможностью.
 */
@media (prefers-reduced-motion: reduce) {
  .landing-home__advantage-card {
    transition: none;
  }

  .landing-home__advantage-card.is-drop-target,
  .landing-home__advantage-drag-ghost {
    transform: none;
  }
}