/* Journey Map 2.0 — Figma "Journey Map (City)" (nodes 102:23096, 102:23100, 74:18315).

   Geometry note: every district and POI below is placed in the design's 1920x1080
   world. `.jm2__world` is exactly that size, so the Figma coordinates are copied
   1:1 and map.js only ever applies a translate+scale to the whole world. */

/* Экран карты: ровно вьюпорт минус хедер. Высоту хедера кладёт в
   --jm2-header-h map.js (она плавает: баннер, мобильная вёрстка), 75px —
   фолбэк десктопного .oct-header на случай, если скрипт ещё не отработал.
   --jm2-page-gap — вертикальные отступы самого блока, их нужно вычесть,
   чтобы карта фиксированной высоты не вылезала за экран. */
.jm2-page {
  /* 8px по кругу, как в App-фрейме макета (Figma 102:23309) */
  --jm2-page-gap: 16px;

  height: calc(100dvh - var(--jm2-header-h, 75px));
  /* Шахматка из макета (Figma 142:27430): клетка 32px, белый с альфой 0.05
     поверх static/black. Страница карты всегда тёмная, независимо от темы
     сайта. Один conic-gradient = четыре квадранта клетки 64x64. */
  background-color: #1c1c1c;
  background-image: conic-gradient(
    rgba(255, 255, 255, 0.05) 0 25%,
    transparent 0 50%,
    rgba(255, 255, 255, 0.05) 0 75%,
    transparent 0
  );
  background-size: 64px 64px;
}

/* Страница не скроллится: прокрутка живёт только внутри карты. */
.jm2-no-scroll,
.jm2-no-scroll body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.jm2 {
  /* Мир — это весь холст карты 2132x1200, а не кадр 1920x1080 из макета:
     иначе крайние 106x60 px картинки навсегда остаются за границей панорамы
     и до краёв города не доскроллить. Районы и POI живут в координатах кадра,
     поэтому их слой смещён на --jm2-frame-*. */
  --jm2-world-w: 2132px;
  --jm2-world-h: 1200px;
  --jm2-frame-x: 106px;
  --jm2-frame-y: 60px;
  --jm2-radius: 20px;
  /* пауза между соседними шагами, когда город оживает после облаков */
  --jm2-stagger: 0.25s;
  /* сколько едут облака; отсюда же map.js берёт тайминг следующего шага */
  --jm2-clouds-ms: 1.6s;

  /* ширина панели обучения и время её выезда */
  --jm2-panel-w: 640px;
  --jm2-panel-ms: 0.5s;

  position: relative;
  display: flex;
  gap: 8px;
  width: 100%;
  /* Высота задана явно: иначе длинный текст в панели растягивает ряд, и её
     футер с «Далее» уезжает за нижний край экрана — страница-то не скроллится.
     С фиксированной высотой прокручивается только тело панели. */
  height: 100%;
  /* На больших экранах кадр не растягивается во всю ширину: 1424px — это
     MapArea из макета (App 1440 минус отступы). Ровно столько же занимают
     карта 776 + зазор 8 + панель обучения 640, когда она открыта. */
  /* max-width: 1424px; */
  margin: 0 auto;
  font-family: 'Golos Text', system-ui, sans-serif;
}

/* Сцена карты: скругление и обрезка теперь здесь, потому что .jm2 стал рядом
   из карты и панели. Все слои (интро, лоадер, карточка тура) позиционируются
   от неё, поэтому на панель они не наезжают. */
.jm2__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--jm2-radius);
  overflow: hidden;
}

/* Fixed-size stage: the map never reflows, it is panned inside this box.
   Высота в px как в макете; max-height только страхует от вылезания за экран
   на низких окнах, размер карты при этом не «резиновый». */
.jm2__viewport {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--jm2-header-h, 75px) - var(--jm2-page-gap, 64px));
  min-height: 320px;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.jm2__viewport.is-panning {
  cursor: grabbing;
}

.jm2__world {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--jm2-world-w);
  height: var(--jm2-world-h);
  transform-origin: 0 0;
  will-change: transform;
}

/* map-image: 2132x1200, centred on the world (Figma node 7:596).

   The design runs Figma's "art" effect (radius 4) over the city, which has no CSS
   equivalent and is not baked into the export. The pixel look is reproduced the
   way pixel art is: map.webp ships at 1066x600 — half the box — and is blown back
   up with nearest-neighbour, so every source pixel lands as a crisp 2x2 block.
   Вторая половина эффекта — дизеринг: ассет прогнан через Bayer 4x4 с
   квантованием в 16 уровней на канал (см. историю задачи), отсюда крапчатая
   фактура на заливках, как в макете. Пересобирать ассет только без потерь:
   lossy-сжатие замыливает и пиксели, и дизер.
   Keep the asset low-res; a full-size image here would render smooth again. */
.jm2__map {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--jm2-world-w);
  height: var(--jm2-world-h);
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  border-radius: 12px;
  /* Пока грузимся, город чёрно-белый (Figma 74:18334) и «оживает» цветом,
     когда всё готово. Фильтр висит на самой картинке, а не на мире, чтобы не
     трогать stacking context районов с их mix-blend-mode. */
  filter: grayscale(1);
  transition: filter 0.6s ease;
}

.jm2.is-loaded .jm2__map {
  filter: grayscale(0);
}

/* ---------------------------------------------------------------- map tour */

/* Карточка обучения в правом нижнем углу (Figma 175:31726). Выходит последней,
   уже после того как районы открылись по очереди: индекс на шаг больше, чем у
   последнего POI, поэтому пользуется той же лесенкой задержек.

   Карточка приколочена к правому нижнему углу карты на всех ширинах: размер и
   угол не меняются, на узком экране её держит max-width. */
.jm2__tour {
  --jm2-step-index: 7;

  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 400px;
  max-width: calc(100% - 32px);
  padding: 24px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 12px;
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--jm2-step-index) * var(--jm2-stagger));
}

