/* Блоки главной. Мобильная раскладка — база, десктопная — в @media 1240.
   1240 взято не с потолка: колонка 1200 плюс поля по 20. Ниже этого
   форма первого экрана в одну строку не помещается. */

/* ======================================================================
   Служебная полоса
   ====================================================================== */
.utility {
  background: var(--color-bg-sheet);
}

.utility .column {
  display: flex;
  height: 36px;
  align-items: center;
  justify-content: space-between;
}

.utility__city {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-text-secondary);
}

.utility__city img:first-child { width: 14px; }
.utility__city img:last-child { width: 12px; }

.utility__links {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
}

.utility__link {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 15px;
  line-height: 23px;
}

.utility__link img { width: 16px; }

/* ======================================================================
   Шапка
   ====================================================================== */
.header {
  display: flex;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid var(--color-border-soft);
}

.header .column {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
}

.brand__mark { width: 28px; }

.brand__name {
  font-size: 19px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.19px;
  white-space: nowrap;
}

.brand__note { display: none; }

.header__nav { display: none; }
.header__cta { display: none; }

.header__actions {
  display: flex;
  gap: 18px;
  align-items: center;
}

.header__profile {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-accent-soft);
  border-radius: var(--radius-md);
}

.header__profile img { width: 20px; }

.header__burger {
  display: flex;
  width: 44px;
  height: 44px;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  justify-content: center;
  padding-left: 24px;
}

.header__burger span {
  width: 20px;
  height: 2px;
  background: var(--color-text-primary);
}

.header__burger span:last-child { width: 14px; }

/* ======================================================================
   01 · Первый экран
   Форма обязана оставаться над сгибом: на 390×844 и на 1440×800.
   ====================================================================== */
.hero {
  padding-block: var(--spacing-lg) var(--spacing-xl);
}

/* Сетка, а не вложенные флексы: на телефоне маскот стоит рядом
   с заголовком, на десктопе — отдельной колонкой справа. Одна разметка
   собирает обе раскладки, картинка в документе одна. */
.hero .column {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--spacing-sm);
  align-items: center;
}

.hero__claim {
  display: flex;
  grid-area: 1 / 1 / 2 / 3;
  gap: var(--spacing-xs);
  align-items: center;
  margin-bottom: 20px;
}

.hero__claim img { width: 46px; }

.hero__claim-text {
  font-size: 19px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: -0.19px;
}

.hero__title {
  grid-area: 2 / 1 / 3 / 2;
  max-width: 214px;
}

.hero__mascot {
  grid-area: 2 / 2 / 3 / 3;
  width: 124px;
}

.hero__lead {
  grid-area: 3 / 1 / 4 / 3;
  margin-top: 20px;
  color: var(--color-text-primary);
}

.hero__form {
  display: flex;
  grid-area: 4 / 1 / 5 / 3;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: 20px;
  padding: var(--spacing-md);
  background: var(--color-story-1);
  border-radius: 20px;
}

.hero__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* ======================================================================
   02 · Цены
   Лента листается. Вторая карусель на телефоне запрещена: на странице
   их всего одна, вторая — в блоке «как это работает» только на десктопе.
   ====================================================================== */
.prices {
  padding-block: var(--spacing-xs) var(--spacing-2xl);
}

.prices__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.prices__arrows { display: none; }

/* Лента выходит за колонку и обрезается краем окна: последняя карточка
   подрезана — это подсказка, что дальше есть ещё. */
