/* ============================================================
   ACA Marketplace — стили страницы продукта.

   Перенос из Figma: фрейм «Desktop» (node 1249:5330). Десять блоков —
   «Герой», «Что такое ACA Marketplace», «Стоимость и субсидия», «Как мы
   подбираем план», «Почему Averon», «Отзывы» (скрыт), «Как проходит
   оформление», «Когда можно оформить», «Вопросы и ответы» и
   «Консультация». Ноды каждого блока — в комментариях шаблона.

   Первый этап: только десктоп (макет 1440). Планшет (800) и мобильный
   (375) — следующим этапом, по брейкпоинтам .memory-bank/ui-rules.md.

   Файл подключается поверх base.css / landing.css, поэтому все правила
   скоупятся классом .aca (и .aca-page на <body>) — как у страницы
   Health ProtectorGuard. Блок «Нейтрализация» гасит то, что base.css
   навязывает элементам внутри страницы.

   Шрифт Hanken Grotesk объявлен в static/css/fonts.css. Рукописного
   Caveat (подпись агента и печать в блоке «Что такое») в проекте нет —
   до его подключения стоит системный рукописный шрифт.
   ============================================================ */

/* Запасной рукописный шрифт, пока в проекте нет Caveat. Системные
   рукописные гарнитуры заметно шире Caveat, и подпись с печатью
   вылезали бы из своих мест — size-adjust сводит их к его ширине.
   Когда Caveat подключат, он встанет первым в --font-hand и этот
   блок перестанет использоваться. */
@font-face {
  font-family: "Caveat Fallback";
  src: local("Segoe Print"), local("Bradley Hand"), local("Comic Sans MS");
  size-adjust: 60%;
}

/* --- Токены -------------------------------------------------
   Палитра — та же, что у главной и Health ProtectorGuard; добавлены
   оттенки, которые есть только в этом макете.
   ----------------------------------------------------------- */
.aca-page {
  --c-primary: #e25c42;
  --c-primary-hover: #c9462e;
  --c-primary-dark: #a8341f;
  --c-primary-soft: #fbeae3;
  --c-primary-line: #f2cfc3;
  --c-white: #ffffff;
  --c-page: #fdf8f4;
  --c-surface: #f5efe9;
  --c-border: #e4dcd5;
  --c-tile-border: #ddd2c8;
  --c-tile-accent: #e7d9cf;
  --c-muted: #8a817b;
  --c-secondary: #6e655f;
  --c-body: #4a433d;
  --c-ink: #2a2420;
  --c-green: #2e8b6e;

  --shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --font-hand: "Caveat", "Caveat Fallback", cursive;

  --pad-x: 120px;
  --pad-y: 96px;
  --content-w: 1200px;
  --section-gap: 64px;
  --head-gap: 24px;

  /* Типографика — стили макета Desktop/Tablet/Mobile. Иллюстрации
     (лупа, печать, календарь) держат свои размеры в пикселях: они
     масштабируются целиком, а не по буквам. */
  --fs-eyebrow: 22px;
  --lh-eyebrow: 30px;
  --ls-eyebrow: 5.5px;
  --fs-h1: 48px;
  --lh-h1: 58px;
  --fs-h2: 36px;
  --lh-h2: 44px;
  --fs-h3: 28px;
  --lh-h3: 36px;
  --fs-h4: 22px;
  --lh-h4: 30px;
  --fs-lead: 18px;
  --lh-lead: 28px;
  --fs-body: 16px;
  --lh-body: 24px;
  --fs-btn: 16px;
  --lh-btn: 22px;
  --fs-small: 14px;
  --lh-small: 20px;
  --fs-cap: 13px;
  --lh-cap: 18px;
  --btn-pad: 15px 32px;

  background-color: var(--c-page);
}

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Нижний край десктопа: раскладка макета Desktop, но поля 120px здесь
     съедали бы четверть экрана — таблица, календари и шаги сжимались.
     Поля как у планшета, остальное — десктоп. */
  .aca-page {
    --pad-x: 40px;
    --fs-h1: 40px;
    --lh-h1: 48px;
  }
}

@media (max-width: 1023px) {
  /* Tablet 800 (макет 1268:6305) */
  .aca-page {
    --pad-x: 40px;
    --pad-y: 72px;
    --section-gap: 48px;
    --head-gap: 16px;

    --fs-eyebrow: 18px;
    --lh-eyebrow: 26px;
    --ls-eyebrow: 4.5px;
    --fs-h1: 36px;
    --lh-h1: 44px;
    --fs-h2: 28px;
    --lh-h2: 36px;
    --fs-h3: 22px;
    --lh-h3: 30px;
    --fs-h4: 18px;
    --lh-h4: 26px;
    --fs-lead: 17px;
    --lh-lead: 26px;
    --fs-body: 15px;
    --lh-body: 22px;
    --fs-btn: 15px;
    --lh-btn: 22px;
    --fs-small: 13px;
    --lh-small: 18px;
    --fs-cap: 12px;
    --lh-cap: 16px;
    --btn-pad: 13px 24px;
  }
}

@media (max-width: 767px) {
  /* Mobile 375 (макет 1268:7851, рисован в 360) */
  .aca-page {
    --pad-x: 20px;
    --pad-y: 56px;
    --section-gap: 32px;
    --head-gap: 12px;

    --fs-eyebrow: 13px;
    --lh-eyebrow: 18px;
    --ls-eyebrow: 3.25px;
    --fs-h1: 28px;
    --lh-h1: 34px;
    --fs-h2: 22px;
    --lh-h2: 28px;
    --fs-h3: 18px;
    --lh-h3: 24px;
    --fs-h4: 16px;
    --lh-h4: 22px;
    --fs-lead: 16px;
    --lh-lead: 24px;
    --fs-body: 14px;
    --lh-body: 20px;
    --fs-btn: 14px;
    --lh-btn: 18px;
    --fs-small: 12px;
    --lh-small: 16px;
    --fs-cap: 11px;
    --lh-cap: 14px;
    --btn-pad: 14px 20px;
  }
}

/* --- Нейтрализация ------------------------------------------ */
.aca *,
.aca *::before,
.aca *::after {
  box-sizing: border-box;
}

.aca section {
  margin: 0;
  overflow: visible;
}

.aca h1,
.aca h2,
.aca h3,
.aca p,
.aca dl,
.aca dt,
.aca dd,
.aca th,
.aca td,
.aca legend,
.aca fieldset {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  color: inherit;
  text-align: inherit;
}

.aca fieldset {
  border: 0;
  min-width: 0;
}

.aca ul,
.aca ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aca a {
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

.aca img {
  display: block;
  max-width: 100%;
  object-fit: initial;
  object-position: initial;
}

.aca button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

.aca input {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font: inherit;
  color: inherit;
  transition: none;
}

.aca table {
  border-collapse: separate;
}

.aca summary {
  list-style: none;
  cursor: pointer;
}

.aca summary::-webkit-details-marker {
  display: none;
}

.aca .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Каркас и общие элементы -------------------------------- */
/* overflow-x: clip — страховка: декор (въезжающая лупа, тени карусели)
   не должен давать горизонтальную прокрутку. clip, а не hidden: он не
   делает страницу контейнером прокрутки. */
.aca {
  overflow-x: clip;
  background-color: var(--c-page);
  color: var(--c-body);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Секция с шапкой по центру: отступы 96/120, ширина контента 1200. */
.aca .aca-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  padding: var(--pad-y) var(--pad-x);
}

.aca .aca-section > * {
  width: 100%;
  max-width: var(--content-w);
}

/* display: flex у секций и панелей перебил бы атрибут hidden. */
.aca [hidden] {
  display: none !important;
}

.aca .aca-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--head-gap);
  text-align: center;
}

.aca .aca-eyebrow {
  color: var(--c-primary);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
}

.aca .aca-title {
  color: var(--c-body);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: -0.18px;
}

.aca .aca-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.aca .aca-head__lead {
  width: 100%;
}

.aca .aca-head__lead--narrow {
  max-width: 720px;
}

