/* ============================================================================
   ГЛАВНАЯ: ОДНА КОЛОНКА, ОДИН ЗАГОЛОВОК, ОДИН РИТМ

   Главная собиралась слоями (home-cf-v1/v2, *-v1…v5 по секциям), и каждый
   слой задавал свою ширину и свою шапку секции. На 1440px левый край текста
   гулял между 64, 145, 152 и 329 пикселями, заголовки секций были шести
   разных кеглей (52–68px), а описание справа начиналось то на 702, то на
   862px. По отдельности каждая секция выглядела нормально, при прокрутке —
   «криво».

   Этот файл подключается последним и не вводит новой графики. Он только
   сводит уже существующие секции к трём правилам:
     1. Одна колонка текста — .container (1200px минус поля 32px), левый край
        у всех секций один. Шире колонки выходят только цветные «сцены»
        (первый экран и заявка) и лента логотипов — намеренно, во всю ширину.
     2. Одна шапка секции: заголовок слева, пояснение справа, выровнены по
        нижней строке; одинаковые кегль, колонки и отступ до содержимого.
     3. Один шаг между карточками.
   ========================================================================= */

.site-home--cf-v2 {
  --home-rail: calc(var(--cf2-rail) - 2 * var(--page-padding-x-lg));
  --home-h2: clamp(2.4rem, 4vw, 3.6rem);
  --home-head-gap: clamp(40px, 4vw, 56px);
  --home-card-gap: 16px;
}

/* --- 1. Колонка -----------------------------------------------------------
   Почта и проекты жили в «широкой» оболочке 1480px, остальное — в 1200px.
   Макет веб-почты от этого не страдает: при 1440px он 712px шириной, а свою
   настольную раскладку держит и на 580px (так он выглядел на 1200px). */
.site-home--cf-v2 .mail-product-section > .container,
.site-home--cf-v2 .site-footer > .container {
  width: min(calc(100% - 64px), var(--cf2-rail));
  max-width: var(--cf2-rail);
}

/* Те же ступени, что у общего .container главной (home-cf-v2). */
@media (max-width: 63.999rem) {
  .site-home--cf-v2 .mail-product-section > .container,
  .site-home--cf-v2 .site-footer > .container {
    width: min(calc(100% - 48px), var(--cf2-rail));
  }
}

@media (max-width: 47.999rem) {
  .site-home--cf-v2 .mail-product-section > .container,
  .site-home--cf-v2 .site-footer > .container {
    width: min(calc(100% - 32px), var(--cf2-rail));
  }
}

.site-home--cf-v2 .mail-product-section .mailflow-benefits {
  width: 100%;
}

@media (min-width: 68.75rem) {
  .site-home--cf-v2 .mail-product-section__layout {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: clamp(40px, 4vw, 56px);
  }

  /* В макете стало на ~100px меньше места, а окно «Новое сообщение»
     осталось 390px и закрывало почти весь список писем. Сужено вместе
     с боковой колонкой — список снова читается, как в Gmail. */
  .site-home--cf-v2 .webmail-showcase__body {
    grid-template-columns: 160px minmax(0, 1fr);
  }

  .site-home--cf-v2 .webmail-showcase__composer {
    right: 16px;
    grid-template-rows: 36px 32px 32px minmax(64px, 1fr) 46px;
    width: min(320px, 50%);
    height: 250px;
  }
}

/* Заголовки витрины почты и заявки — того же кегля, что и шапки секций. */
.site-home--cf-v2 .mail-product-section__copy .type-h2,
.site-home--cf-v2 #contact .contact-band .type-h2 {
  font-size: var(--home-h2);
}

/* Лента логотипов остаётся широкой, а шапка над ней встаёт в колонку. */
.site-home--cf-v2 #cases .mailcore-partners__head {
  width: min(100%, var(--home-rail));
  margin-inline: auto;
}

/* partners-v1 сужает оболочку ленты «до 64rem включительно», а общий
   .container — «до 63.999rem»: ровно на 1024px (iPad горизонтально)
   проекты стояли на 8px левее остальных секций. */
