/* Финальный призыв web.partials.cta-final — главная («Главное — начать»), «О компании», контакты, блог. */

/* Последний блок страницы: под ним — отступ секции до подвала на любой странице (26.10,
   «почему прилипло к футеру»): зелёная плашка вплотную к тёмно-зелёному подвалу сливается. */
body.w-page .w-cta-final { margin-bottom: var(--w-section-gap); }

/* =====================================================================
   «Главное — начать» (26.10, Анастасия, «сбалансированный» v1).
   Плашка ~452px, поля 48; заголовок → подзаголовок 16 → факты 24 → кнопка 32.
   Факты — белые цифры Bebas и подписи 70%, тонкие разделители 20%, без плашек.
   Обложка «Проекты ДОМ45» из фото реальных проектов, наклонная, со второй
   страницей позади, обрезана краями блока.
   ===================================================================== */
.w-start {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    overflow: hidden;
    /* Декор не выходит за плашку: листы обложки начинаются ≥24px ниже верхнего края
       (задний лист у края читался как вылезший над плашкой, 26.10), снизу и справа их
       обрезает overflow с тем же скруглением. */
    /* Не фиксированная высота, а минимум: на планшете заголовок в три строки выталкивал
       кнопку к самому краю плашки (28.10, Анастасия). */
    min-height: 452px;
    border-radius: 28px;
    background: #1D6047;
    color: #fff;
}

.w-start__body { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-2xl) 0 var(--space-2xl) 64px; }
.w-start__title { margin: 0; font: 400 64px/1 var(--w-font-display); text-transform: uppercase; }
.w-start__lead { margin: var(--space-m) 0 0; color: rgba(255, 255, 255, .8); font-size: 17px; line-height: 1.45; }

.w-start__facts { display: flex; margin: var(--space-l) 0 0; padding: 0; list-style: none; }
.w-start__facts li { padding: 0 var(--space-l); }
.w-start__facts li:first-child { padding-left: 0; }
.w-start__facts li + li { border-left: 1px solid rgba(255, 255, 255, .2); }
.w-start__facts b { display: block; font: 400 26px/1 var(--w-font-display); text-transform: uppercase; white-space: nowrap; }
.w-start__facts span { display: block; margin-top: var(--space-2xs); color: rgba(255, 255, 255, .7); font-size: 13px; }

body.w-page .w-button.w-start__btn { margin-top: var(--space-xl); background: #fff; color: var(--w-btn-ink); }
body.w-page .w-button.w-start__btn::after { background-color: var(--w-btn); background-image: var(--w-btn-arrow-white); }
@media (hover: hover) {
    body.w-page .w-button.w-start__btn:hover { background: #fff; }
    body.w-page .w-button.w-start__btn:hover::after { background-color: var(--w-btn-hover); }
}

/* Свой слой (translateZ): без него Chrome рисовал наклонную обложку второй раз поверх
   заголовка — на телефоне, при плашке выше обычной («О компании», 26.10). */
.w-start__cover { position: relative; align-self: stretch; min-height: 452px; transform: translateZ(0); }
.w-start__page { position: absolute; display: flex; flex-direction: column; width: 380px; height: 470px; padding: var(--space-l); border-radius: 12px 20px 20px 12px; }
.w-start__page--front { left: 60px; top: 56px; z-index: 2; background: #123d2d; box-shadow: -18px 28px 60px rgba(0, 0, 0, .4); transform: rotate(-7deg); }
.w-start__page--back { left: 290px; top: 84px; z-index: 1; background: #f1f4f1; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); transform: rotate(5deg); }
.w-start__top { display: flex; align-items: center; gap: var(--space-s); font: 400 22px var(--w-font-display); letter-spacing: .5px; text-transform: uppercase; }
.w-start__top img { height: 42px; width: auto; }
.w-start__grid { display: grid; flex: 1; grid-template-columns: 1fr 1fr; gap: var(--space-xs); margin-top: 18px; }
.w-start__page--back .w-start__grid { margin-top: 0; }
/* Задний лист опущен, чтобы его угол не выглядывал над верхним краем переднего (28.10, Анастасия). */
.w-start__th { position: relative; border-radius: 8px; background-position: center; background-size: cover; }
.w-start__th span { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: 12px; font-weight: 700; }

@media (max-width: 1279px) {
    .w-start { grid-template-columns: 1.1fr 1fr; }
    .w-start__body { padding-left: var(--space-2xl); }
    .w-start__title { font-size: 52px; }
    .w-start__facts li { padding: 0 var(--space-m); }
    .w-start__page--front { left: 30px; }
    .w-start__page--back { left: 240px; }
}

@media (max-width: 767px) {
    .w-start { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; }
    .w-start__cover { order: -1; height: 280px; min-height: 0; overflow: hidden; }
    .w-start__page { width: 250px; height: 310px; padding: var(--space-m); }
    /* Листы начинаются ниже верхнего края плашки (≥24px): иначе светлый задний лист
       читался как вылезший за плашку (26.10, «поправь везде в cta»). */
    .w-start__page--front { left: 22px; top: 40px; }
    .w-start__page--back { left: 172px; top: 52px; }
    .w-start__top { font-size: 16px; }
    .w-start__top img { height: 30px; }
    .w-start__grid { gap: 5px; margin-top: 10px; }
    .w-start__th span { font-size: 10px; }
    .w-start__body { padding: var(--space-l); }
    .w-start__title { font-size: clamp(36px, 11vw, 44px); }
    .w-start__lead { margin-top: var(--space-xs); font-size: 15px; }
    /* Три факта не сжимаем: если не влезли в строку — третий уходит на вторую. */
    .w-start__facts { flex-wrap: wrap; row-gap: var(--space-s); margin-top: var(--space-m); }
    .w-start__facts li { padding: 0 var(--space-s); }
    .w-start__facts b { font-size: 20px; }
    .w-start__facts span { font-size: 12px; }
    /* Перенесённый на вторую строку факт — без разделителя слева (на узких телефонах переносится третий). */
    .w-start__facts li.is-wrapped { padding-left: 0; border-left: 0; }
    body.w-page .w-button.w-start__btn { align-self: stretch; margin-top: var(--space-l); }
}