.aca .aca-label {
  color: var(--c-primary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 700;
  letter-spacing: 0.28px;
}

.aca .aca-card {
  background-color: var(--c-white);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.aca .aca-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: var(--btn-pad);
  border-radius: 8px;
  background-color: var(--c-primary);
  color: var(--c-white);
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.aca .aca-button:hover {
  background-color: var(--c-primary-hover);
}

.aca .aca-button--block {
  width: 100%;
}

.aca .aca-button--wide {
  width: 100%;
  max-width: 300px;
}

.aca .aca-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.aca .aca-cta--wide {
  gap: 12px;
}

.aca .aca-cta__note {
  color: var(--c-muted);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
  text-align: center;
}

.aca .aca-chip {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: var(--c-surface);
  color: var(--c-body);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.13px;
  white-space: nowrap;
}

.aca .aca-chip--accent {
  padding: 3px 9px;
  background-color: var(--c-primary-soft);
  color: var(--c-primary-dark);
}

.aca .aca-icon-circle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: var(--c-primary-soft);
}

.aca .aca-icon-circle--small {
  width: 40px;
  height: 40px;
}

/* Список с зелёными галочками: карточка плана в герое и лист подбора. */
.aca .aca-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aca .aca-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-checks li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("../images/aca_marketplace/what-circle-check.svg") center / contain no-repeat;
}

.aca .aca-checks--small {
  gap: 6px;
}

.aca .aca-checks--small li {
  gap: 8px;
}

.aca .aca-checks--small li::before {
  width: 14px;
  height: 14px;
  background-image: url("../images/aca_marketplace/hero-circle-check.svg");
}

/* ============================================================
   Герой. Источник: Figma, node 1268:5751.

   Текст слева, справа — лупа над полем карточек-планов 540×500.
   Плитки поля и плитки под стеклом — одна и та же плитка в двух
   масштабах: вся её геометрия умножается на --k (1 в поле, 2.3 под
   стеклом, как в макете), а рамка остаётся в 1px — простое
   transform: scale раздуло бы и её.
   ============================================================ */
.aca .aca-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 48px 45px;
  padding: 72px var(--pad-x) 88px;
}

.aca .aca-hero__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  min-width: 420px;
  max-width: 655px;
}

.aca .aca-hero__headline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aca .aca-hero__title {
  color: var(--c-body);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  letter-spacing: -0.48px;
}

.aca .aca-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.aca .aca-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.aca .aca-hero__link {
  color: var(--c-primary);
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: 500;
}

.aca .aca-hero__link:hover {
  color: var(--c-primary-hover);
}

.aca .aca-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.aca .aca-hero__fact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  white-space: nowrap;
}

.aca .aca-hero__visual {
  position: relative;
  flex: none;
  width: 540px;
  height: 500px;
}

/* Плитка-план: три серые строки на белой карточке. */
.aca .aca-tile {
  --k: 1;
  position: relative;
  flex: none;
  width: calc(64px * var(--k));
  height: calc(42px * var(--k));
  border: 1px solid var(--c-tile-border);
  border-radius: calc(8px * var(--k));
  background-color: var(--c-white);
}

/* Строки плитки: заголовок (::before), строка текста (::after) и
   короткая строка (вложенный span). Отступы в макете считаются от
   внешнего края рамки и растут с масштабом чуть быстрее размеров:
   x·k + (k − 2)px — это 6px в поле и 16.4px под стеклом. */
.aca .aca-tile::before,
.aca .aca-tile::after,
.aca .aca-tile > span {
  content: "";
  position: absolute;
  left: calc(7px * var(--k) + (var(--k) - 2) * 1px);
  background-color: var(--c-surface);
}

/* Заголовок плитки: цвет чередуется по колонкам. */
.aca .aca-tile::before {
  top: calc(8px * var(--k) + (var(--k) - 2) * 1px);
  width: calc(18px * var(--k));
  height: calc(7px * var(--k));
  border-radius: calc(3px * var(--k));
  background-color: var(--c-border);
}

.aca .aca-hero__row .aca-tile:nth-child(3n + 2)::before {
  background-color: var(--c-tile-accent);
}

.aca .aca-hero__row .aca-tile:nth-child(3n)::before {
  background-color: var(--c-primary-soft);
}

.aca .aca-tile::after {
  top: calc(21px * var(--k) + (var(--k) - 2) * 1px);
  width: calc(48px * var(--k));
  height: calc(5px * var(--k));
  border-radius: calc(2px * var(--k));
}

.aca .aca-tile > span {
  top: calc(29px * var(--k) + (var(--k) - 2) * 1px);
  width: calc(28.8px * var(--k));
  height: calc(5px * var(--k));
  border-radius: calc(2px * var(--k));
}

/* Сцена героя в размерах макета; координаты поля и лупы считаются от неё. */
.aca .aca-hero__stage {
  position: relative;
  width: 540px;
  height: 500px;
}

.aca .aca-hero__field {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.aca .aca-hero__rows {
  position: absolute;
  top: -6px;
  left: -74px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aca .aca-hero__row {
  display: flex;
  gap: calc(10px * var(--k, 1));
}

.aca .aca-hero__rows .aca-hero__row:nth-child(even) {
  margin-left: 37px;
}

/* Виньетка: поле растворяется к краям. Центр и радиусы — из макета. */
.aca .aca-hero__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(270px 250px at 270px 250px,
      rgba(253, 248, 244, 0) 50%,
      rgba(253, 248, 244, 0.7) 85%,
      var(--c-page) 100%);
}

.aca .aca-hero__loupe {
  position: absolute;
  left: 114px;
  top: 78px;
  width: 412px;
  height: 412px;
}

/* Ручка и муфта повёрнуты на −45°; координаты — центры из макета. */
.aca .aca-hero__handle,
.aca .aca-hero__collar {
  position: absolute;
  transform: rotate(-45deg);
}

.aca .aca-hero__handle {
  left: 271.05px;
  top: 205.25px;
  width: 28px;
  height: 132px;
  border-radius: 14px;
  background-color: var(--c-body);
}

.aca .aca-hero__collar {
  left: 220.1px;
  top: 203.65px;
  width: 36px;
  height: 22px;
  border-radius: 6px;
  background-color: var(--c-ink);
}

.aca .aca-hero__glass {
  position: absolute;
  left: 0;
  top: 0;
  width: 272px;
  height: 272px;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--c-page);
}

/* Внутренняя тень стекла — поверх содержимого. */
.aca .aca-hero__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 4px 16px rgba(42, 36, 32, 0.12);
  pointer-events: none;
}

.aca .aca-hero__zoom {
  --k: 2.3;
  position: absolute;
  left: -125.1px;
  top: -139.6px;
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--k));
}

.aca .aca-hero__zoom .aca-tile {
  --k: 2.3;
}

.aca .aca-hero__zoom .aca-hero__row:nth-child(even) {
  margin-left: calc(-37px * var(--k));
}

.aca .aca-hero__plan {
  position: absolute;
  left: 38px;
  top: 45px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 196px;
  padding: 16px;
  border: 2px solid var(--c-primary);
  border-radius: 14px;
  background-color: var(--c-white);
  box-shadow: 0 10px 24px rgba(42, 36, 32, 0.14);
}

.aca .aca-hero__plan-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aca .aca-hero__plan-type {
  color: var(--c-muted);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.13px;
}

.aca .aca-hero__plan-title {
  color: var(--c-ink);
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  white-space: nowrap;
}

.aca .aca-hero__ring {
  position: absolute;
  left: -42px;
  top: -28px;
  width: 356px;
  height: 356px;
  max-width: none;
}

.aca .aca-hero__glare {
  position: absolute;
  left: 21.63px;
  top: 26.12px;
  width: 74.35px;
  height: 83.67px;
}

/* ============================================================
   Что такое ACA Marketplace. Источник: Figma, node 1268:5587.

   Лист подбора лежит на столе под −2°, за ним второй лист под 6°,
   сверху печать под 14°. Позиции — центры элементов из макета:
   поворот идёт вокруг центра, поэтому так они совпадают точно.
   ============================================================ */
.aca .aca-what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 56px 80px;
  padding: 120px;
}