@media (min-width: 64rem) {
  .site-home--cf-v2 .mailcore-partners__container {
    width: min(1480px, calc(100% - 64px));
  }
}

/* --- 2. Шапка секции ------------------------------------------------------ */
.site-home--cf-v2 :is(
  #products .mailcore-products__head,
  #cases .mailcore-partners__head,
  #readiness .section-head,
  #pricing .mailcore-pricing__head,
  #features .section-head,
  #how .migration-head
) {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas:
    "kicker kicker"
    "title  lead";
  column-gap: clamp(40px, 6vw, 88px);
  row-gap: 0;
  align-items: end;
  max-width: none;
  margin-block: 0 var(--home-head-gap);
  text-align: start;
}

.site-home--cf-v2 :is(#products .mailcore-products__head .eyebrow, #cases .mailcore-partners__kicker) {
  grid-area: kicker;
  margin: 0 0 18px;
}

.site-home--cf-v2 :is(
  #products .mailcore-products__head,
  #cases .mailcore-partners__head,
  #readiness .section-head,
  #pricing .mailcore-pricing__head,
  #features .section-head,
  #how .migration-head
) .type-h2 {
  grid-area: title;
  max-width: none;
  margin: 0;
  font-size: var(--home-h2);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.site-home--cf-v2 :is(
  #products .mailcore-products__head,
  #cases .mailcore-partners__head,
  #readiness .section-head,
  #pricing .mailcore-pricing__head,
  #features .section-head,
  #how .migration-head
) .lead {
  grid-area: lead;
  justify-self: start;
  max-width: 44ch;
  margin: 0;
  padding-block-end: .3em;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.55;
}

/* Центрированные шапки (вопросы, блог) — тот же кегль. */
.site-home--cf-v2 :is(#faq, #blog) .section-head .type-h2 {
  font-size: var(--home-h2);
  font-weight: 600;
  letter-spacing: -.052em;
}

.site-home--cf-v2 :is(#faq, #blog) .section-head {
  margin-block-end: var(--home-head-gap);
}

@media (max-width: 61.999rem) {
  .site-home--cf-v2 :is(
    #products .mailcore-products__head,
    #cases .mailcore-partners__head,
    #readiness .section-head,
    #pricing .mailcore-pricing__head,
    #features .section-head,
    #how .migration-head
  ) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "kicker"
      "title"
      "lead";
    row-gap: 16px;
  }

  .site-home--cf-v2 :is(#products .mailcore-products__head .eyebrow, #cases .mailcore-partners__kicker) {
    margin-block-end: 2px;
  }

  .site-home--cf-v2 :is(
    #products .mailcore-products__head,
    #cases .mailcore-partners__head,
    #readiness .section-head,
    #pricing .mailcore-pricing__head,
    #features .section-head,
    #how .migration-head
  ) .lead {
    max-width: 52ch;
    padding-block-end: 0;
  }
}

@media (max-width: 47.999rem) {
  .site-home--cf-v2 {
    --home-h2: clamp(2.25rem, 10vw, 2.75rem);
    --home-head-gap: 32px;
  }
}

/* --- 3. Шаг между карточками ---------------------------------------------- */
.site-home--cf-v2 #products .mailcore-products__grid,
.site-home--cf-v2 #readiness .readiness-grid,
.site-home--cf-v2 #features .grid,
.site-home--cf-v2 .home-blog__grid {
  gap: var(--home-card-gap);
}

/* --- Что вы получите ------------------------------------------------------
   Светлая карточка ниже тёмной соседки, и под пятой строкой оставалась
   пустая полоса. Строки теперь делят высоту карточки поровну: текст стоит
   у верхней линии строки, как в таблице, и галочка остаётся напротив
   заголовка пункта. */
.site-home--cf-v2 #readiness .readiness-grid > .card:first-child {
  display: flex;
  flex-direction: column;
}

.site-home--cf-v2 #readiness .readiness-grid > .card:first-child .launch-board {
  flex: 1 1 auto;
  grid-auto-rows: 1fr;
}