.prices__track {
  display: flex;
  gap: var(--spacing-md);
  overflow-x: auto;
  padding-inline: var(--page-gutter);
  margin-inline: calc(var(--page-gutter) * -1);
  /* Без scroll-padding обязательный снап уводит ленту за левое поле:
     карточка прилипает к краю окна, а не к колонке. */
  scroll-padding-inline: var(--page-gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.prices__track::-webkit-scrollbar { display: none; }

.price {
  position: relative;
  display: flex;
  width: 200px;
  height: 300px;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 22px 20px 20px 22px;
  border-radius: 20px;
  scroll-snap-align: start;
}

.price--wide { width: 280px; }

.price__top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* Бейдж скидки. Процент считается от базовой цены, округлённой до десятков,
   поэтому на контрольной он честные 21, а не 22 — так в макете. */
.price__badge {
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: var(--color-text-accent);
  background: var(--color-bg-page);
  border-radius: var(--radius-pill);
}

.price__name {
  font-size: 22px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -0.22px;
}

.price--wide .price__name {
  font-size: 24px;
  line-height: 29px;
  letter-spacing: -0.48px;
}

.price__term {
  font-size: 15px;
  line-height: 23px;
}

.price__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

/* «от» живёт в подписи, в значении только число со знаком рубля:
   иначе «90 000 ₽» рвётся пополам и знак улетает на вторую строку. */
.price__amount {
  display: flex;
  flex-direction: column;
}

.price__from {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.price__value {
  font-size: 30px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.6px;
  white-space: nowrap;
}

/* Базовая цена стоит под текущей, а не над ней: «от» относится к текущей,
   и обратный порядок читался бы как «от 3 190». */
.price__base {
  font-size: 13px;
  line-height: 18px;
  /* Не muted: на пастельной карточке он даёт контраст 3,6–4,0
     при норме 4,5. См. правило в base.css. */
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.price__go {
  display: flex;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-page);
  border-radius: var(--radius-pill);
}

.price__go img { width: 18px; }

.price--wide .price__go {
  position: absolute;
  top: 18px;
  right: 20px;
}

.price--wide .price__art {
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 152px;
  pointer-events: none;
}

/* ======================================================================
   03 · Как это работает
   На телефоне карусели нет: одна карточка и ряд кружков под ней.
   ====================================================================== */
.how {
  padding-block: var(--spacing-2xl);
}

/* На телефоне порядок другой: заголовок, карточка, кружки под ней.
   Обёртка левой колонки на этой ширине не нужна — распускаем её,
   чтобы порядком управлял сам столбец секции. */
.how .column {
  display: flex;
  flex-direction: column;
}

.how__side { display: contents; }

.how__title {
  order: 1;
  margin-bottom: 20px;
}

.how__player { order: 2; }
.how__steps { order: 3; }

.how__player {
  position: relative;
  display: flex;
  justify-content: center;
}

/* Веер из двух карточек за открытой — только на десктопе. */
.how__behind { display: none; }

.story {
  display: flex;
  width: 300px;
  height: 533px;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: 14px 14px 18px;
  background: var(--color-story-1);
  border-radius: 20px;
}

.story__progress {
  display: flex;
  gap: var(--spacing-2xs);
}

.story__progress span {
  height: 3px;
  flex: 1;
  background: var(--color-border-soft);
  border-radius: var(--radius-pill);
}

.story__progress span[data-active] { background: var(--color-bg-action); }

.story__head {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.story__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
}

.story__art {
  min-height: 0;
  flex: 1;
  object-fit: contain;
  width: 100%;
}

.story__caption {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.how__steps {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-inline: 5px;
}

.step {
  display: flex;
  width: 76px;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  padding-top: 5px;
  text-align: center;
}

.step__circle {
  display: flex;
  width: 66px;
  height: 66px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}

.step__circle img { width: 100%; }

.step[data-active] .step__circle {
  box-shadow: 0 0 0 2px var(--color-bg-page), 0 0 0 4px var(--color-bg-action);
}

.step__short {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
}

.step__text { display: none; }

/* ======================================================================
   04 · Что мы обещаем
   ====================================================================== */
.promise {
  padding-block: var(--spacing-2xl);
}

.promise__title { margin-bottom: 16px; }

.promise__grid {
  display: grid;
  gap: var(--spacing-sm);
}

.tile {
  padding: 20px;
  border-radius: 20px;
}

.tile__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  object-position: left center;
}

.tile__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ======================================================================
   05 · Частые вопросы
   Раскрыт ровно один — первый, чтобы стало видно, что карточки открываются.
   ====================================================================== */
.faq {
  padding-block: var(--spacing-2xl);
  background: var(--color-bg-sheet);
}

.faq__title { margin-bottom: var(--spacing-md); }

.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.qa {
  padding: var(--spacing-2xs) var(--spacing-md);
  border-radius: var(--radius-md);
}

.qa[open] {
  background: var(--color-story-1);
  padding-bottom: 14px;
}

.qa__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  cursor: pointer;
  list-style: none;
}

.qa__row::-webkit-details-marker { display: none; }

.qa__row img {
  width: 14px;
  margin-top: 6px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.qa[open] .qa__row img { transform: rotate(180deg); }

/* Отступ 20 повторяет боковое поле строки вопроса: ответ встаёт ровно
   под вопросом. В макете этого отступа нет и ответ сдвинут влево на 20 —
   расхождение с макетом здесь намеренное, владелец решил 13 сентября. */
.qa__answer {
  padding-inline: 20px;
  font-size: 15px;
  line-height: 23px;
  color: var(--color-text-secondary);
}

/* ======================================================================
   06 · Заявка
   Тип работы здесь выбирается, а не подставляется: главная не знает,
   зачем пришёл человек. На посадочных — наоборот.
   ====================================================================== */
.cta {
  padding-block: var(--spacing-2xl);
}

.cta__card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-lg);
  background: var(--color-story-1);
  border-radius: 20px;
}

.cta__title {
  grid-area: 1 / 1 / 2 / 2;
  max-width: 202px;
}

.cta__mascot {
  grid-area: 1 / 2 / 2 / 3;
  width: 96px;
}

.cta__lead {
  grid-area: 2 / 1 / 3 / 3;
  margin-top: var(--spacing-md);
}

.cta__form {
  display: flex;
  grid-area: 3 / 1 / 4 / 3;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

/* ======================================================================
   07 · Подвал
   ====================================================================== */
.footer {
  padding-block: var(--spacing-2xl) var(--spacing-xl);
  color: var(--color-text-on-dark);
  background: var(--color-bg-dark);
}

.footer__columns {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 36px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__brand span:last-child { color: var(--color-text-on-dark-muted); }

.footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.footer__group h3 { color: var(--color-text-on-dark-muted); }

.footer__group a { line-height: 26px; }

.footer__tg {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.footer__tg img { width: 18px; }

.footer__rule {
  height: 1px;
  background: var(--color-border-on-dark);
  margin-bottom: 36px;
}

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-size: 15px;
  line-height: 23px;
  color: var(--color-text-on-dark-muted);
}

.footer__docs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* ======================================================================
   Десктоп. Макет «Главная · desktop 1440», колонка 1200.
   ====================================================================== */
@media (min-width: 1240px) {

  /* --- Служебная полоса --- */
  .utility .column { height: 40px; }

  /* --- Шапка --- */
  .header { height: 72px; }

  .brand { gap: var(--spacing-sm); }
  .brand__mark { width: 32px; }

  .brand__note {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    color: var(--color-text-muted);
  }

  .brand__title {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }

  .header__nav {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    font-size: 15px;
    line-height: 23px;
    color: var(--color-text-secondary);
  }

  .header__cta { display: inline-flex; }
  .header__actions { display: none; }

  /* --- 01 · Первый экран --- */
  .hero { padding-block: var(--spacing-3xl); }

  /* Маскот уходит во вторую колонку на всю высоту, текст и форма —
     в первую. Колонка текста 740, слот маскота 420, зазор 40. */
  .hero .column {
    grid-template-columns: 1fr 420px;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    column-gap: var(--spacing-2xl);
  }

  .hero__claim {
    grid-area: 2 / 1 / 3 / 2;
    gap: 14px;
    margin-bottom: var(--spacing-xl);
  }

  .hero__claim img { width: 64px; }

  .hero__claim-text {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.16px;
  }

  .hero__title {
    grid-area: 3 / 1 / 4 / 2;
    max-width: 600px;
  }

  .hero__lead {
    grid-area: 4 / 1 / 5 / 2;
    max-width: 720px;
    margin-top: var(--spacing-md);
    font-size: 18px;
    line-height: 29px;
    color: var(--color-text-secondary);
  }

  .hero__mascot {
    grid-area: 1 / 2 / -1 / 3;
    width: 344px;
    align-self: center;
    justify-self: end;
  }

  .hero__form {
    grid-area: 5 / 1 / 6 / 2;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
    padding: 20px 20px 16px;
  }

  .hero__fields {
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .hero__fields .field { width: 196px; }
  .hero__fields .contact { width: 296px; }

  .hero__fields .btn--primary {
    width: 184px;
    height: 70px;
    padding-inline: 0;
  }

  /* --- 02 · Цены --- */
  .prices { padding-block: var(--spacing-xs) 104px; }

  .prices__head { margin-bottom: 28px; }

  .prices__arrows {
    display: flex;
    gap: var(--spacing-xs);
  }

  .prices__arrow {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-sheet);
    border-radius: var(--radius-pill);
  }

  .prices__arrow img { width: 18px; }

  .prices__arrow--back img { transform: rotate(180deg); }

  .prices__arrow:disabled {
    cursor: default;
    opacity: 0.55;
  }

  .price {
    width: 232px;
    height: 340px;
  }

  .price--wide { width: 412px; padding: 22px 24px; }

  .price--wide .price__name {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.6px;
  }

  .price--wide .price__value {
    font-size: 40px;
    line-height: 46px;
    letter-spacing: -0.8px;
  }

  .price__base {
    font-size: 15px;
    line-height: 23px;
  }

  .price--wide .price__go { top: 22px; right: 24px; }

  .price--wide .price__art {
    right: 10px;
    bottom: 12px;
    width: 214px;
  }

  /* --- 03 · Как это работает --- */
  .how { padding-block: 80px; }

  .how .column {
    flex-direction: row;
    gap: 80px;
    align-items: center;
  }

  .how__side {
    display: block;
    width: 520px;
    flex-shrink: 0;
  }

  .how__title {
    order: 0;
    margin-bottom: 36px;
  }

  .how__player {
    width: 600px;
    height: 533px;
    flex-shrink: 0;
    display: block;
  }

  .how__player .story {
    position: absolute;
    top: 0;
    left: 0;
  }

  /* Веер: две карточки за открытой, повёрнутые и приглушённые.
     Координаты — центры повёрнутых прямоугольников из макета. */
  .how__behind {
    position: absolute;
    display: block;
    border-radius: 20px;
    transform: translate(-50%, -50%) rotate(var(--turn));
  }

  .how__behind--near {
    top: 282px;
    left: 345px;
    width: 255px;
    height: 453px;
    background: var(--color-story-5);
    opacity: 0.92;
    --turn: 8deg;
  }

  .how__behind--far {
    top: 287px;
    left: 430px;
    width: 215px;
    height: 382px;
    background: var(--color-story-3);
    opacity: 0.8;
    --turn: 14deg;
  }

  .how__behind img {
    position: absolute;
    top: 90px;
    left: 20px;
    width: calc(100% - 40px);
  }

  /* Кружки на десктопе стоят столбиком, подпись справа от кружка. */
  .how__steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 0;
    padding-inline: 0;
  }

  .step {
    width: auto;
    height: 88px;
    flex-direction: row;
    padding-top: 0;
    gap: 25px;
    align-items: center;
    padding-left: 5px;
    text-align: left;
  }

  .step__circle {
    width: 78px;
    height: 78px;
    flex-shrink: 0;
  }

  .step[data-active] .step__circle {
    box-shadow: 0 0 0 5px var(--color-bg-page), 0 0 0 7px var(--color-bg-action);
  }

  .step__short { display: none; }

  .step__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
  }

  /* --- 04 · Что мы обещаем --- */
  .promise { padding-block: 72px; }

  .promise__title { margin-bottom: var(--spacing-xl); }

  .promise__grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  .promise__grid .tile:nth-child(-n + 2) { grid-column: span 3; }
  .promise__grid .tile:nth-child(n + 3) { grid-column: span 2; }

  .tile {
    display: flex;
    height: 200px;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
  }

  /* --- 05 · Частые вопросы --- */
  .faq { padding-block: 72px; }

  .faq__title { margin-bottom: var(--spacing-xl); }

  /* --- 06 · Заявка --- */
  .cta { padding-block: 72px; }

  /* Три колонки в одну строку: текст — маскот — форма. */
  .cta__card {
    grid-template-columns: 1fr auto 400px;
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--spacing-2xl);
    padding: 44px 48px;
  }

  .cta__title {
    grid-area: 2 / 1 / 3 / 2;
    max-width: none;
  }

  .cta__lead {
    grid-area: 3 / 1 / 4 / 2;
    margin-top: var(--spacing-sm);
    font-size: 18px;
    line-height: 29px;
  }

  .cta__mascot {
    grid-area: 1 / 2 / -1 / 3;
    width: 200px;
    align-self: center;
  }

  .cta__form {
    grid-area: 1 / 3 / -1 / 4;
    align-self: center;
    margin-top: 0;
  }

  /* --- 07 · Подвал --- */
  .footer { padding-block: 64px 48px; }

  .footer__columns {
    flex-direction: row;
    gap: var(--spacing-2xl);
  }

  .footer__columns > * {
    min-width: 0;
    flex: 1;
  }

  .footer__docs {
    flex-direction: row;
    gap: var(--spacing-lg);
  }
}