.aca .aca-what__visual {
  position: relative;
  flex: none;
  width: 520px;
  height: 560px;
}

.aca .aca-what__desk {
  position: absolute;
  left: 0;
  top: 56px;
  width: 440px;
  height: 480px;
  border-radius: 32px;
  background-color: var(--c-surface);
}

/* Задний лист — только строки-заглушки, поэтому они нарисованы фоном. */
.aca .aca-what__sheet-back {
  position: absolute;
  left: 127.07px;
  top: 57.66px;
  width: 360px;
  height: 420px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background:
    linear-gradient(var(--c-surface), var(--c-surface)) 26px 30px / 120px 8px no-repeat,
    linear-gradient(var(--c-surface), var(--c-surface)) 26px 58px / 220px 10px no-repeat,
    linear-gradient(var(--c-surface), var(--c-surface)) 26px 108px / 300px 6px no-repeat,
    linear-gradient(var(--c-surface), var(--c-surface)) 26px 126px / 260px 6px no-repeat,
    linear-gradient(var(--c-surface), var(--c-surface)) 26px 144px / 280px 6px no-repeat,
    var(--c-white);
  box-shadow: 0 8px 24px rgba(42, 36, 32, 0.06);
  transform: rotate(6deg);
}

.aca .aca-what__sheet {
  position: absolute;
  left: 48px;
  top: 13px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 392px;
  padding: 32px 32px 28px;
  border-radius: 14px;
  background-color: var(--c-white);
  box-shadow: 0 20px 48px rgba(42, 36, 32, 0.12), 0 1px 2px rgba(42, 36, 32, 0.05);
  transform: rotate(-2deg);
}

.aca .aca-what__sheet-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aca .aca-what__sheet-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.aca .aca-what__sheet-title {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 700;
  letter-spacing: 0.28px;
}

.aca .aca-what__sheet-note {
  color: var(--c-muted);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
}

.aca .aca-what__sum {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aca .aca-what__sum-row {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* Пунктир-«отточие» между подписью и суммой. */
.aca .aca-what__sum-row dt {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 10px;
}

.aca .aca-what__sum-row dt::after {
  content: "";
  flex: 1 0 0;
  min-width: 1px;
  height: 1px;
  border-bottom: 1.5px dashed var(--c-border);
}

.aca .aca-what__sum-row--total {
  align-items: baseline;
  padding-top: 12px;
  border-top: 1.5px solid var(--c-ink);
}

.aca .aca-what__sum-row--total dt {
  align-self: center;
  color: var(--c-ink);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
}

.aca .aca-what__sum-row--total dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.aca .aca-what__sum-value {
  color: var(--c-ink);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: -0.18px;
}

.aca .aca-what__sum-unit {
  color: var(--c-muted);
}

.aca .aca-what__checks {
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}

.aca .aca-what__signature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}

.aca .aca-what__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.aca .aca-what__agent {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
}

.aca .aca-what__agent-name {
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-what__agent-role {
  color: var(--c-muted);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
}

.aca .aca-what__autograph {
  color: var(--c-ink);
  font-family: var(--font-hand);
  font-size: 26px;
  line-height: 1;
  white-space: nowrap;
}

.aca .aca-what__stamp {
  position: absolute;
  left: 353.88px;
  top: 265.82px;
  width: 104px;
  height: 104px;
  color: var(--c-primary-dark);
  text-align: center;
  opacity: 0.9;
  transform: rotate(14deg);
}

.aca .aca-what__stamp-ring {
  position: absolute;
  left: 0;
  top: 0;
}

.aca .aca-what__stamp-ring--inner {
  left: 7px;
  top: 7px;
}

.aca .aca-what__stamp-word,
.aca .aca-what__stamp-by {
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
}

.aca .aca-what__stamp-word {
  top: 34px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.28px;
}

.aca .aca-what__stamp-by {
  top: 52px;
  font-family: var(--font-hand);
  font-size: 24px;
  line-height: 1;
}

.aca .aca-what__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  min-width: 400px;
  max-width: 600px;
}

.aca .aca-what__headline {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aca .aca-what__title {
  color: var(--c-body);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: -0.18px;
}

.aca .aca-what__guarantees {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.aca .aca-what__guarantee {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.aca .aca-what__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-primary-dark);
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: 500;
}

/* ============================================================
   Стоимость и субсидия. Источник: Figma, node 1249:5373.

   Карточка калькулятора: шапка, слева три вопроса, справа результат.
   В макете у каждой части своя рамка; здесь рамка одна у карточки,
   а разделители — у частей, чтобы линии не удваивались.
   ============================================================ */
.aca .aca-calc__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background-color: var(--c-white);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.aca .aca-calc__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px;
  border-bottom: 1px solid var(--c-border);
}

.aca .aca-calc__bar-title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
}

.aca .aca-calc__body {
  display: flex;
  align-items: stretch;
}

.aca .aca-calc__questions {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 1px;
  padding: 0 32px;
  border-right: 1px solid var(--c-border);
}

.aca .aca-calc__question {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--c-border);
}

.aca .aca-calc__question:last-child {
  border-bottom: 0;
}

.aca .aca-calc__ask {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  /* float снимает с legend особую раскладку «рамки fieldset»: legend
     становится обычным flex-элементом, и gap работает как у соседей. */
  float: left;
}

.aca .aca-calc__ask > img {
  flex: none;
  margin-top: 2px;
}

.aca .aca-calc__ask > span {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
}

