/* Главная франшизы — правила только этой страницы.
   Подключается после site.css и shell.css и только в franchise/index.html,
   всё под body.page-home: остальные восемь страниц эти правила не видят.
   Слоёв нет намеренно: обычные правила вне слоя перебивают слоёные из
   site.css. Токены те же, новых цветов,
   шрифтов и радиусов нет (§4–6 дизайн-кода). */

/* ——— первый экран ———
   Подзаголовок внутри h1 шёл тем же кеглем, что обещание: заголовок
   на 1440 вырастал до шести строк, цифры уезжали под край экрана,
   на 375×667 тоже (проверка fold в tools/check-page.js). Обещание
   остаётся единственным крупным размером экрана, подзаголовок
   набирается кеглем подводки, текст h1 не меняется. */
.page-home .hero h1{font-size:clamp(28px,8.4vw,40px);margin-block:10px 14px}
.page-home .hero h1 .h1-sub{
  margin-block-start:.5em;font-family:var(--font-text);font-weight:500;
  font-size:clamp(18px,1.7vw,24px);line-height:1.35;letter-spacing:0;color:var(--clean-white);
  text-wrap:pretty;
}
/* Решение заказчика от 30 октября 2026: выделенные слова в h1 первого экрана набраны City Cyan, как было до доработки (согласованное отступление от §4.2). */
.page-home .hero h1 em{color:var(--city-cyan)}
.page-home .hero__lead{color:var(--clean-white)}

/* Вторая кнопка — текстовая ссылка, а не вторая заливка (§7.5): одна
   основная кнопка на экран. Тап-цель остаётся 48 px. На телефоне ссылка
   встаёт в строку с кнопкой, а не второй пилюлей под ней. */
.page-home .hero__cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 22px}
.page-home .hero__cta .btn{flex:0 0 auto}
.page-home .hero__cta .btn--ghost,
.page-home .hero__cta .btn--ghost:hover{
  border-color:transparent;padding-inline:2px;min-height:48px;
  color:var(--blue-up);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;
}
.page-home .hero__cta .btn--ghost:hover{text-decoration-thickness:2px}

/* цифры героя на телефоне — две в строку: первое доказательство
   встаёт в первый экран рядом с кнопкой */
@media (max-width:599.98px){
  .page-home .hero__inner{padding-block-start:22px}
  .page-home .hero .figs{grid-template-columns:1fr 1fr;column-gap:18px;margin-block-start:22px}
  .page-home .hero .fig+.fig{
    margin-block-start:0;padding-block-start:0;border-block-start:0;
    padding-inline-start:18px;border-inline-start:1px solid rgba(248,251,252,.14);
  }
  .page-home .hero .fig b{font-size:26px}
  .page-home .hero .fig span{font-size:15px;line-height:1.35;margin-block-start:7px}
  .page-home .hero__note{margin-block-start:14px}
  /* кнопка и ссылка помещаются в одну строку с 360 px */
  .page-home .hero__cta{column-gap:10px}
  .page-home .hero__cta .btn--primary{padding-inline:14px}
  .page-home .hero__cta .btn--ghost{padding-inline:0}
  /* черта перед eyebrow переносила его на вторую строку */
  .page-home .hero .eyebrow::before{display:none}
}
@media (min-width:600px){
  .page-home .hero h1{font-size:clamp(40px,6.4vw,56px)}
}
/* На десктопе герой ровно в высоту окна под шапкой: цифры стоят
   у нижнего края первого экрана, а не на 30–90 px ниже него. */
@media (min-width:900px) and (min-height:481px){
  .page-home .hero{min-height:min(calc(100svh - var(--hdr-h)),960px)}
  /* «Франшиза умной прачечной» — одной строкой в колонке 880 px:
     на +12 px (66,7 при 1440) обещание ломалось на три строки */
  .page-home .hero h1{font-size:calc(clamp(36px,3.8vw,56px) + 4px);margin-block:12px 18px}
}
@media (max-height:480px) and (orientation:landscape){
  .page-home .hero h1{font-size:clamp(24px,3.1vw,32px)}
  .page-home .hero h1 .h1-sub{font-size:16px;margin-block-start:.35em}
}

/* «IT-» не остаётся на строке без своего слова */
.page-home .nowrap{white-space:nowrap}