/* ======================================================================
   Посадочная по типу работы
   ====================================================================== */

/* --- Хлебные крошки --- */
.crumbs {
  padding-block: var(--spacing-xs);
}

.crumbs ol {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-muted);
}

.crumbs li + li::before {
  content: "›";
  margin-right: var(--spacing-xs);
  color: var(--color-text-muted);
}

.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-text-accent); }

/* --- 01 · Первый экран --- */
.lhero {
  padding-block: var(--spacing-lg) var(--spacing-xl);
}

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

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

/* Подчёркивание тянется под ключевым словом: ширину задаёт само слово,
   поэтому росчерк лежит в строке, а не координатой. */
.lhero__key {
  position: relative;
  white-space: nowrap;
}

.lhero__underline {
  position: absolute;
  bottom: -0.12em;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.lhero__lead { color: var(--color-text-primary); }

.lhero__mascot {
  width: 124px;
  align-self: flex-end;
  margin-top: calc(var(--spacing-lg) * -1);
}

.lhero__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-story-1);
  border-radius: 20px;
}

.lhero__fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Значение предзаполнено и не правится: тип задаёт страница. */
.lhero__fields .field__value[readonly] {
  color: var(--color-text-primary);
  cursor: default;
}

/* --- Плитки фактов --- */
.facts {
  display: flex;
  gap: var(--spacing-sm);
}