.aca .aca-calc__ask-title {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.aca .aca-calc__ask-hint {
  color: var(--c-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-calc__field {
  padding-left: 40px;
}

.aca .aca-calc__stepper,
.aca .aca-calc__money {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px;
  height: 56px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(42, 36, 32, 0.04);
}

.aca .aca-calc__stepper {
  justify-content: space-between;
  padding: 0 6px;
}

.aca .aca-calc__step {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: var(--c-surface);
  cursor: pointer;
}

.aca .aca-calc__step:disabled {
  cursor: default;
}

.aca .aca-calc__count {
  width: 60px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.aca .aca-calc__count::-webkit-inner-spin-button,
.aca .aca-calc__count::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.aca .aca-calc__money {
  gap: 8px;
  padding: 0 16px;
  cursor: text;
}

.aca .aca-calc__money-input {
  flex: 1 0 0;
  min-width: 1px;
  height: 100%;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.aca .aca-calc__scale {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Ползунок: дорожка и заливка — свои, у самого input они прозрачные.
   Input шире дорожки на полкружка с каждой стороны, поэтому центр
   кружка стоит ровно на конце заливки. */
.aca .aca-calc__slider {
  position: relative;
  height: 50px;
}

.aca .aca-calc__slider::before,
.aca .aca-calc__slider::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  height: 6px;
  border-radius: 3px;
}

.aca .aca-calc__slider::before {
  right: 0;
  background-color: var(--c-surface);
}

.aca .aca-calc__slider::after {
  width: var(--fill);
  background-color: var(--c-primary);
}

.aca .aca-calc__range {
  position: absolute;
  z-index: 1;
  top: 3px;
  left: -12px;
  width: calc(100% + 24px);
  height: 24px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.aca .aca-calc__range::-webkit-slider-runnable-track {
  height: 24px;
  background: transparent;
}

.aca .aca-calc__range::-moz-range-track {
  height: 24px;
  background: transparent;
}

.aca .aca-calc__range::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  border: 2px solid var(--c-primary);
  border-radius: 50%;
  background-color: var(--c-white);
  box-shadow: 0 2px 6px rgba(42, 36, 32, 0.16);
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}

.aca .aca-calc__range::-moz-range-thumb {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  border: 2px solid var(--c-primary);
  border-radius: 50%;
  background-color: var(--c-white);
  box-shadow: 0 2px 6px rgba(42, 36, 32, 0.16);
  cursor: grab;
}

.aca .aca-calc__tick {
  position: absolute;
  top: 24px;
  width: 2px;
  height: 8px;
  border-radius: 1px;
  background-color: var(--c-muted);
  transform: translateX(-50%);
}

.aca .aca-calc__tick--fpl100 {
  left: 16.667%;
}

.aca .aca-calc__tick--fpl400 {
  left: 66.667%;
}

.aca .aca-calc__mark {
  position: absolute;
  top: 36px;
  color: var(--c-secondary);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
  white-space: nowrap;
}

.aca .aca-calc__mark--start {
  left: 0;
}

.aca .aca-calc__mark--fpl100 {
  left: 16.667%;
  transform: translateX(-50%);
}

.aca .aca-calc__mark--fpl400 {
  left: 66.667%;
  transform: translateX(-50%);
}

.aca .aca-calc__mark--end {
  right: 0;
}

.aca .aca-calc__zone {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border-radius: 10px;
  background-color: var(--c-primary-soft);
  color: var(--c-primary-dark);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-calc__zone img {
  flex: none;
  margin-top: 2px;
}

.aca .aca-calc__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Выбранная карточка в макете — рамка 2px без заливки, остальные —
   белые с рамкой 1px. Второй пиксель — внутренняя тень, чтобы
   содержимое не сдвигалось при выборе. */
.aca .aca-calc__radio {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  height: 56px;
  padding: 0 18px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background-color: var(--c-white);
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  cursor: pointer;
}

.aca .aca-calc__radio:has(input:checked) {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px var(--c-border);
}

.aca .aca-calc__radio input {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--c-muted);
  border-radius: 50%;
  background-color: var(--c-white);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.aca .aca-calc__radio input:checked {
  border: 0;
  background: url("../images/aca_marketplace/calc-radio.svg") center / 20px 20px no-repeat;
}

.aca .aca-calc__radio input:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}

.aca .aca-calc__result {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: 400px;
  max-width: 514px;
  padding: 32px;
  background-color: var(--c-page);
}

.aca .aca-calc__estimate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.aca .aca-calc__estimate-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.aca .aca-calc__estimate-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: -0.18px;
}

.aca .aca-calc__estimate-note {
  color: var(--c-muted);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
}

.aca .aca-calc__estimate-note a {
  color: var(--c-primary);
}

.aca .aca-calc__outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.aca .aca-calc__status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Статус результата: «субсидия доступна» или «субсидии нет» — второй
   показывается, когда расчёт ставит .is-no-subsidy. */
.aca .aca-calc__status-yes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aca .aca-calc__status-no {
  display: none;
  color: var(--c-secondary);
}

.aca .aca-calc__result.is-no-subsidy .aca-calc__status-yes {
  display: none;
}

.aca .aca-calc__result.is-no-subsidy .aca-calc__status-no {
  display: block;
}

/* Зона вне субсидии — нейтральным тоном, а не фирменным. */
.aca .aca-calc__zone.is-off {
  background-color: var(--c-surface);
  color: var(--c-secondary);
}

.aca .aca-calc__step:disabled img {
  opacity: 0.5;
}

.aca .aca-calc__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.aca .aca-calc__price-value {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  letter-spacing: -0.48px;
}

.aca .aca-calc__price-unit {
  color: var(--c-muted);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
}

.aca .aca-calc__split {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.aca .aca-calc__split-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-calc__bars {
  display: flex;
  gap: 3px;
  height: 12px;
}

.aca .aca-calc__bar-pay {
  flex: none;
  width: var(--share);
  transition: width 0.45s cubic-bezier(0.33, 0, 0.2, 1);
  border-radius: 6px 2px 2px 6px;
  background-color: var(--c-primary);
}

.aca .aca-calc__bar-subsidy {
  flex: 1 0 0;
  border: 1px solid var(--c-primary-line);
  border-radius: 2px 6px 6px 2px;
  background-color: var(--c-primary-soft);
}

.aca .aca-calc__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.aca .aca-calc__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-calc__legend-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.aca .aca-calc__legend-item--pay::before {
  background-color: var(--c-primary);
}

.aca .aca-calc__legend-item--subsidy::before {
  border: 1px solid var(--c-primary-line);
  background-color: var(--c-primary-soft);
}

.aca .aca-calc__how {
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--c-border);
}

/* Стрелка как в макете: у свёрнутого — вверх, у раскрытого — вниз. */
.aca .aca-calc__how-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.aca .aca-calc__how-toggle img {
  transform: scaleY(-1);
}

.aca .aca-calc__how[open] .aca-calc__how-toggle img {
  transform: none;
}

.aca .aca-calc__how-text {
  padding-top: 12px;
  color: var(--c-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* ============================================================
   Как мы подбираем план. Источник: Figma, node 1249:5675.
   ============================================================ */
.aca .aca-pick__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Карточки — первая строка сетки, ответы — вторая, во всю ширину.
   Обёртка пары растворяется, чтобы её части встали в общую сетку;
   на мобильном она снова становится карточкой карусели. */
.aca .aca-pick__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 32px;
  width: 100%;
}

.aca .aca-pick__item {
  display: contents;
}

.aca .aca-pick__card {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1px;
  aspect-ratio: 1;
  padding: 32px;
  border-radius: 16px;
  background-color: var(--c-white);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.aca .aca-pick__card img {
  width: 100%;
  max-width: 250px;
  height: auto;
  aspect-ratio: 1;
}

.aca .aca-pick__card:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
}

.aca .aca-pick__panel {
  grid-row: 2;
  grid-column: 1 / -1;
  display: none;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 64px;
  border-radius: 16px;
  background-color: var(--c-white);
  box-shadow: var(--shadow);
}

.aca .aca-pick__panel.is-active {
  display: flex;
}

.aca .aca-pick__answer-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}

.aca .aca-pick__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aca .aca-pick__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--c-muted);
}

.aca .aca-pick__dot.is-active {
  width: 10px;
  height: 10px;
  background-color: var(--c-primary);
}

/* ============================================================
   Почему Averon. Источник: Figma, node 1249:5522.

   Таблица на border-spacing: 16px между колонками, как в макете.
   Подложки колонок (серая «самостоятельно» и белая с рамкой «с
   Averon») — слой под таблицей с той же сеткой 288/440/440, поэтому
   тень и скругления у колонки общие, а не по ячейкам.
   ============================================================ */
.aca .aca-why .aca-head__lead--narrow {
  max-width: 760px;
}

.aca .aca-why__content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.aca .aca-why__table {
  position: relative;
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 8px 0;
  border-spacing: 16px 0;
  table-layout: fixed;
}

.aca .aca-why__table::before,
.aca .aca-why__table::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  border-radius: 24px;
}

/* Колонки: критерий — 288px, две другие делят остаток поровну (при
   ширине контента 1200 это 440/440, как в макете). Ширина первой
   колонки задана в пикселях не случайно: calc() с процентами у ячеек
   таблицы Chrome не применяет, и колонки расходились с подложками.
   По краям таблицы тоже зазор 16px — отсюда 16 + 288 + 16 = 320 и
   100% − 352 (четыре зазора и первая колонка). */
.aca .aca-why__table::before {
  left: 320px;
  width: calc((100% - 352px) / 2);
  background-color: var(--c-surface);
}

.aca .aca-why__table::after {
  right: 16px;
  width: calc((100% - 352px) / 2);
  border: 1.5px solid var(--c-primary);
  background-color: var(--c-white);
  box-shadow: var(--shadow);
}

.aca .aca-why__table thead,
.aca .aca-why__table tbody {
  position: relative;
  z-index: 1;
}

.aca .aca-why__corner {
  width: 288px;
}

.aca .aca-why__table th,
.aca .aca-why__table td {
  position: relative;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-border);
}

.aca .aca-why__table tbody tr:last-child th,
.aca .aca-why__table tbody tr:last-child td {
  border-bottom: 0;
}

.aca .aca-why__col {
  height: 112px;
  padding: 0 28px;
  text-align: left;
}

.aca .aca-why__col-title,
.aca .aca-why__col-note {
  display: block;
  white-space: nowrap;
}

.aca .aca-why__col-title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 600;
}