/* --- Как проходит переезд -------------------------------------------------
   Текст шагов был прижат к низу колонки (margin-top: auto), поэтому
   заголовок третьего шага, у которого описание в три строки, стоял на 24px
   выше двух соседних. Теперь все три начинаются на одной высоте. */
.site-home--cf-v2 #how .migration-panel--v2 .migration-step {
  min-height: 0;
}

.site-home--cf-v2 #how .migration-step__copy {
  margin-block-start: 0;
}

.site-home--cf-v2 #how .migration-panel--v2 .migration-step__number {
  margin-block-end: clamp(24px, 2.6vw, 36px);
}

/* --- Вопросы: шеврон был едва виден -------------------------------------------
   Он красился в --text-subtle (#b9aaa4 на белом, контраст 2,3:1) — стрелка
   читалась как грязь на линии, а не как «раскрыть». */
.site-home--cf-v2 #faq .faq__chevron {
  width: 20px;
  height: 20px;
  color: #6a625e;
}

.site-home--cf-v2 #faq .faq__q:hover .faq__chevron {
  color: currentColor;
}

/* --- Заявка ----------------------------------------------------------------
   Оранжевая сцена заявки — пара к первому экрану, и ширина у неё должна
   быть та же: край в край с отступом 8px. Раньше поля .container (32px)
   делали её на 64px уже первого экрана. Содержимое внутри встаёт в ту же
   колонку, что и весь текст страницы. */
.site-home--cf-v2 #contact > .container {
  padding-inline: 0;
}

/* Поле сцены = 8px её отступа + поле колонки: на широком окне это
   (ширина − 1200)/2 + 32, на ноутбуке не меньше 56px (колонка там начинается
   с 64px), на планшете 32px (колонка с 40px). На телефоне у сцены своя
   посадка — узкая, чтобы форме хватило ширины. */
@media (min-width: 64rem) {
  .site-home--cf-v2 #contact .contact-band {
    padding-inline: max(56px, calc((100% - var(--cf2-rail)) / 2 + var(--page-padding-x-lg)));
    /* Было .85fr / minmax(400px, .75fr). Когда форма упирается в свои
       400px, у текста остаётся один .85fr, а сумма долей меньше единицы
       забирает только 85% остатка: на 1024px форма не доходила до края
       колонки на 77px. Те же пропорции в долях не меньше единицы. */
    grid-template-columns: minmax(0, 1.13fr) minmax(400px, 1fr);
  }
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
  .site-home--cf-v2 #contact .contact-band {
    padding-inline: 32px;
  }
}

/* --- Подвал ------------------------------------------------------------------
   Над колонками подвала было 192px пустоты: 80px поля самого подвала плюс
   112px поля его контейнера, а под ними — ещё и линия. После оранжевой
   сцены заявки линия не нужна, достаточно воздуха. */
.site-home--cf-v2 .site-footer {
  padding-block: clamp(56px, 6vw, 80px) 40px;
}

.site-home--cf-v2 .site-footer > .container {
  padding-block-start: 0;
}

.site-home--cf-v2 .site-footer__cols {
  grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-top: 0;
  border-top: 0;
}

.site-home--cf-v2 .footer-blurb {
  max-width: 30ch;
  line-height: 1.6;
}

@media (max-width: 61.999rem) {
  .site-home--cf-v2 .site-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-home--cf-v2 .site-footer__cols > .footer-brand {
    grid-column: 1 / -1;
  }
}

/* --- Шапка: зазор перед «Кабинетом» ----------------------------------------
   Слот аккаунта держит 300px, пока идёт проверка входа: в гостевом
   состоянии в нём две кнопки, и шапка не должна дёргаться. Но и после
   входа слот оставался 300px, а плашка «Кабинет» в нём — 150px, прижатая
   вправо: между «Войти в почту» и «Кабинетом» висела пустота. Резерв
   нужен только пока ответа нет и для гостя. */
@media (min-width: 48rem) {
  .site-home--cf-v2 .mailcore-auth--home:not([data-auth-state="pending"]):not([data-auth-state="guest"]) {
    min-inline-size: 0;
  }
}