.fact {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
}

.fact__icon { width: 20px; }

.fact__label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  /* Не muted: на пастельной подложке он не проходит норму контраста. */
  color: var(--color-text-secondary);
}

/* «от» живёт в подписи, в значении только число: иначе «90 000 ₽»
   рвётся пополам и знак рубля улетает на вторую строку. */
.fact__value {
  display: flex;
  gap: var(--spacing-xs);
  align-items: baseline;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
}

.fact__base {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* --- 02 · Что входит в работу --- */
.parts {
  padding-block: var(--spacing-2xl);
}

.parts__title { margin-bottom: var(--spacing-lg); }

.parts__grid {
  display: grid;
  gap: var(--spacing-md);
}

.parts__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  counter-reset: part;
  padding: var(--spacing-lg);
  background: var(--color-bg-sheet);
  border-radius: 20px;
}

.parts__item {
  position: relative;
  padding-left: 34px;
  font-size: 16px;
  line-height: 26px;
  counter-increment: part;
}

.parts__item::before {
  content: counter(part);
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-on-action);
  background: var(--color-bg-action);
  border-radius: var(--radius-pill);
}

.parts__aside {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  background: var(--color-story-3);
  border-radius: 20px;
}

.parts__need {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 16px;
  line-height: 26px;
}