.aca .aca-why__col-note {
  margin-top: 4px;
  color: var(--c-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-why__col--averon .aca-why__col-title {
  color: var(--c-ink);
}

/* Место под бейдж «Бесплатно» справа: без него длинная подпись колонки
   на узком десктопе уходила под бейдж. */
.aca .aca-why__col--averon .aca-why__col-name {
  display: block;
  padding-right: 112px;
}

.aca .aca-why__col--averon .aca-why__col-note {
  white-space: normal;
}

.aca .aca-why__badge {
  position: absolute;
  right: 28px;
  top: 50%;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: var(--c-primary-dark);
  color: var(--c-white);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 700;
  letter-spacing: 0.28px;
  white-space: nowrap;
  transform: translateY(-50%);
}

.aca .aca-why__criterion {
  height: 96px;
  padding: 16px 0 16px 54px;
  color: var(--c-ink);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
  text-align: left;
}

.aca .aca-why__criterion .aca-icon-circle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.aca .aca-why__self,
.aca .aca-why__averon {
  height: 96px;
  padding: 16px 28px;
}

.aca .aca-why__self--strong {
  color: var(--c-ink);
  font-weight: 500;
}

.aca .aca-why__averon {
  color: var(--c-ink);
  font-weight: 500;
}

/* Подпись критерия в ячейке нужна только на планшете и мобильном (там
   нет колонки критериев), строка «Самостоятельно: …» — только на
   мобильном (там нет колонки «Самостоятельно»). На десктопе обе скрыты. */
.aca .aca-why__label,
.aca .aca-why__alt {
  display: none;
}

.aca .aca-why__averon .aca-why__value {
  position: relative;
  display: block;
  padding-left: 38px;
}

.aca .aca-why__averon .aca-why__value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: url("../images/aca_marketplace/why-check.svg") center / 14px 14px no-repeat var(--c-primary-soft);
  transform: translateY(-50%);
}

.aca .aca-why__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 28px 32px;
  border-radius: 24px;
  background-color: var(--c-primary-soft);
}

.aca .aca-why__facts {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  gap: 32px;
  min-width: 540px;
}

.aca .aca-why__fact {
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 2px;
}

.aca .aca-why__fact + .aca-why__fact::before {
  content: "";
  position: absolute;
  left: -16.5px;
  top: 50%;
  width: 1px;
  height: 36px;
  background-color: var(--c-border);
  transform: translateY(-50%);
}

.aca .aca-why__fact dt {
  color: var(--c-ink);
  font-weight: 600;
}

.aca .aca-why__fact dd {
  color: var(--c-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* ============================================================
   Отзывы. Источник: Figma, node 1249:7771. Блок скрыт (hidden),
   стили оставлены, чтобы вернуть его одной правкой разметки.
   ============================================================ */
.aca .aca-stories {
  gap: 32px;
}

.aca .aca-stories .aca-head {
  gap: 16px;
}

.aca .aca-stories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "daniel priya priya"
    "daniel elena jordan"
    "marcus marcus wes";
  gap: 16px;
  max-width: 1280px;
}

.aca .aca-story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background-color: var(--c-white);
}

.aca .aca-story--mini {
  justify-content: center;
  border-color: var(--c-surface);
  background-color: var(--c-surface);
}

.aca .aca-story--daniel { grid-area: daniel; min-height: 406px; }
.aca .aca-story--priya { grid-area: priya; }
.aca .aca-story--elena { grid-area: elena; }
.aca .aca-story--jordan { grid-area: jordan; }
.aca .aca-story--marcus { grid-area: marcus; }
.aca .aca-story--wes { grid-area: wes; justify-content: space-between; min-height: 212px; }

.aca .aca-story__author {
  display: flex;
  align-items: center;
  gap: 24px;
}

.aca .aca-story__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
}

.aca .aca-story__who {
  display: flex;
  flex-direction: column;
}

.aca .aca-story__meta,
.aca .aca-story__line {
  color: var(--c-muted);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
}

.aca .aca-story__line {
  display: flex;
  gap: 8px;
}

/* ============================================================
   Как проходит оформление. Источник: Figma, node 1249:5979.
   ============================================================ */
.aca .aca-steps__list {
  display: flex;
  gap: 48px;
}

.aca .aca-step {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 20px;
  min-width: 1px;
}

.aca .aca-step__track {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
}

/* Линия к следующему шагу; у последнего её нет. */
.aca .aca-step__track::after {
  content: "";
  flex: 1 0 0;
  height: 1.5px;
  background-color: var(--c-border);
}

.aca .aca-step--done .aca-step__track::after {
  content: none;
}

.aca .aca-step__marker {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--c-border);
  border-radius: 50%;
  background-color: var(--c-white);
}

.aca .aca-step--done .aca-step__marker {
  border: 0;
  background-color: var(--c-primary);
}

.aca .aca-step__label {
  color: var(--c-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 700;
  letter-spacing: 0.28px;
  white-space: nowrap;
}

.aca .aca-step__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 600;
}

/* Заголовок и текст шага стоят плотнее, чем остальные части шага. */
.aca .aca-step__text {
  margin-top: -10px;
}

.aca .aca-step__text a {
  color: var(--c-primary);
}

/* ============================================================
   Когда можно оформить. Источник: Figma, node 1249:5775.

   Неделя календаря — сетка из семи колонок; дни одной недели с
   одинаковым статусом собраны в «пилюлю», которая встаёт в сетку
   с колонки --from на --span колонок (значения из разметки).
   ============================================================ */
.aca .aca-when__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.aca .aca-when__open {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
  padding: 48px;
}

.aca .aca-when__open-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.aca .aca-when__period {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aca .aca-when__dates {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}

.aca .aca-when__status {
  flex: none;
  padding: 10px 16px;
  border-radius: 999px;
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 700;
  letter-spacing: 0.28px;
  white-space: nowrap;
}

.aca .aca-when__months {
  display: flex;
  gap: 64px;
}

.aca .aca-cal {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  min-width: 1px;
}

.aca .aca-cal__title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
}

/* Высота сетки постоянная (заголовок и шесть недель по 36px), чтобы
   месяцы из пяти и шести недель стояли вровень. */
.aca .aca-cal__grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 300px;
}

.aca .aca-cal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  height: 36px;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.13px;
  text-align: center;
}

.aca .aca-cal__weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  text-transform: capitalize;
}

.aca .aca-cal__run {
  display: flex;
  grid-column: var(--from) / span var(--span);
  border-radius: 18px;
}

.aca .aca-cal__run--early {
  background-color: var(--c-primary-soft);
  color: var(--c-primary);
}

.aca .aca-cal__run--late {
  background-color: var(--c-surface);
}

.aca .aca-cal__day {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-width: 1px;
  height: 36px;
}

.aca .aca-cal__day--today {
  border-radius: 36px;
  background-color: var(--c-primary-dark);
  color: var(--c-white);
}

/* Полоса периода — только мобильная замена календарей. */
.aca .aca-when__bar {
  display: none;
}

.aca .aca-when__legend {
  display: flex;
  gap: 32px;
}

.aca .aca-when__legend-item {
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  gap: 14px;
}

.aca .aca-when__legend-item > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.aca .aca-when__swatch {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  border-radius: 6px;
}

.aca .aca-when__swatch--early {
  background-color: var(--c-primary-soft);
}

.aca .aca-when__swatch--late {
  background-color: var(--c-surface);
}

.aca .aca-when__swatch--closed {
  border: 1px dashed var(--c-muted);
  background-color: var(--c-white);
}

.aca .aca-when__legend-title {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
}

.aca .aca-when__legend-text {
  color: var(--c-muted);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
}

.aca .aca-when__row {
  display: flex;
  align-items: stretch;
  gap: 32px;
  width: 100%;
}

.aca .aca-when__special {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 32px;
  min-width: 1px;
  padding: 48px;
}

.aca .aca-when__events {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 8px;
}

.aca .aca-when__event {
  padding: 8px 16px;
  border-radius: 999px;
  background-color: var(--c-surface);
  white-space: nowrap;
}

.aca .aca-when__signup {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-width: 320px;
  max-width: 379px;
  min-height: 425px;
  padding: 32px;
  border: 2px solid var(--c-white);
  border-radius: 16px;
  background-color: var(--c-primary-soft);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.aca .aca-when__signup-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.aca .aca-when__signup-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}