.jm2.is-settled .jm2__tour {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Обучение предлагаем, только пока пользователь на первой стадии. Запись через
   :not(:has(...)) не случайна: в браузерах без :has правило целиком отпадает и
   карточка останется видимой, а не исчезнет навсегда. */
.jm2:not(:has(.jm2__step--1.is-current)) .jm2__tour {
  display: none;
}

/* Контент карточки лежит во вложенном блоке: их два (приглашение и итог),
   и переключает их Alpine. Раскладку держит он же, чтобы x-show не ломал
   колонку карточки. */
.jm2__tour-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.jm2__tour-eyebrow {
  margin: 0;
  color: #4eb97e;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.jm2__tour-title {
  margin: -4px 0 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

.jm2__tour-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

/* Кнопка бывает и <a> (вход через HubID), поэтому сбрасываем оформление ссылки. */
.jm2__tour-btn {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 20px;
  text-decoration: none;
  border: 0;
  border-radius: 8px;
  background-color: #2c9d62;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 2px rgba(8, 40, 13, 0.02), 0 2px 4px rgba(8, 40, 13, 0.05);
  color: #effaf3;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}

.jm2__tour-btn:hover {
  background-color: #268a55;
}

/* ------------------------------------------------------------- tour panel */

/* MapContent (Figma 102:23642): выезжает справа по «Начать обучение», карта при
   этом честно ужимается — анимируется ширина, а не transform, поэтому вьюпорт
   реально меняет размер, и map.js переклампливает панораму по ResizeObserver. */
/* Показом/скрытием управляет Alpine (x-show + x-cloak), поэтому здесь панель
   описана только в открытом виде. */
.jm2__panel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: var(--jm2-panel-w);
  max-width: 45%;
  overflow: hidden;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: var(--jm2-radius);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Выезд справа: анимируем ширину, а не transform — тогда карта рядом сужается
   в том же темпе, а не прыгает на конечный размер, пока панель едет поверх
   пустого места. Классы навешивает x-transition. */
.jm2__panel--anim {
  transition:
    width var(--jm2-panel-ms) cubic-bezier(0.33, 0, 0.2, 1),
    opacity 0.25s ease;
}

.jm2__panel--closed {
  width: 0;
  opacity: 0;
  /* при нулевой ширине рамка схлопывается в полоску — гасим её на время выезда */
  border-color: transparent;
}

.jm2__panel--open {
  width: var(--jm2-panel-w);
  opacity: 1;
}

.jm2__panel-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid rgba(227, 227, 227, 0.1);
}

.jm2__panel-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.jm2__icon-btn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.jm2__icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.jm2__panel-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.jm2__panel-body::-webkit-scrollbar {
  width: 12px;
}

.jm2__panel-body::-webkit-scrollbar-thumb {
  border: 4px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  background-clip: content-box;
}

.jm2__panel-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

/* ------------------------------------------------- контент обучения (слайды)

   Figma 102:23642 / 105:24099 / 105:24250 / 175:32669 и мобильные 178:*.
   Токены тёмной темы: поверхности — белый 10%, бордеры — #e3e3e3 10%,
   основной текст — белый 80%, вторичный — 60%. */

.jm2-slide {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jm2-slide__title {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-wrap: balance;
}

.jm2-slide__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

/* Картинка и текст слайда приходят из админки (док. 1.1). Разметку внутри
   текста задаёт редактор, поэтому типографику навешиваем на сами теги —
   классов у этого HTML нет. */
.jm2-slide__image {
  display: block;
  width: 100%;
  border-radius: 12px;
  width: 64px;
  height: 64px;
}

.jm2-slide__body {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

.jm2-slide__body > * {
  margin: 0 0 12px;
}

.jm2-slide__body > *:last-child {
  margin-bottom: 0;
}

.jm2-slide__body b,
.jm2-slide__body strong {
  color: #fff;
  font-weight: 500;
}

.jm2-slide__body ul,
.jm2-slide__body ol {
  padding-left: 20px;
}

.jm2-slide__body li + li {
  margin-top: 4px;
}

.jm2-slide__body a {
  color: #4eb97e;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Заголовок раздела внутри текста слайда — Heading/4 (Figma 257:12840).
   Между разделами в макете 24px, внутри раздела — 12px. */
.jm2-slide__body h3,
.jm2-slide__body h4 {
  margin: 24px 0 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  text-wrap: balance;
}

.jm2-slide__body > h3:first-child,
.jm2-slide__body > h4:first-child {
  margin-top: 0;
}

/* Списки-карточки (Figma 257:12841 и 257:12898): пункт — карточка с
   названием и пояснением. Номер рисует CSS-счётчик, чтобы в админке его не
   проставляли руками и он не разъезжался при правке порядка. */
.jm2-slide__body .jm2-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: jm2-card;
}

.jm2-slide__body .jm2-cards li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.jm2-slide__body .jm2-cards--numbered li {
  grid-template-columns: auto 1fr;
}

/* Кружок с номером: 20×20 вместе с рамкой, поэтому box-sizing и padding 1px. */
.jm2-slide__body .jm2-cards--numbered li::before {
  counter-increment: jm2-card;
  content: counter(jm2-card);
  box-sizing: border-box;
  grid-row: span 2;
  align-self: start;
  min-width: 20px;
  padding: 1px 4px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
}

/* Название пункта — Label/Small, пояснение — Body/Small на 60% белого. */
.jm2-slide__body .jm2-cards b,
.jm2-slide__body .jm2-cards strong {
  font-weight: 500;
}

.jm2-slide__body .jm2-cards span {
  color: rgba(255, 255, 255, 0.6);
}

/* Карточка кейса (Figma 262:14483): логотип с названием, под разделителем —
   рассказ, внизу — пилюли с цифрами. Логотип необязателен: пока его не
   загрузили, шапка сдвигается влево, а не показывает пустое место. */
.jm2-slide__body .jm2-cases {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.jm2-slide__body .jm2-cases > li {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.jm2-slide__body .jm2-cases > li > * {
  margin: 0;
}

.jm2-case__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(227, 227, 227, 0.1);
}

.jm2-case__head:not(:has(img)) {
  grid-template-columns: 1fr;
}

.jm2-case__head img {
  grid-column: 1;
  grid-row: span 2;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
}

/* Название кейса — Heading/5 (16/24), подпись — Body/Small на 60% белого. */
.jm2-case__head b {
  grid-column: -2;
  align-self: end;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-wrap: balance;
}

.jm2-case__head span {
  grid-column: -2;
  align-self: start;
  color: rgba(255, 255, 255, 0.6);
}

/* Пилюли с цифрами (Figma 262:14493). */
.jm2-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jm2-pills span {
  padding: 4px 8px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* Alert (Figma 257:13058 и 257:13625): замечание в тексте слайда. Заголовок
   необязателен — без него плашка состоит из одного текста. */
.jm2-slide__body .jm2-note {
  padding: 12px;
  border: 1px solid rgba(116, 86, 26, 0.4);
  border-radius: 12px;
  background: rgba(93, 68, 20, 0.5);
  color: rgba(255, 203, 103, 0.7);
}

.jm2-slide__body .jm2-note b {
  display: block;
  margin-bottom: 4px;
  color: #ffcb67;
  font-weight: 500;
}

.jm2-slide__body .jm2-note span {
  display: block;
}

/* --------------------------------------------- опрос стадии (док. 1.3–1.4) */

.jm2-quiz {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
}

.jm2-quiz__eyebrow {
  margin: 0;
  color: #4eb97e;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.jm2-quiz__question {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-wrap: balance;
}

.jm2-quiz__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

.jm2-quiz__answers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.jm2-quiz__answer {
  padding: 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.jm2-quiz__answer:hover {
  background: rgba(255, 255, 255, 0.18);
}

.jm2-quiz__note {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255, 190, 65, 0.24);
  border-radius: 8px;
  background: rgba(255, 190, 65, 0.12);
  color: #ffcb67;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* ------------------------------------------- результат квиза (Figma 188:39625) */

.jm2-quiz__lead {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Плашка стадии повторяет POI на карте: тёмная пилюля с номером и названием. */
.jm2-quiz__stage {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 12px;
  border-radius: var(--jm2-radius);
  background: rgba(28, 28, 28, 0.7);
}

.jm2-quiz__stage-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.jm2-quiz__stage-name {
  padding: 0 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.jm2-quiz__reset {
  align-self: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
}

.jm2-quiz__reset:hover {
  color: #fff;
}

/* Пока квиз не пройден, «Завершить» недоступна. */
.jm2__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 959px) {
  .jm2-slide__title {
    font-size: 18px;
    line-height: 26px;
  }

  .jm2-quiz__question {
    font-size: 16px;
    line-height: 24px;
  }
}

.jm2__panel-foot {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid rgba(227, 227, 227, 0.1);
  /* по ширине футера считается интервал между точками (см. .jm2__dots) */
  container-type: inline-size;
}

/* Кнопки в футере не сжимаются: место уступает ряд точек. */
.jm2__panel-foot > .jm2__btn,
.jm2__panel-foot > .jm2-btn {
  flex: 0 0 auto;
}

.jm2__panel-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

/* Точек столько, сколько шагов: до восемнадцати они помещаются в футер, дальше
   уступают место полоске прогресса (см. .jm2__progress и условия в map.html).

   Ближе к восемнадцати ряду становится тесно, поэтому интервал ужимается по ширине
   футера: на узкой панели он сходится к 2px, на широкой остаётся макетным. */
.jm2__dots {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: clamp(2px, 1.6cqw, 8px);
  min-width: 0;
  /* на пределе ряд упирается в счётчик — держим между ними воздух */
  margin-right: 16px;
}

.jm2__dot {
  flex: 0 0 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  opacity: 0.3;
  transition: flex-basis 0.3s ease, opacity 0.3s ease;
}

.jm2__dot.is-active {
  flex-basis: 16px;
  opacity: 0.6;
}

/* Полоска вместо точек, когда шагов много: два десятка точек в футер не
   помещаются, а сжатые превращаются в нечитаемые палочки. */
.jm2__progress {
  flex: 1 1 auto;
  overflow: hidden;
  min-width: 48px;
  max-width: 160px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.jm2__progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  transition: width 0.3s ease;
}

.jm2__counter {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  margin: 0;
  color: #b6b6b6;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.jm2__btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  background-color: #2c9d62;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 2px rgba(8, 40, 13, 0.02), 0 2px 4px rgba(8, 40, 13, 0.05);
  color: #effaf3;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}

.jm2__btn:hover {
  background-color: #268a55;
}

/* Мобильная раскладка (Figma 175:32399 и 178:37537): панель не накрывает карту
   и не режет её по ширине, а встаёт под ней — карта при этом ужимается до
   квадрата из макета (374px при ширине экрана 390px).

   Высоту ряду задаём явно: иначе панель не знает, от чего считать свой предел,
   и длинный текст (178:38200) выталкивал бы её за экран вместо прокрутки
   внутри тела. */
@media (max-width: 959px) {
  .jm2 {
    flex-direction: column;
    height: 100%;
  }

  .jm2__stage {
    flex: 0 0 auto;
  }

  .jm2.is-touring .jm2__viewport {
    height: 374px;
    min-height: 0;
    max-height: 45dvh;
  }

  .jm2__panel {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
    min-height: 0;
  }

  /* Панель под картой, так что «выезд справа» здесь не читается — оставляем
     только проявление, ширину не трогаем. */
  .jm2__panel--anim {
    transition: opacity 0.25s ease;
  }

  .jm2__panel--closed,
  .jm2__panel--open {
    width: auto;
  }
}

/* ------------------------------------------------------------------ loader */

/* Пилюля «Загрузка карты» — те же токены, что у POI: overlay + блюр + бордер.
   Одна и та же и для города, и для карты района. */
.jm2__loader,
.jm2-district__loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: var(--jm2-radius);
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

.jm2.is-loaded .jm2__loader {
  opacity: 0;
  pointer-events: none;
}

/* До появления картинки под пилюлей должна быть тёмная подложка, а не
   шахматка страницы. */
.jm2:not(.is-loaded) .jm2__viewport {
  background: #1c1c1c;
}

.jm2__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #4eb97e;
  border-radius: 50%;
  animation: jm2-spin 0.9s linear infinite;
}

@keyframes jm2-spin {
  to { transform: rotate(360deg); }
}

/* Ожидание внутри панели (loader.html): та же крутилка, что на экране загрузки
   карты, но в размер строки текста. */
.jm2-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.jm2-loading__spinner {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: #4eb97e;
  border-radius: 50%;
  animation: jm2-spin 0.9s linear infinite;
}

/* Крутилка в кнопке на время запроса: кнопка остаётся своего размера, текст
   не исчезает — иначе она прыгает. */
.jm2-btn__spinner,
.jm2__btn-spinner {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: jm2-spin 0.9s linear infinite;
}

.jm2__loader-text {
  padding: 0 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- districts */

/* Кадр макета 1920x1080 внутри холста: все координаты районов и POI ниже —
   из Figma, один в один. */
.jm2__steps {
  position: absolute;
  left: var(--jm2-frame-x);
  top: var(--jm2-frame-y);
  width: 1920px;
  height: 1080px;
}

.jm2__step {
  position: absolute;
  inset: 0;
  /* Шаг растянут на весь кадр — район с POI лежат в нём по своим координатам.
     Без этого шаги, что ниже в разметке, накрывали бы POI предыдущих и съедали
     клик: кликается только сам POI, он возвращает себе pointer-events ниже. */
  pointer-events: none;
}

/* Город оживает по маршруту, а не разом: каждый следующий район ждёт на
   --jm2-stagger дольше предыдущего. Индекс наследуется внутрь шага, поэтому
   район и его POI выходят вместе. */
.jm2__step--1 { --jm2-step-index: 0; }
.jm2__step--2 { --jm2-step-index: 1; }
.jm2__step--3 { --jm2-step-index: 2; }
.jm2__step--4 { --jm2-step-index: 3; }
.jm2__step--5 { --jm2-step-index: 4; }
.jm2__step--6 { --jm2-step-index: 5; }
.jm2__poi--soon { --jm2-step-index: 6; }

/* The city opens in full colour (Figma 102:23311) and only settles into its
   locked state a beat later: the areas blend in and the POIs rise into place.
   At opacity 0 a blended layer leaves the backdrop untouched, so fading the
   area in is the same as fading the district out.

   Обесцвечивание — признак закрытого района: открытый стоит в цвете, даже
   если пользователь сейчас не в нём. У текущего района слой не гасит цвет, а
   подсвечивает, поэтому он показывается всегда. */
/* Форма района — маска, а не картинка поверх карты.

   Раньше здесь лежал белый SVG с mix-blend-mode: saturation. В WebKit режимы
   наложения не применяются внутри слоя, поднятого на композитор, а
   `.jm2__world` поднят (will-change: transform) — в Safari район заливался
   сплошным белым пятном. backdrop-filter в том же слое работает (на нём же
   держится размытие у POI), поэтому обесцвечивание делаем им. */
.jm2__area {
  position: absolute;
  /* the stroke of each area bleeds past its box — the per-step insets below
     reproduce Figma's overflow exactly */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  transition-delay: calc(var(--jm2-step-index, 0) * var(--jm2-stagger));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-backdrop-filter: saturate(0);
  backdrop-filter: saturate(0);
}

/* Картинка нужна была только как форма — теперь её даёт маска. Оставляем в
   разметке: без поддержки масок район просто не подсветится, а не зальётся. */
.jm2__area img {
  display: none;
}

/* Закрытый район обесцвечен целиком, текущий — подсвечен мягким белым.
   Сила эффекта задаётся здесь, а не внутри SVG: в ассетах она была зашита под
   то состояние, для которого район экспортировали, и подсветка доставалась
   только первому району. */
.jm2.is-settled .jm2__step.is-locked .jm2__area {
  opacity: 1;
}

.jm2.is-settled .jm2__step.is-current .jm2__area {
  opacity: 0.1;
}

/* Текущий район не гасим, а подсвечиваем: белая заливка по той же маске. */
.jm2__step.is-current .jm2__area {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.jm2__step--1 .jm2__area {
  left: 17px; top: 864.5px; width: 361px; height: 216px;
  -webkit-mask-image: url(../img_v2/journeymap/v2/area-1.svg);
  mask-image: url(../img_v2/journeymap/v2/area-1.svg);
}

.jm2__step--2 .jm2__area {
  left: 191px; top: 557.1px; width: 338px; height: 295.3px;
  -webkit-mask-image: url(../img_v2/journeymap/v2/area-2.svg);
  mask-image: url(../img_v2/journeymap/v2/area-2.svg);
}

.jm2__step--3 .jm2__area {
  left: 469.8px; top: 505.6px; width: 416.5px; height: 259.3px;
  -webkit-mask-image: url(../img_v2/journeymap/v2/area-3.svg);
  mask-image: url(../img_v2/journeymap/v2/area-3.svg);
}

.jm2__step--4 .jm2__area {
  left: 744px; top: 396.1px; width: 351px; height: 282.3px;
  -webkit-mask-image: url(../img_v2/journeymap/v2/area-4.svg);
  mask-image: url(../img_v2/journeymap/v2/area-4.svg);
}

.jm2__step--5 .jm2__area {
  left: 987px; top: 257.1px; width: 401.2px; height: 342.8px;
  -webkit-mask-image: url(../img_v2/journeymap/v2/area-5.svg);
  mask-image: url(../img_v2/journeymap/v2/area-5.svg);
}

.jm2__step--6 .jm2__area {
  left: 1253.1px; top: -20.9px; width: 478px; height: 590.4px;
  -webkit-mask-image: url(../img_v2/journeymap/v2/area-6.svg);
  mask-image: url(../img_v2/journeymap/v2/area-6.svg);
}

/* ---------------------------------------------------------------- map POIs */

.jm2__poi {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 12px;
  /* POI района — кнопка, поэтому гасим рамку и шрифт браузера */
  border: 0;
  border-radius: var(--jm2-radius);
  font-family: inherit;
  background: rgba(28, 28, 28, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 8px));
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: calc(var(--jm2-step-index, 0) * var(--jm2-stagger));
}

.jm2.is-settled .jm2__poi {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.jm2__step--1 .jm2__poi { left: 177px;    top: 865px; }
.jm2__step--2 .jm2__poi { left: 360px;    top: 605px; }
.jm2__step--3 .jm2__poi { left: 679px;    top: 533px; }
.jm2__step--4 .jm2__poi { left: 919.5px;  top: 424px; }
.jm2__step--5 .jm2__poi { left: 1229.5px; top: 298px; }
.jm2__step--6 .jm2__poi { left: 1507px;   top: 157px; }
/* стройка — Figma 88:20119 в финальном кадре 102:23521 */
.jm2__poi--soon          { left: 829px;   top: 831px; cursor: default; }

.jm2__poi-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 99px;
  border: 1px solid var(--surface-primary-border, rgba(227, 227, 227, 0.10));
  background: var(--surface-primary-background, rgba(255, 255, 255, 0.10));
  color: var(--text-placeholder, rgba(255, 255, 255, 0.60));
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.jm2__poi-title {
  padding: 0 4px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.jm2__step.is-locked .jm2__poi-title,
.jm2__step.is-done .jm2__poi-title,
.jm2__step.is-done .jm2__poi-tick,
.jm2__poi--soon .jm2__poi-title {
  opacity: 0.5;
}

.jm2__step.is-locked .jm2__poi,
.jm2__step.is-done .jm2__poi {
  cursor: default;
}

/* Закрытое здание района (Офис компании в недостигнутой стадии) — курсор не
   обещает нажатие, подпись приглушена, как у «Строительных работ». */
.jm2__poi:disabled {
  cursor: default;
}

.jm2__poi:disabled .jm2__poi-title {
  opacity: 0.5;
}

/* Хранилище общих SVG-символов: из потока убрано, но <use> из него работает. */
.jm2__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Галочка вместо номера у пройденного района (Figma 52:14725). */
.jm2__poi-tick {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: #fff;
}

.jm2__poi-lock {
  width: 24px;
  height: 24px;
}

.jm2__tag {
  padding: 4px 8px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.jm2__tag--notice {
  border-color: transparent;
  background: #ffbe41;
  color: #46330d;
}

/* ------------------------------------------------------------ intro overlay */

/* Интро ждёт, пока догрузится картинка карты (и сами облака): иначе текст
   и облака повисают над пустым местом, а клик может проскочить до того, как
   город вообще появился. Класс is-ready ставит map.js по onload картинок. */
.jm2__intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.jm2.is-ready .jm2__intro {
  opacity: 1;
}

.jm2.is-ready .jm2__intro:not(.is-done) {
  pointer-events: auto;
}

.jm2__clouds {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Две копии одной облачной пластины, сходящиеся по центру (Figma 102:23312).
   После лоадера они приезжают с боков, по клику — тем же движением уезжают
   обратно. Смещение считается от собственной ширины плюс полэкрана, иначе на
   широких мониторах край пластины остаётся торчать в кадре. */
.jm2__cloud {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  min-width: 1616px;
  max-width: none;
  object-fit: cover;
  transition: transform var(--jm2-clouds-ms) cubic-bezier(0.33, 0, 0.2, 1);
}

.jm2__cloud--left {
  right: calc(50% - 488px);
  transform: translateX(calc(-100% - 50vw));
}

.jm2__cloud--right {
  left: calc(50% - 489px);
  transform: translateX(calc(100% + 50vw));
}

.jm2.is-ready .jm2__cloud--left,
.jm2.is-ready .jm2__cloud--right {
  transform: translateX(0);
}

/* Правило ухода идёт после правила прихода — специфичность та же, побеждает
   последнее. */
.jm2.is-ready .jm2__intro.is-parting .jm2__cloud--left {
  transform: translateX(calc(-100% - 50vw));
}

.jm2.is-ready .jm2__intro.is-parting .jm2__cloud--right {
  transform: translateX(calc(100% + 50vw));
}

/* Screens are stacked layers, not siblings in flow — otherwise the outgoing one
   still takes up width and pushes the incoming screen off-centre. */
.jm2__screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px;
  text-align: center;
  text-wrap: balance;
  /* white type over the white cloud plate reads as dark — this is how the
     design gets its contrast without a scrim */
  mix-blend-mode: difference;
}

.jm2__screen > * {
  width: 100%;
  max-width: 600px;
}

/* Текст выходит только после того, как облака сошлись: задержка равна их
   времени в пути. Это transition, а не animation, потому что отсчёт должен
   начинаться в момент is-ready, а не на загрузке страницы. */
.jm2__screen.is-active {
  display: flex;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--jm2-clouds-ms);
}

.jm2.is-ready .jm2__screen.is-active {
  opacity: 1;
  transform: none;
}

.jm2__screen.is-leaving {
  display: flex;
  animation: jm2-screen-out 0.4s ease both;
}

@keyframes jm2-screen-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.jm2__eyebrow {
  margin: 0;
  color: #b6b6b6;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.jm2__title {
  margin: -8px 0 0;
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  letter-spacing: -1.44px;
}

.jm2__hint {
  margin: 0;
  color: #2c9d62;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.jm2__hint-action {
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (max-width: 767px) {
  .jm2__viewport {
    /* height: 560px; */
    max-height: calc(100vh - 82px);
  }

  .jm2__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jm2__cloud,
  .jm2__area,
  .jm2__poi,
  .jm2__screen.is-active,
  .jm2__screen.is-leaving {
    transition: none;
    animation: none;
  }
}

/* ---------------------------------------------------------------- districts

   Район уровня (Figma 21:3590, 21:3594, 21:3598, 21:3602, 21:3606) — это не
   слой города, а самостоятельная сцена: своя картинка карты и четыре здания.
   Поэтому он накрывает сцену целиком и панорамируется своим вьюпортом
   (createViewport в map.js), а мир у него — кадр макета 1920x1080, без запаса
   по краям, который нужен городу.

   Разметка у всех районов общая (journeymap/v2/district.html), отличаются
   только картинка и координаты — они ниже, один в один из макета. */
.jm2__district {
  --jm2-world-w: 1920px;
  --jm2-world-h: 1080px;

  position: absolute;
  inset: 0;
  /* выше карточки обучения и пилюли загрузки города */
  z-index: 3;
  background: #1c1c1c;
}

/* Появление и уход навешивает x-transition. */
.jm2__district--anim {
  transition: opacity 0.35s ease;
}

.jm2__district--hidden {
  opacity: 0;
}

/* Вьюпорт района меряется от накрывающего слоя: высоту города (100dvh минус
   шапка) здесь считать не от чего. */
.jm2__viewport--district {
  height: 100%;
}

.jm2-district {
  position: absolute;
  inset: 0;
}

/* Картинка карты приезжает по первому открытию района (map.js подставляет src
   из data-src), поэтому проявляем её, когда она догрузилась. Ассет, как и у
   города, вдвое меньше своей коробки и растягивается nearest-neighbour —
   пересобирать только без потерь: lossy замыливает и пиксели, и дизер. */
.jm2-district__map {
  position: absolute;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.jm2-district.is-ready .jm2-district__map {
  opacity: 1;
}

/* Подсветка участков под зданиями. В макете активны все четыре, поэтому
   plus-lighter, а не saturation, как у непройденных районов города. */
.jm2-district__zone {
  position: absolute;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}

.jm2-district__zone img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* backlink (Figma 25:3095) — белый чип в углу карты: стрелка, разделитель и
   название района. Возвращает к городу весь чип целиком. */
.jm2-district__back {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* слева 8 — под кружок стрелки, справа 12 — под текст (макет) */
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  /* map-control из макета. Это не тень под кнопкой, а растушёванное затемнение
     карты вниз на несколько сотен пикселей — чтобы белый чип читался поверх
     любого района. Значения из Figma один в один; за карту тень не вылезает,
     её режет overflow сцены. */
  box-shadow:
    0 659px 185px rgba(0, 0, 0, 0.01),
    0 422px 169px rgba(0, 0, 0, 0.12),
    0 237px 142px rgba(0, 0, 0, 0.4),
    0 105px 105px rgba(0, 0, 0, 0.67),
    0 26px 58px rgba(0, 0, 0, 0.78);
  color: #1c1c1c;
  font-family: inherit;
  cursor: pointer;
}

/* Кнопка «дальше» — зеркало backlink у правого края: тот же чип, только
   название слева, а кружок со стрелкой справа. */
.jm2-district__next {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* зеркально backlink: слева 12 под текст, справа 8 под кружок стрелки */
  padding: 8px 8px 8px 12px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 659px 185px rgba(0, 0, 0, 0.01),
    0 422px 169px rgba(0, 0, 0, 0.12),
    0 237px 142px rgba(0, 0, 0, 0.4),
    0 105px 105px rgba(0, 0, 0, 0.67),
    0 26px 58px rgba(0, 0, 0, 0.78);
  color: #1c1c1c;
  font-family: inherit;
  cursor: pointer;
}

/* состояния в макете нет — минимальный отклик, чтобы чип не казался подписью */
.jm2-district__back:hover,
.jm2-district__next:hover {
  background: #f2f2f2;
}

.jm2-district__back-icon {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
}

.jm2-district__back-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background: #1c1c1c;
  opacity: 0.3;
}

.jm2-district__back-name {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

/* Пилюля загрузки района живёт своей жизнью: город к этому моменту давно
   загружен, поэтому на общее .jm2.is-loaded она не смотрит. */
.jm2-district__loader {
  z-index: 2;
}

.jm2-district.is-ready .jm2-district__loader {
  opacity: 0;
  pointer-events: none;
}

/* Геометрия районов — координаты кадра 1920x1080 из макета. */
/* --- 2: Problem/Solution Fit */
.jm2-district--2 .jm2-district__map { left: 0px; top: 0px; width: 1920px; height: 1080px; }
.jm2-district--2 .jm2-district__zone--campus { left: 325.5px; top: 21.5px; width: 570px; height: 480px; }
.jm2-district--2 .jm2-district__zone--programs { left: 1023.5px; top: 63px; width: 462px; height: 461px; }
.jm2-district--2 .jm2-district__zone--market { left: 207.5px; top: 518px; width: 656px; height: 515.5px; }
.jm2-district--2 .jm2-district__zone--company { left: 1124px; top: 524px; width: 590px; height: 523.5px; }
.jm2-district--2 .jm2-district__poi--campus { left: 677.5px; top: 301px; }
.jm2-district--2 .jm2-district__poi--programs { left: 1192px; top: 301px; }
.jm2-district--2 .jm2-district__poi--market { left: 600.5px; top: 796px; }
.jm2-district--2 .jm2-district__poi--company { left: 1271px; top: 796px; }

/* --- 3: MVP */
.jm2-district--3 .jm2-district__map { left: 0px; top: 0px; width: 1920px; height: 1080px; }
.jm2-district--3 .jm2-district__zone--campus { left: 332.5px; top: 30px; width: 566px; height: 470.5px; }
.jm2-district--3 .jm2-district__zone--programs { left: 1026.5px; top: 42px; width: 503px; height: 481.5px; }
.jm2-district--3 .jm2-district__zone--market { left: 209.5px; top: 509.5px; width: 644px; height: 536px; }
.jm2-district--3 .jm2-district__zone--company { left: 1142px; top: 526.5px; width: 595.5px; height: 546.5px; }
.jm2-district--3 .jm2-district__poi--campus { left: 693.5px; top: 280px; }
.jm2-district--3 .jm2-district__poi--programs { left: 1258px; top: 316px; }
.jm2-district--3 .jm2-district__poi--market { left: 615.5px; top: 816px; }
.jm2-district--3 .jm2-district__poi--company { left: 1282px; top: 800px; }

/* --- 4: Product/Market Fit */
.jm2-district--4 .jm2-district__map { left: -37.4px; top: -21.4px; width: 1994.9px; height: 1122.7px; }
.jm2-district--4 .jm2-district__zone--campus { left: 299px; top: 37px; width: 686.5px; height: 586.5px; }
.jm2-district--4 .jm2-district__zone--programs { left: 926.5px; top: 212px; width: 613.5px; height: 536px; }
.jm2-district--4 .jm2-district__zone--market { left: 196.5px; top: 512.5px; width: 623.5px; height: 490.5px; }
.jm2-district--4 .jm2-district__zone--company { left: 1060px; top: 589px; width: 715px; height: 512.2px; }
.jm2-district--4 .jm2-district__poi--campus { left: 704.5px; top: 456px; }
.jm2-district--4 .jm2-district__poi--programs { left: 1164px; top: 504px; }
.jm2-district--4 .jm2-district__poi--market { left: 603.5px; top: 832px; }
.jm2-district--4 .jm2-district__poi--company { left: 1286px; top: 887px; }

/* --- 5: Scale */
.jm2-district--5 .jm2-district__map { left: -3.1px; top: -2px; width: 1926.2px; height: 1084px; }
.jm2-district--5 .jm2-district__zone--campus { left: 487px; top: 58px; width: 458.5px; height: 648px; }
.jm2-district--5 .jm2-district__zone--programs { left: 969px; top: 224.5px; width: 494px; height: 460.5px; }
.jm2-district--5 .jm2-district__zone--market { left: 315.5px; top: 551.5px; width: 467.5px; height: 485.5px; }
.jm2-district--5 .jm2-district__zone--company { left: 1089.5px; top: 579.5px; width: 476px; height: 430.5px; }
.jm2-district--5 .jm2-district__poi--campus { left: 810.5px; top: 475px; }
.jm2-district--5 .jm2-district__poi--programs { left: 1185px; top: 523px; }
.jm2-district--5 .jm2-district__poi--market { left: 664.5px; top: 838px; }
.jm2-district--5 .jm2-district__poi--company { left: 1197px; top: 874px; }

/* --- 6: Maturity */
.jm2-district--6 .jm2-district__map { left: 0px; top: -0.3px; width: 1920px; height: 1080.6px; }
.jm2-district--6 .jm2-district__zone--campus { left: 507.5px; top: 66px; width: 280px; height: 527px; }
.jm2-district--6 .jm2-district__zone--programs { left: 1114.5px; top: 60px; width: 292.5px; height: 532px; }
.jm2-district--6 .jm2-district__zone--market { left: 242px; top: 394px; width: 397.5px; height: 594px; }
.jm2-district--6 .jm2-district__zone--company { left: 1293px; top: 398.5px; width: 389px; height: 597.5px; }
.jm2-district--6 .jm2-district__poi--campus { left: 652.5px; top: 477px; }
.jm2-district--6 .jm2-district__poi--programs { left: 1271px; top: 447px; }
.jm2-district--6 .jm2-district__poi--market { left: 538.5px; top: 822px; }
.jm2-district--6 .jm2-district__poi--company { left: 1414px; top: 840px; }

/* ------------------------------------------------- MapContent: Офис компании

   Figma 215:6059 / 215:6061. Панель здания внутри района: чрома общая с
   обучением (.jm2__panel), отличается ширина и то, что футера с «Далее» здесь
   нет. Токены тёмной темы те же, что у слайдов обучения: поверхности — белый
   10%, бордеры — #e3e3e3 10%, текст — белый 100/80/60%, бренд — #4eb97e. */

/* В макете панель здания уже панели обучения: MapArea 856 + 8 + 560 = 1424. */
.jm2__panel--building {
  --jm2-panel-w: 560px;
}

/* Тело любой панели здания: колонка блоков с шагом 24 (Figma body p-16 gap-24). */
.jm2-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.jm2-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

/* surface/brand/fade — зелёная подложка карточки про профиль компании */
.jm2-office__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(216, 243, 224, 0.1);
  border-radius: 12px;
  background: rgba(29, 126, 78, 0.5);
}

/* Два состояния карточки компании: выбор и уже выбранная. */
.jm2-office__state {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jm2-office__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jm2-office__card-title {
  margin: 0;
  color: #4eb97e;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-wrap: balance;
}

.jm2-office__card-text {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

.jm2-office__card-note {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

.jm2-office__link {
  color: inherit;
  text-decoration: underline;
  text-underline-position: from-font;
}

/* «Сохранено» — не кнопка, а отметка: выглядит так же, но не нажимается. */
.jm2-office__saved {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  cursor: default;
}

.jm2-office__form {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Стрелку рисуем сами: у нативного select её не заменить, поэтому
   appearance: none и своя иконка поверх. */
.jm2-office__select {
  position: relative;
  flex: 1 1 auto;
  min-width: 96px;
}

.jm2-office__select-input {
  width: 100%;
  height: 40px;
  padding: 8px 36px 8px 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  appearance: none;
  cursor: pointer;
}

/* В тёмной панели список всё равно рисует система — задаём ему тёмный фон,
   иначе на части платформ он открывается белым. */
/* Привязанную компанию сменить нельзя — селект только показывает её. */
.jm2-office__select-input:disabled {
  cursor: default;
}

.jm2-office__select-input option {
  background: #1c1c1c;
  color: #fff;
}

.jm2-office__select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transform: translateY(-50%);
}

.jm2-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 2px rgba(8, 40, 13, 0.02), 0 2px 4px rgba(8, 40, 13, 0.05);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
}

.jm2-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.jm2-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* «Выполнить», «Перейти» — та же кнопка, но плотнее (Figma: 8/4 против 12/8) */
.jm2-btn--sm {
  padding: 4px 12px;
}

/* «Отметить пройденным» — вторичное действие: в макете у неё нет ни фона, ни
   рамки, только тень. */
.jm2-btn--ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: 0 0 1px rgba(8, 40, 13, 0.02), 0 2px 2px rgba(8, 40, 13, 0.05);
}

.jm2-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}

.jm2-divider {
  height: 1px;
  background: rgba(227, 227, 227, 0.1);
}

.jm2-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jm2-group__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-wrap: balance;
}

.jm2-group__eyebrow {
  margin: 0;
  color: #4eb97e;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.jm2-group__heading {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

/* Нумерация в кружках нарисована в разметке, поэтому свою списку гасим. */
.jm2-office__list,
.jm2-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm2-office__list {
  gap: 8px;
}

.jm2-office__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jm2-counter {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 4px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.jm2-counter--sm {
  min-width: 20px;
  font-size: 12px;
  line-height: 16px;
}

.jm2-office__item-text {
  min-width: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

.jm2-list {
  gap: 8px;
}

.jm2-task {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.jm2-task__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 160px;
}

.jm2-task__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jm2-task__title {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-wrap: balance;
}

.jm2-task__desc {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

.jm2-task__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.jm2-reward {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 8px;
}

.jm2-currency {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.jm2-currency img {
  width: 16px;
  height: 16px;
}

.jm2-currency--sc {
  color: #e0aa28;
}

.jm2-currency--xp {
  color: #9555e1;
}

@media (max-width: 959px) {
  .jm2-group__heading {
    font-size: 20px;
    line-height: 28px;
  }
}

/* ------------------------------------------- панели зданий: общие дополнения

   Figma 74:17737 (Кампус), 215:7363 (Офис программ), 215:6528 (Hub Market). */

/* Сноска под списком — «Отмечайте пройденное…» (text/placeholder, 12/16). */
.jm2-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-wrap: pretty;
}

/* Галочка вместо счётчика у пройденного пункта. */
.jm2-tick {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  color: #51d165;
}

/* В цене Hub Market иконка и сумма крупнее, чем в наградах за задачи. */
.jm2-currency--lg {
  font-size: 14px;
  line-height: 20px;
}

.jm2-currency--lg img {
  width: 20px;
  height: 20px;
}

/* ------------------------------------------------------ MapContent: Hub Market

   Сетка предложений (Figma 215:6528): три колонки, карточки прижаты к верху
   своей строки — высота у них разная из-за длины названия. */
/* Карточки в ряду тянутся до одной высоты: названия у товаров разной длины,
   и без этого цена с автором пляшут по вертикали. */
.jm2-market__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}

.jm2-market__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

/* Картинка листинга — квадрат; у товара без картинки остаётся пустая плашка,
   как в макете. Обложки в маркетплейсе вертикальные (248×280), поэтому режем
   по центру, а не растягиваем. */
.jm2-market__image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(28, 28, 28, 0.2);
}

.jm2-market__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jm2-market__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.jm2-market__category {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-wrap: pretty;
}

/* Название в макете обрезается по ширине карточки, а не переносится бесконечно.
   Это ссылка на листинг — подчёркивание и цвет темы сайта здесь не нужны. */
.jm2-market__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  text-overflow: ellipsis;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.jm2-market__price {
  margin: 0;
}

.jm2-market__details {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.jm2-market__author {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.jm2-market__avatar {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

/* У компании без картинки маркетплейс отдаёт букву — показываем её. */
.jm2-market__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  font-weight: 500;
  line-height: 16px;
}

.jm2-market__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jm2-market__name {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jm2-market__rating {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.jm2-market__star {
  display: block;
  width: 16px;
  height: 16px;
  color: #4eb97e;
}

.jm2-market__rating-value {
  color: rgba(255, 255, 255, 0.8);
}

.jm2-market__rating-count {
  color: rgba(255, 255, 255, 0.6);
}

/* На узкой панели три колонки вырождаются в нечитаемые карточки. */
@media (max-width: 959px) {
  .jm2-market__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Обоснование вердикта: выбранные ответы по порядку. */
.jm2-quiz__answers-recap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.jm2-quiz__recap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
}

.jm2-quiz__recap-question {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.jm2-quiz__recap-option {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* 400 и 409 отдают готовый текст (ContextData city_errors). */
.jm2-office__error,
.jm2-quiz__error {
  margin: 8px 0 0;
  color: #f2777a;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-wrap: pretty;
}

.jm2-quiz__answer:disabled,
.jm2-quiz__reset:disabled {
  opacity: 0.5;
  cursor: progress;
}

/* ------------------------------------------------- анкета здания (док. 1.8)

   Показываются только незакрытые вопросы, ответ уходит сразу по выбору
   варианта или по кнопке «Ответить». Токены те же, что у остальных панелей. */
.jm2-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jm2-form__progress {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

.jm2-form__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
}

.jm2-form__title {
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-wrap: pretty;
}

.jm2-form__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Справочник на сотню значений (теги экспертизы) кнопками показать можно, но
   не во весь экран — ограничиваем высоту и прокручиваем. */
.jm2-form__choices--scroll {
  overflow-y: auto;
  max-height: 320px;
  padding-right: 4px;
}

/* Вопрос с файлом (file_input): кнопка выбора, список загруженного и подпись
   с ограничениями. Нативный input прячем — его вид не настраивается. */
.jm2-file {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.jm2-file__drop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px dashed rgba(227, 227, 227, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  cursor: pointer;
}

.jm2-file__drop:hover {
  border-color: rgba(227, 227, 227, 0.5);
}

.jm2-file__drop.is-busy {
  cursor: default;
  opacity: 0.6;
}

.jm2-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.jm2-file__hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 16px;
}

/* Вопрос-объект (object_input): форма из нескольких полей, кнопка добавления и
   список добавленных записей. */
.jm2-object {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.jm2-object__lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 20px;
}

.jm2-object__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm2-object__row {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

.jm2-object__remove {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.jm2-object__remove svg {
  display: block;
  width: 16px;
  height: 16px;
}

.jm2-object__remove:hover {
  color: #fff;
}

.jm2-object__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

.jm2-object__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jm2-object__label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 16px;
}

.jm2-object__checkbox {
  width: 16px;
  height: 16px;
}

/* Одиночный выбор из длинного справочника — нативный список со своей стрелкой,
   как в карточке компании: 224 страны кнопками не разложить. */
.jm2-form__select {
  position: relative;
  max-width: 420px;
}

.jm2-form__select-input {
  width: 100%;
  height: 40px;
  padding: 8px 36px 8px 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  appearance: none;
  cursor: pointer;
}

/* В тёмной панели список рисует система — задаём ему тёмный фон, иначе на
   части платформ он открывается белым. */
.jm2-form__select-input option {
  background: #1c1c1c;
  color: #fff;
}

.jm2-form__select-arrow {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.jm2-form__choice {
  padding: 8px 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}

.jm2-form__choice:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* выбранный вариант в множественном выборе — до отправки */
.jm2-form__choice.is-selected {
  border-color: #4eb97e;
  background: rgba(78, 185, 126, 0.2);
}

.jm2-form__choice:disabled {
  opacity: 0.5;
  cursor: progress;
}

.jm2-form__input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(227, 227, 227, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.jm2-form__input--area {
  resize: vertical;
}

.jm2-form__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* тип вопроса, под который в городе ещё нет поля */
.jm2-form__unsupported {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-wrap: pretty;
}