.parts__need li { padding-left: 18px; position: relative; }

.parts__need li::before {
  content: "—";
  position: absolute;
  left: 0;
}

.parts__req { color: var(--color-text-secondary); }

/* --- 08 · Другие работы --- */
.related {
  padding-block: var(--spacing-2xl);
  background: var(--color-bg-sheet);
}

.related__title { margin-bottom: var(--spacing-lg); }

.related__grid {
  display: grid;
  gap: var(--spacing-sm);
}

.related__card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 20px var(--spacing-lg);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
}

.related__name {
  grid-area: 1 / 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
}

.related__meta {
  grid-area: 2 / 1;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--color-text-secondary);
}

.related__go {
  grid-area: 1 / 2 / 3 / 3;
  width: 14px;
}

@media (min-width: 1240px) {
  .crumbs { padding-block: 11px; }

  .lhero { padding-block: 48px 56px; }

  .lhero .column {
    flex-direction: row;
    gap: var(--spacing-2xl);
    align-items: center;
  }

  .lhero__text {
    width: 740px;
    flex-shrink: 0;
  }

  .lhero__title,
  .lhero__lead { max-width: 640px; }

  .lhero__mascot {
    width: 344px;
    align-self: center;
    margin-top: 0;
    margin-left: auto;
  }

  .lhero__form { padding: 20px 20px 16px; }

  .lhero__fields {
    flex-direction: row;
    gap: var(--spacing-sm);
    align-items: center;
  }

  .lhero__fields .field { width: 196px; }
  .lhero__fields .contact { width: 296px; }

  .lhero__fields .btn--primary {
    width: 184px;
    height: 70px;
    padding-inline: 0;
  }

  .facts { gap: var(--spacing-md); }

  .parts { padding-block: 72px; }
  .parts__title { margin-bottom: var(--spacing-xl); }

  .parts__grid {
    grid-template-columns: 1fr 380px;
    gap: var(--spacing-lg);
  }

  .related { padding-block: 72px; }
  .related__title { margin-bottom: var(--spacing-xl); }

  .related__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

/* ======================================================================
   Плашка согласия на статистику
   Макет: «Плашка cookie» (281:117). Висит над содержимым до «Принять».
   ====================================================================== */
.cookie {
  position: fixed;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  /* Не page-gutter: на десктопе он 120, и плашка висела бы посреди
     экрана. Плавающей плашке хватает поля от края. */
  padding: 20px;
  pointer-events: none;
}

.cookie__card {
  display: flex;
  width: min(100%, var(--page-max));
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-start;
  margin-inline: auto;
  padding: 20px;
  pointer-events: auto;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-soft);
  border-radius: 20px;
}