.aca .aca-when__signup .aca-cta {
  gap: 16px;
  width: 100%;
}

.aca .aca-when__footnote {
  color: var(--c-muted);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
  text-align: center;
}

/* ============================================================
   Вопросы и ответы. Источник: Figma, node 1249:6048.

   Колонки строки: номер 66px, текст, стрелка 66px, зазор 8px. Ответ
   живёт вне <summary>, поэтому отступает на ширину номера и стрелки.
   ============================================================ */
.aca .aca-faq__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.aca .aca-faq__item {
  padding: 32px 0;
  border-bottom: 1px solid var(--c-border);
}

.aca .aca-faq__item:last-child {
  border-bottom: 0;
}

.aca .aca-faq__question {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
}

.aca .aca-faq__num {
  flex: none;
  width: 66px;
  color: var(--c-muted);
  text-align: center;
}

.aca .aca-faq__q {
  flex: 1 0 0;
  color: var(--c-ink);
}

.aca .aca-faq__question::after {
  content: "";
  flex: none;
  width: 66px;
  height: 30px;
  background: url("../images/aca_marketplace/faq-chevron.svg") center / 30px 30px no-repeat;
}

/* Состояние «раскрыт»: без JS — атрибут open, с JS — data-aca-open,
   который переключается сразу по клику, пока высота ещё едет. */
.aca .aca-faq__item[open]:not(.is-enhanced) .aca-faq__num,
.aca .aca-faq__item[data-aca-open] .aca-faq__num {
  color: var(--c-primary);
}

.aca .aca-faq__item[open]:not(.is-enhanced) .aca-faq__question::after,
.aca .aca-faq__item[data-aca-open] .aca-faq__question::after {
  background-image: url("../images/aca_marketplace/faq-chevron-open.svg");
  transform: scaleY(-1);
}

.aca .aca-faq__answer {
  margin-top: 8px;
  padding: 0 74px;
}

/* ============================================================
   Консультация. Источник: Figma, node 1249:6154.
   ============================================================ */
.aca .aca-consult__content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.aca .aca-consult__chat,
.aca .aca-consult__form {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  background-color: var(--c-white);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

.aca .aca-consult__chat {
  min-width: 1px;
  padding: 48px;
}

.aca .aca-consult__form {
  align-self: stretch;
  min-width: 360px;
  max-width: 450px;
  padding: 32px;
}

.aca .aca-consult__chat-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.aca .aca-consult__chat-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.aca .aca-consult__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
}

.aca .aca-consult__online {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-green);
  white-space: nowrap;
}

.aca .aca-consult__divider {
  width: 100%;
  height: 1px;
  border-radius: 1px;
  background-color: var(--c-border);
}

.aca .aca-consult__messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.aca .aca-consult__message {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.aca .aca-consult__message--client {
  justify-content: flex-end;
}

.aca .aca-consult__bubble {
  flex: 1 0 0;
  max-width: 348px;
  padding: 16px 24px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-consult__message--client .aca-consult__bubble {
  border-radius: 8px 8px 0 8px;
  background-color: var(--c-primary-soft);
}

.aca .aca-consult__message--assistant .aca-consult__bubble {
  border-radius: 8px 8px 8px 0;
  background-color: var(--c-surface);
}

.aca .aca-consult__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background-color: var(--c-white);
}

.aca .aca-consult__ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 8px 8px 20px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background-color: var(--c-white);
  cursor: text;
}

.aca .aca-consult__ask-placeholder {
  color: var(--c-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.aca .aca-consult__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--c-primary);
  cursor: pointer;
}

.aca .aca-consult__form-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.aca .aca-consult__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.aca .aca-consult__field {
  flex: 1 0 100%;
}

.aca .aca-consult__field--half {
  flex: 1 0 240px;
}

.aca .aca-consult__input {
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
}

.aca .aca-consult__input::placeholder {
  color: var(--c-muted);
}

.aca .aca-consult__input:focus-visible {
  border-color: var(--c-primary) !important;
}

.aca .aca-consult__submit {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.aca .aca-consult__consent {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--c-muted);
  font-size: var(--fs-cap);
  line-height: var(--lh-cap);
  letter-spacing: 0.13px;
  cursor: pointer;
}

.aca .aca-consult__consent a {
  text-decoration: underline;
}

.aca .aca-consult__checkbox {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-muted);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.aca .aca-consult__checkbox:checked {
  border-color: var(--c-primary);
  background: var(--c-primary) url("../images/aca_marketplace/why-check.svg") center / 12px 12px no-repeat;
}

/* Нижний край десктопа (1024–1279): текст и иллюстрации героя и блока
   «Что такое» должны уместиться в ряд при полях 40px. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .aca .aca-hero {
    gap: 48px 24px;
  }

  .aca .aca-hero__text {
    min-width: 360px;
  }

  .aca .aca-what {
    gap: 56px 40px;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
  }

  .aca .aca-what__text {
    min-width: 360px;
  }
}

/* ============================================================
   Адаптив: Tablet (≤1023, макет 1268:6305) и Mobile (≤767, макет
   1268:7851). Кегли и отступы меняют токены в начале файла, здесь —
   только раскладка блоков. Порядок разделов — как на странице.
   ============================================================ */
