/* CalCash · сайт · главная — только раскладка страницы. Сами блоки — общие модули
   (templates/_includes/_blk_*.html + static/blocks.css), каталог docs/design/BLOCKS.md. */

.home { display: flex; flex-direction: column; gap: var(--site-section-gap); padding-block: 32px 56px; }
@media (min-width: 1080px) {
  .home { padding-block: 56px 96px; }
}

/* ---------- Цельная главная (01.10, принципы octo-service.com) ----------
   Разделы — полосы во всю ширину, фон от края до края, смена фона ровной полосой без щелей.
   Свои подложки блоков (тёмная «Бесплатно», калькуляторы, вопросы, призыв, первый экран) становятся полосами:
   скругление и внешние поля сняты, контент держится в колонке 1240px. Скругления — только у содержимого внутри.
   Ритм фонов — вариант Б (владелец выбрал 01.10 из двух): светлый верх (кремовый/белый), затем одна тёмная
   «глава» «Бесплатно» + калькуляторы без шва, белые вопросы, зелёный призыв, тёмный подвал. Вариант А (всё светлое) снят. */
.flow { --band-y: 64px; --band-x: max(20px, calc((100% - 1240px) / 2)); }
@media (min-width: 1080px) { .flow { --band-y: 104px; } }
.flow .hero-card { margin: 0; border-radius: 0; }
.home-flow { display: block; }
.band { padding-block: var(--band-y); }
.band > .wrap { max-width: 1280px; }
.band > .wrap > section { margin: 0; }
.flow .free-stage, .flow .tools-stage, .flow .hq-panel {
  border-radius: 0; padding: var(--band-y) var(--band-x);
}
.flow .cta-final { border-radius: 0; padding-block: calc(var(--band-y) + 24px); }
.flow .hq-panel { text-align: left; }
.flow .hq-list { margin: 0; max-width: 880px; }
.flow .tools-stage { gap: 72px; }

/* Ритм Б */
.flow-b .band-1, .flow-b .band-3 { background: var(--cc-color-bg); }
.flow-b .band-2 { background: var(--cc-color-surface); }
.flow-b .free-stage { background: #121312; padding-bottom: calc(var(--band-y) / 2); }
.flow-b .tools-stage { background: #121312; padding-top: calc(var(--band-y) / 2); }
.flow-b .tools-stage .sh-lead { color: rgba(243, 243, 240, .65); }
.flow-b .tools-stage .sh-cap { color: #8FC7A5; }
.flow-b .hq-panel { background: var(--cc-color-surface); }
/* Первый экран — по той же колонке, что разделы ниже (на 1920 текст прилипал к краю). */
@media (min-width: 768px) { .flow .hero { padding-inline: var(--band-x); } }
/* Первый экран — тоже полоса во всю ширину: без своих пропорций, высота по окну (сцену подгоняет blocks.js «как фон»). */
@media (min-width: 1080px) {
  .flow .hero-card { margin: 0; aspect-ratio: auto; height: min(100svh, 900px); min-height: 640px; max-height: none; }
}
@media (min-width: 1080px) {
  .flow .hero-text { max-width: 56%; }
  .flow .hero-h1 { font-size: clamp(56px, 5.2vw, 76px); }
}