/* ——— бегущий текст: 16 px и полный цвет контекста ———
   Абзацы были 15–15,5 px в --steel-ink и в светло-сером на тёмном:
   на длинной странице читались как подписи. Иерархия — размером. */
.page-home .head p:not(.eyebrow),
.page-home .card p,
.page-home .path p,
.page-home .step p,
.page-home .island__lead,
.page-home .faq .answer,
.page-home .home-copy{font-size:var(--fs-body);color:var(--deep-city)}
.page-home .head p:not(.eyebrow),.page-home .island__lead{font-size:var(--fs-lead)}
.page-home .on-deep .head p:not(.eyebrow),
.page-home .on-deep .card p,
.page-home .on-deep .step p,
.page-home .on-deep .island__lead,
.page-home .on-deep .home-copy{color:var(--clean-white)}
.page-home .island__lead--app,.page-home .island__more{font-size:var(--fs-body)}
.page-home .slides.is-carousel .slide p{color:var(--deep-city)}
.page-home .head p:not(.eyebrow) + p{margin-block-start:12px}
.page-home .ticks li{font-size:var(--fs-body)}
.page-home .step h3{font-size:var(--fs-h3)}
/* подпись под логотипом группы была 12,5 px — мельче любого текста страницы */
.page-home .group__tile span{font-size:13px}
.page-home .rating .meta{font-size:var(--fs-small)}

/* ——— итоговые цифры крупно ———
   Запуск и окупаемость формата — главный ответ секции на «сколько»,
   а стояли кеглем 26–36 px, мельче заголовка. Теперь — шкала h1. */
.page-home .keyfigs dd{font-size:var(--fs-h1);letter-spacing:-.035em}
.page-home .keyfigs dt{font-size:var(--fs-body)}

/* полноразмерная прачечная: цифры встают рядом с заголовком, справа
   от него на широком экране — вместо пустой правой половины */
.page-home .home-headfigs{display:grid;gap:clamp(20px,3vw,32px);margin-block-end:clamp(28px,3.6vw,52px)}
.page-home .home-headfigs .head{margin-block-end:0}
.page-home #full .home-headfigs .keyfigs{margin-block-start:0}
@media (min-width:900px){
  .page-home .home-headfigs{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(32px,5vw,72px)}
}

/* ——— модели сотрудничества: 2×2 вместо четырёх длинных строк ———
   В строку на 1100 px текст занимал левую половину, ссылка — правый
   край, середина пустовала. Карточки ряда одной высоты (§6.1),
   ссылка прижата к низу. Подъём на 2 px при наведении говорит
   «это нажимается» — карточка целиком ссылка. */
@media (min-width:900px){
  .page-home .paths{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .page-home .path{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:28px}
  .page-home .path__go{margin-block-start:auto;padding-block-start:10px;white-space:normal}
}
.page-home .path{transition:border-color .16s var(--ease),transform .18s var(--ease)}
@media (hover:hover){
  .page-home .path:hover{transform:translateY(-2px)}
}

/* ——— слайдер «Технологии» ———
   Входящий слайд въезжает справа со сдвигом 28 px, а поле страницы
   на телефоне 20 px: каждые 4 с текст на 0,3 с выходил за край окна,
   и телефон раздвигал страницу (проверка slides). Дорожка слайдов
   обрезает сдвиг по горизонтали; управление лежит вне неё, фокус
   стрелок не режется. Без overflow:clip (iOS 15) — hidden. */
.page-home .slides.is-carousel .slides__track{overflow:hidden;overflow-x:clip;overflow-y:visible}

/* ——— заявка ———
   Форма в три раза выше текста слева: на широком экране текст
   едет рядом с формой, пока её заполняют, а не остаётся вверху
   над пустой колонкой. */
@media (min-width:900px){
  .page-home #apply .home-apply__text{position:sticky;top:calc(var(--hdr-h) + 32px)}
}

/* ——— фокус не уходит под шапку и плавающую кнопку ———
   При переходе по Tab браузер докручивает до элемента с учётом
   scroll-padding: без него поле или ссылка вставали под шапку 72 px
   или под кнопку заявки внизу телефона (WCAG 2.4.11). */
html:has(body.page-home){scroll-padding-block:calc(var(--hdr-h) + 16px) 96px}