@media (max-width: 1023px) {

  /* --- Герой: текст по центру, лупа под ним ----------------- */
  .aca .aca-hero {
    flex-direction: column;
    gap: 48px;
    padding: var(--pad-y) var(--pad-x);
  }

  .aca .aca-hero__text {
    flex: none;
    align-items: center;
    gap: 32px;
    width: 100%;
    min-width: 0;
    max-width: 640px;
    text-align: center;
  }

  .aca .aca-hero__headline {
    gap: 16px;
  }

  .aca .aca-hero__actions,
  .aca .aca-hero__facts {
    justify-content: center;
  }

  /* --- Что такое: текст сверху, лист подбора под ним --------- */
  .aca .aca-what {
    flex-direction: column-reverse;
    gap: 48px;
    padding: var(--pad-y) var(--pad-x);
  }

  .aca .aca-what__text {
    flex: none;
    align-items: center;
    gap: 32px;
    width: 100%;
    min-width: 0;
    max-width: 720px;
    text-align: center;
  }

  .aca .aca-what__headline {
    gap: 16px;
  }

  .aca .aca-what__guarantees {
    width: auto;
    gap: 16px;
    text-align: left;
  }

  .aca .aca-what__guarantee .aca-icon-circle {
    width: 40px;
    height: 40px;
  }

  /* --- Калькулятор: вопросы и результат друг под другом ------ */
  .aca .aca-calc__bar {
    padding: 24px 32px;
  }

  .aca .aca-calc__body {
    flex-direction: column;
  }

  .aca .aca-calc__questions {
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--c-border);
  }

  .aca .aca-calc__question {
    padding: 28px 0;
  }

  .aca .aca-calc__result {
    flex: none;
    min-width: 0;
    max-width: none;
  }

  .aca .aca-calc__result > * {
    max-width: 520px;
  }

  /* --- Как мы подбираем план --------------------------------- */
  .aca .aca-pick__track {
    column-gap: 16px;
  }

  .aca .aca-pick__card {
    padding: 20px;
  }

  .aca .aca-pick__panel {
    padding: 32px;
  }

  /* --- Почему Averon: две колонки, критерий — подписью в ячейке */
  .aca .aca-why__corner {
    display: none;
  }

  /* Колонку критериев убираем целиком: спрятанная визуально ячейка
     всё равно занимала бы место в строке, и колонки разъехались бы с
     подложками. Критерий читается из подписи в каждой ячейке. */
  .aca .aca-why__table .aca-why__criterion {
    display: none;
  }

  .aca .aca-why__table::before {
    left: 16px;
    width: calc((100% - 48px) / 2);
  }

  .aca .aca-why__table::after {
    width: calc((100% - 48px) / 2);
  }

  .aca .aca-why__col {
    height: 84px;
    padding: 0 20px;
  }

  .aca .aca-why__badge {
    right: 20px;
  }

  .aca .aca-why__self,
  .aca .aca-why__averon {
    height: auto;
    padding: 18px 20px;
    vertical-align: top;
  }

  .aca .aca-why__label {
    display: block;
    margin-bottom: 6px;
    color: var(--c-secondary);
    font-size: var(--fs-cap);
    line-height: var(--lh-cap);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  .aca .aca-why__averon .aca-why__value {
    padding-left: 30px;
  }

  .aca .aca-why__averon .aca-why__value::before {
    top: 0;
    width: 20px;
    height: 20px;
    background-size: 12px 12px;
    transform: none;
  }

  .aca .aca-why__facts {
    flex: 1 1 100%;
    gap: 24px;
    min-width: 0;
  }

  .aca .aca-why__fact + .aca-why__fact::before {
    left: -12.5px;
  }

  .aca .aca-why__trust .aca-button {
    flex: 1 1 100%;
  }

  /* --- Отзывы (скрыты): две колонки ------------------------- */
  .aca .aca-stories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "daniel priya"
      "elena jordan"
      "marcus marcus"
      "wes wes";
  }

  /* --- Шаги: сетка 2 × 2 ------------------------------------ */
  .aca .aca-steps__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }

  /* --- Когда можно оформить ---------------------------------- */
  .aca .aca-when__open {
    gap: 40px;
    padding: 32px;
  }

  .aca .aca-when__months {
    gap: 24px;
  }

  .aca .aca-cal__week {
    gap: 4px;
  }

  .aca .aca-when__legend {
    flex-direction: column;
    gap: 16px;
  }

  /* Карточка записи в макете встаёт перед особым периодом. */
  .aca .aca-when__row {
    flex-direction: column;
    gap: 24px;
  }

  .aca .aca-when__signup {
    order: -1;
    flex: none;
    gap: 24px;
    min-width: 0;
    max-width: none;
    min-height: 0;
  }

  .aca .aca-when__signup-text {
    max-width: 600px;
  }

  .aca .aca-when__special {
    flex: none;
    gap: 24px;
    padding: 32px;
  }

  /* --- Вопросы и ответы -------------------------------------- */
  .aca .aca-faq__list {
    gap: 32px;
  }

  .aca .aca-faq__item {
    padding: 24px 0;
  }

  .aca .aca-faq__num,
  .aca .aca-faq__question::after {
    width: 40px;
  }

  .aca .aca-faq__question::after {
    height: var(--lh-h4);
    background-size: 24px 24px;
  }

  .aca .aca-faq__answer {
    padding: 0 48px;
  }

  /* --- Консультация: чат и форма друг под другом ------------- */
  .aca .aca-consult__content {
    flex-direction: column;
    align-items: stretch;
  }

  .aca .aca-consult__chat {
    padding: 32px;
  }

  .aca .aca-consult__form {
    flex: none;
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 767px) {

  .aca .aca-button--wide {
    max-width: none;
  }

  /* --- Герой ------------------------------------------------ */
  .aca .aca-hero {
    gap: 32px;
    padding-bottom: 40px;
  }

  .aca .aca-hero__text {
    gap: 24px;
  }

  .aca .aca-hero__headline {
    gap: 12px;
  }

  .aca .aca-hero__actions {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .aca .aca-hero__actions .aca-button {
    width: 100%;
  }

  /* Сцена лупы уменьшается целиком: 540 × 0.58 ≈ 313px — влезает
     в самый узкий экран (320 минус поля) без горизонтальной прокрутки. */
  .aca .aca-hero__visual {
    width: 313px;
    height: 290px;
  }

  .aca .aca-hero__stage {
    transform: scale(0.58);
    transform-origin: 0 0;
  }

  /* --- Что такое: лист подбора без стола, ровно -------------- */
  .aca .aca-what {
    gap: 32px;
  }

  .aca .aca-what__text {
    gap: 24px;
  }

  .aca .aca-what__headline {
    gap: 12px;
  }

  .aca .aca-what__guarantees {
    width: 100%;
  }

  .aca .aca-what__visual {
    width: 100%;
    height: auto;
  }

  .aca .aca-what__desk,
  .aca .aca-what__sheet-back {
    display: none;
  }

  .aca .aca-what__sheet {
    position: static;
    gap: 16px;
    width: 100%;
    padding: 20px;
    transform: none;
    box-shadow: var(--shadow);
  }

  .aca .aca-what__sum-row--total {
    flex-wrap: wrap;
    gap: 4px 10px;
  }

  .aca .aca-what__sum-row--total dt {
    flex: 1 1 100%;
  }

  .aca .aca-what__sum-row--total dt::after {
    content: none;
  }

  .aca .aca-what__signature {
    flex-wrap: wrap;
    padding-right: 84px;
  }

  .aca .aca-what__autograph {
    flex: 1 1 100%;
    padding-top: 8px;
  }

  .aca .aca-what__stamp {
    left: auto;
    top: auto;
    right: 8px;
    bottom: 12px;
    transform: rotate(14deg) scale(0.72);
  }

  /* --- Калькулятор ------------------------------------------ */
  .aca .aca-calc__bar {
    padding: 20px;
  }

  .aca .aca-calc__questions {
    padding: 0 20px;
  }

  .aca .aca-calc__question {
    gap: 20px;
    padding: 24px 0;
  }

  .aca .aca-calc__ask {
    gap: 12px;
  }

  .aca .aca-calc__field {
    padding-left: 0;
  }

  .aca .aca-calc__stepper,
  .aca .aca-calc__money {
    max-width: none;
  }

  .aca .aca-calc__mark--start {
    display: none;
  }

  .aca .aca-calc__radios {
    flex-direction: column;
  }

  .aca .aca-calc__radio {
    flex: none;
    min-width: 0;
  }

  .aca .aca-calc__result {
    gap: 24px;
    padding: 24px 20px;
  }

  .aca .aca-calc__estimate,
  .aca .aca-calc__outcome {
    gap: 24px;
  }

  /* --- Как мы подбираем план: карусель ---------------------- */
  .aca .aca-pick__body {
    gap: 16px;
  }

  .aca .aca-pick__track {
    display: flex;
    gap: 12px;
    width: calc(100% + 2 * var(--pad-x));
    margin: 0 calc(-1 * var(--pad-x));
    padding: 8px var(--pad-x) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--pad-x);
    scrollbar-width: none;
  }

  .aca .aca-pick__track::-webkit-scrollbar {
    display: none;
  }

  .aca .aca-pick__item {
    display: flex;
    flex: 0 0 272px;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 16px;
    background-color: var(--c-white);
    box-shadow: var(--shadow);
    scroll-snap-align: start;
  }

  .aca .aca-pick__card {
    justify-content: flex-start;
    aspect-ratio: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    cursor: default;
  }

  .aca .aca-pick__card img {
    width: 120px;
  }

  .aca .aca-pick__panel,
  .aca .aca-pick__panel.is-active {
    display: flex;
    gap: 12px;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  /* --- Почему Averon: одна колонка «С Averon» ---------------- */
  .aca .aca-why__table,
  .aca .aca-why__table thead,
  .aca .aca-why__table tbody,
  .aca .aca-why__table tr {
    display: block;
  }

  .aca .aca-why__table {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1.5px solid var(--c-primary);
    border-radius: 24px;
    background-color: var(--c-white);
    box-shadow: var(--shadow);
  }

  .aca .aca-why__table::before,
  .aca .aca-why__table::after {
    content: none;
  }

  .aca .aca-why__table .aca-why__col--self,
  .aca .aca-why__table .aca-why__self {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .aca .aca-why__col--averon,
  .aca .aca-why__averon {
    display: block;
    height: auto;
    padding: 20px;
  }

  .aca .aca-why__col--averon {
    border-bottom: 1px solid var(--c-border);
  }

  .aca .aca-why__col-note {
    white-space: normal;
  }

  .aca .aca-why__col--averon .aca-why__col-name {
    padding-right: 0;
  }

  .aca .aca-why__badge {
    position: static;
    display: inline-block;
    margin-top: 12px;
    transform: none;
  }

  .aca .aca-why__alt {
    display: block;
    margin-top: 8px;
    padding-left: 30px;
    color: var(--c-muted);
    font-size: var(--fs-cap);
    line-height: var(--lh-cap);
    font-weight: 400;
  }

  .aca .aca-why__trust {
    padding: 20px;
  }

  .aca .aca-why__facts {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .aca .aca-why__fact + .aca-why__fact::before {
    content: none;
  }

  /* --- Шаги: вертикальная линия слева ----------------------- */
  .aca .aca-steps__list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .aca .aca-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    padding-bottom: 24px;
  }

  .aca .aca-step--done {
    padding-bottom: 0;
  }

  .aca .aca-step > :not(.aca-step__track) {
    grid-column: 2;
  }

  /* Колонка маркера тянется на всю высоту шага и ещё на отступ до
     следующего — так линия доходит до следующего кружка. */
  .aca .aca-step__track {
    grid-column: 1;
    grid-row: 1 / span 3;
    flex-direction: column;
    gap: 0;
    margin-bottom: -24px;
    padding-bottom: 0;
  }

  .aca .aca-step__track::after {
    width: 1.5px;
    height: auto;
    margin: 8px 0;
  }

  .aca .aca-step__marker {
    width: 44px;
    height: 44px;
  }

  .aca .aca-step__marker img {
    width: 18px;
    height: 18px;
  }

  .aca .aca-step__label {
    padding-top: 12px;
  }

  .aca .aca-step__text {
    margin-top: 0;
  }

  /* --- Когда можно оформить: полоса вместо календарей ------- */
  .aca .aca-when__open {
    gap: 24px;
    padding: 20px;
  }

  .aca .aca-when__open-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .aca .aca-when__months {
    display: none;
  }

  .aca .aca-when__bar {
    display: flex;
    gap: 2px;
  }

  .aca .aca-when__seg {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .aca .aca-when__seg--early {
    flex: var(--early) 1 0;
  }

  .aca .aca-when__seg--late {
    flex: var(--late) 1 0;
  }

  .aca .aca-when__pill {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    font-size: var(--fs-cap);
    line-height: var(--lh-cap);
    white-space: nowrap;
  }

  .aca .aca-when__seg--early .aca-when__pill {
    border-radius: 16px 0 0 16px;
    background-color: var(--c-primary-soft);
    color: var(--c-primary);
  }

  .aca .aca-when__seg--late .aca-when__pill {
    border-radius: 0 16px 16px 0;
    background-color: var(--c-surface);
  }

  .aca .aca-when__edge {
    color: var(--c-muted);
    font-size: var(--fs-cap);
    line-height: var(--lh-cap);
    white-space: nowrap;
  }

  .aca .aca-when__edge--end {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .aca .aca-when__legend-item {
    gap: 12px;
  }

  .aca .aca-when__swatch {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    border-radius: 4px;
  }

  .aca .aca-when__special,
  .aca .aca-when__signup {
    gap: 20px;
    padding: 20px;
  }

  .aca .aca-when__events {
    flex-direction: column;
    gap: 8px;
  }

  .aca .aca-when__event {
    border-radius: 12px;
    white-space: normal;
  }

  .aca .aca-when__footnote {
    text-align: left;
  }

  /* --- Вопросы и ответы -------------------------------------- */
  .aca .aca-faq__list {
    gap: 16px;
  }

  .aca .aca-faq__item {
    padding: 20px 0;
  }

  .aca .aca-faq__num {
    width: 28px;
    text-align: left;
  }

  .aca .aca-faq__question::after {
    width: 24px;
    background-size: 20px 20px;
  }

  .aca .aca-faq__answer {
    padding: 0 0 0 36px;
  }

  /* --- Консультация ------------------------------------------ */
  .aca .aca-consult__chat,
  .aca .aca-consult__form {
    gap: 24px;
    padding: 20px;
  }

  .aca .aca-consult__chat-title-row {
    justify-content: center;
  }

  /* В мобильном макете строки о круглосуточном ассистенте нет. */
  .aca .aca-consult__online {
    display: none;
  }

  .aca .aca-consult__chat-text {
    text-align: center;
  }

  .aca .aca-consult__message {
    gap: 8px;
  }

  .aca .aca-consult__bubble {
    padding: 12px 16px;
  }

  .aca .aca-consult__field--half {
    flex-basis: 100%;
  }

  .aca .aca-consult__input {
    padding: 0 16px;
  }
}

/* ============================================================
   Движение.

   Здесь только предсостояния и постоянные «фоновые» движения героя.
   Появление ведёт aca-marketplace.js через Web Animations — так же, как
   на странице Health ProtectorGuard: хореография живёт в одном месте,
   задержки и лесенка считаются на ходу.

   Всё погашено под меткой [data-aca-motion], которую ставит короткий
   скрипт в <head>. Нет JS — нет метки, и страница видна целиком.
   [data-reveal-done] снимает предсостояние ровно тогда, когда за
   элемент берётся анимация.
   ============================================================ */
[data-aca-motion] .aca [data-reveal]:not([data-reveal-done]) {
  opacity: 0;
}

[data-aca-motion] .aca [data-reveal=""]:not([data-reveal-done]) {
  transform: translate3d(0, 14px, 0);
}

/* Пилюли календаря и мобильная полоса растут слева направо. */
.aca .aca-cal__run,
.aca .aca-when__bar {
  transform-origin: 0 50%;
}

/* --- Шаги: линия к следующему шагу прочерчивается после маркера --- */
.aca .aca-step__track::after {
  transform-origin: 0 50%;
  transition: transform 0.7s cubic-bezier(0.33, 0, 0.2, 1) 0.25s;
}

[data-aca-motion] .aca .aca-step:not([data-reveal-done]) .aca-step__track::after {
  transform: scaleX(0);
}

/* --- Карточки: отклик на наведение --------------------------- */
.aca .aca-button {
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.aca .aca-button:active {
  transform: scale(0.98);
}

.aca .aca-pick__card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .aca .aca-pick__card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
  }
}

.aca .aca-pick__dot {
  transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease;
}

.aca .aca-faq__question::after {
  transition: transform 0.3s ease;
}

/* --- Герой: поле течёт, лупа покачивается --------------------
   Ряды поля едут навстречу друг другу на три плитки — ровно период
   чередования цветов, поэтому петля бесшовная. Под стеклом ряды едут
   с тем же периодом, но в масштабе --k (2.3): за то же время они
   проходят в 2.3 раза больше — так ведёт себя картинка под линзой.
   Сцена движется, только пока герой на экране (.is-paused ставит
   скрипт), и не движется вовсе в спокойном режиме. */
@keyframes aca-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(calc(-222px * var(--k, 1)), 0, 0);
  }
}

@keyframes aca-float {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  to {
    transform: translate3d(-10px, 6px, 0) rotate(-2deg);
  }
}

.aca .aca-hero__row {
  animation: aca-drift 26s linear infinite;
}

.aca .aca-hero__row:nth-child(even) {
  animation-direction: reverse;
}

.aca .aca-hero__loupe {
  transform-origin: 136px 136px;
  animation: aca-float 6s ease-in-out infinite alternate;
}

.aca .aca-hero__visual.is-paused .aca-hero__row,
.aca .aca-hero__visual.is-paused .aca-hero__loupe {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  [data-aca-motion] .aca [data-reveal]:not([data-reveal-done]) {
    transform: none;
  }

  .aca .aca-hero__row,
  .aca .aca-hero__loupe {
    animation: none;
  }

  .aca .aca-step__track::after {
    transition: none;
  }
}

/* На мобильном линия шага вертикальная — растёт сверху вниз. */
@media (max-width: 767px) {
  .aca .aca-step__track::after {
    transform-origin: 50% 0;
  }

  [data-aca-motion] .aca .aca-step:not([data-reveal-done]) .aca-step__track::after {
    transform: scaleY(0);
  }
}

/* Самые узкие телефоны (320–359): сцена лупы ещё мельче. */
@media (max-width: 359px) {
  .aca .aca-hero__visual {
    width: 281px;
    height: 260px;
  }

  .aca .aca-hero__stage {
    transform: scale(0.52);
  }
}