.cookie__text { color: var(--color-text-secondary); }

.cookie__text a {
  color: var(--color-text-accent);
  text-decoration: underline;
}

.cookie__accept {
  width: 100%;
  height: 48px;
}

@media (min-width: 1240px) {
  .cookie__card {
    flex-direction: row;
    gap: 20px;
    align-items: center;
    padding: var(--spacing-lg);
  }

  .cookie__text { flex: 1; }

  .cookie__accept {
    width: 160px;
    height: 58px;
    flex-shrink: 0;
  }
}

/* ======================================================================
   Правовой документ: соглашение, политика, согласие
   Макет: «Политика · desktop 1440» (204:306), «mobile 390» (79:152).
   На телефоне оглавление над текстом и без маскота, на десктопе
   оглавление с маскотом слева, текст колонкой 760 справа.
   ====================================================================== */
.doc {
  padding-block: var(--spacing-lg) var(--spacing-xl);
}

.doc__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-lg);
}

/* Заголовок документа — 32/37 и на десктопе: в макете он мельче H1
   главной, 52 пункта на названии политики кричат. */
.doc__title.t-h1 {
  font-size: 32px;
  line-height: 37px;
  letter-spacing: -0.8px;
}

.doc__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.doc__toc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--spacing-md);
  background: var(--color-bg-sheet);
  border-radius: var(--radius-lg);
}

.doc__toc ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 23px;
}

.doc__toc a { color: var(--color-text-accent); }
.doc__toc a:hover { text-decoration: underline; }

.doc__mascot { display: none; }

.doc__text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 28px;
}

.doc__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  /* Шапка не липкая, но якорь всё равно не должен прижимать заголовок
     к самому краю окна. */
  scroll-margin-top: var(--spacing-lg);
}

.doc__section a,
.doc__note a {
  color: var(--color-text-accent);
  text-decoration: underline;
}

.doc__list li::before { content: "— "; }

.doc__note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-md);
  background: var(--color-bg-accent-soft);
  border-radius: var(--radius-lg);
}

.doc__note .t-body-s { color: var(--color-text-secondary); }

@media (min-width: 1240px) {
  .doc { padding-top: 48px; }

  .doc__body {
    flex-direction: row;
    gap: 80px;
    align-items: flex-start;
    padding-block: var(--spacing-lg) 40px;
  }

  .doc__aside {
    display: flex;
    width: 320px;
    flex-shrink: 0;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .doc__mascot {
    display: block;
    width: 320px;
    height: 300px;
    object-fit: contain;
  }

  .doc__text { width: 760px; }
}

/* ======================================================================
   404
   Макет: «404 · desktop 1440» (195:344), «mobile 390» (195:381).
   На телефоне маскот под текстом, на десктопе справа.
   ====================================================================== */
.lost {
  padding-block: var(--spacing-2xl) 48px;
}

.lost .column {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
}

.lost__text {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--spacing-md);
}

.lost__lead,
.lost__links {
  font-size: 16px;
  line-height: 26px;
}

.lost__lead { color: var(--color-text-muted); }

.lost__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lost__links a { color: var(--color-text-accent); }
.lost__links a:hover { text-decoration: underline; }

.lost__art {
  width: 240px;
  height: 280px;
  object-fit: contain;
}

@media (min-width: 1240px) {
  .lost { padding-block: 80px 100px; }

  .lost .column {
    flex-direction: row;
    gap: 60px;
  }

  .lost__text { flex: 1; }

  .lost__lead,
  .lost__links {
    font-size: 18px;
    line-height: 29px;
  }

  .lost__art {
    width: 380px;
    height: 440px;
  }
}

/* ======================================================================
   Заявка ушла
   Макет: «Заявка ушла · desktop 1440» (196:386), «mobile 390» (196:429).
   ====================================================================== */
.sent {
  padding-block: var(--spacing-2xl) 48px;
}

.sent__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: var(--spacing-lg) 20px;
  background: var(--color-story-3);
  border-radius: 20px;
}

.sent__art {
  width: 200px;
  height: 240px;
  object-fit: contain;
}

.sent__text {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 14px;
}

.sent__lead,
.sent__summary {
  font-size: 16px;
  line-height: 26px;
}

.sent__summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin: 0;
}

.sent__summary div {
  display: flex;
  gap: var(--spacing-sm);
}

/* Подписи — secondary, а не muted из макета: на мятной подложке muted
   не добирает контраста 4,5 (см. base.css). */
.sent__summary dt {
  width: 120px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

/* Длинный адрес почты переносится, а не выталкивает карточку за экран. */
.sent__summary dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.sent__bot { width: 100%; }

.sent__note { color: var(--color-text-secondary); }

@media (min-width: 1240px) {
  .sent { padding-block: 72px 96px; }

  .sent__card {
    flex-direction: row;
    gap: 48px;
    padding: 44px 48px;
  }

  .sent__art {
    width: 300px;
    height: 360px;
  }

  .sent__text { flex: 1; }

  .sent__lead {
    font-size: 18px;
    line-height: 29px;
  }

  .sent__bot { width: 280px; }
}