/* ===== source: fonts.css ===== */
/* Montserrat 800 + Marck Script — OFL, локальные копии для лендинга */

/* cyrillic */
@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/marck-script-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin */
@font-face {
  font-family: 'Marck Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/marck-script-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== source: habits-scene.css ===== */
/* ==========================================================================
   Лендинг акции «Планы на жизнь» (/plans/). Префикс hb-, обёртка .hb-page.
   Токены продублированы локально: файл грузится только на этой странице.
   Размеры — в px: на сайте `* { font-size: 21px }` задирает и html, поэтому
   rem здесь означал бы не 16, а 21 пиксель, и вся шкала макета поехала бы.
   Страница делится не карточками, а полосами во всю ширину:
   белый → красный → белый → серый. Акцидентные шрифты — Montserrat + Marck Script.
   ========================================================================== */

.hb-page {
  --red: #DA352C;
  --dark-red: #AA1D1D;
  --black: #141412;
  --white: #fff;
  --muted: #F5F5F2;
  --border: #eaeaea;
  --grey-2: #9a9a9a;
  --grey-3: #6b6b6b;
  --ink-55: rgba(20, 20, 18, 0.55);
  --ink-82: rgba(20, 20, 18, 0.82);
  /* оранжевый — цвет ленты осведомлённости о раке крови */
  --amber: #E8A33D;
  --font: 'TT Fors', Arial, sans-serif;
  --font-display: 'Montserrat', 'TT Fors', Arial, sans-serif;
  --font-script: 'Marck Script', cursive;
  --fs-caption: 12px;
  --fs-base: 16px;
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-display: clamp(38.4px, 5.4vw, 72px);
  --fs-title: 42.72px;  /* h2 сайта */
  --r-card: 30.08px;
  --r-pill: 50.08px;
  --r-sm: 12px;
  --sh-card: 0 4px 15px rgba(0, 0, 0, 0.05);
  --sh-hover: 0 12px 28px rgba(0, 0, 0, 0.1);
  --sh-btn: 0 12px 28px rgba(218, 53, 44, 0.28);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.hb-page, .hb-page *, .hb-page *::before, .hb-page *::after { box-sizing: border-box; }

/* Глобальный style.css сайта держит `* { font-family: TT Fors; font-size: 21px }`.
   Нулевая специфичность :where() бьёт `*` (файл грузится позже), но проигрывает
   любому классу — поэтому и лендинг, и форма донатов ниже сохраняют свои размеры. */
:where(.hb-page) :where(*) { font-size: inherit; font-family: inherit; }

.hb-page {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

/* Заголовки — как на всём сайте: TT Fors, вес 400. Montserrat только в hero.
   font-size и text-transform гасим явно: глобальный style.css держит
   `h1 { font-size: 5.75rem; text-transform: uppercase }`, и капс наследовался
   внутрь — рукописная строка hero набиралась заглавными и разъезжалась. */
.hb-page :where(h1, h2, h3) {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: inherit;
  line-height: 1.2;
  text-transform: none;
}
.hb-page :where(p) { margin: 0; }
/* height: auto обязателен — иначе HTML-атрибут height у <img> побеждает aspect-ratio */
.hb-page :where(img) { display: block; max-width: 100%; height: auto; }
.hb-page :where(button) { font-family: inherit; }
.hb-page :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
/* запас под липкую шапку сайта */
.hb-page [id] { scroll-margin-top: 90px; }

.hb-wrap { width: min(1160px, 100% - 40px); margin-inline: auto; }

/* ===== Кнопки ===== */
.hb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50.08px; padding: 0 28px; border-radius: var(--r-pill);
  font-size: var(--fs-base); line-height: 1; border: 1px solid transparent;
  background: var(--red); color: var(--white); text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, border-color .25s;
}
.hb-btn:hover { background: var(--dark-red); border-color: var(--dark-red); transform: translateY(-2px); box-shadow: var(--sh-btn); }
.hb-btn--lg { height: 57.6px; padding: 0 38.4px; font-size: var(--fs-md); }
.hb-btn--block { width: 100%; }

/* ==========================================================================
   Полосы — основной приём деления страницы
   ========================================================================== */
.hb-band { padding: clamp(56px, 7vw, 96px) 0; }
.hb-band--hero { padding: 0 0 clamp(48px, 6vw, 80px); }
.hb-band--accent { background: var(--red); color: rgba(255, 255, 255, 0.92); }
.hb-band--muted { background: var(--muted); }
.hb-band--hairline { border-top: 1px solid var(--border); }

.hb-band__head { max-width: 704px; margin-bottom: clamp(32px, 4vw, 48px); }
.hb-band__title { font-size: var(--fs-title); margin-top: 17.6px; }
.hb-band__sub { margin-top: 16px; color: var(--ink-55); font-size: 15.2px; line-height: 1.55; }

/* метка раздела: короткая черта + капсы */
.hb-eyebrow {
  display: flex; align-items: center; gap: 13.6px;
  font-size: 11.2px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey-3); line-height: 1.4;
}
.hb-eyebrow::before { content: ''; flex: none; width: 44px; height: 2px; background: var(--red); }
.hb-eyebrow--amber::before,
.hb-eyebrow--amber.hb-eyebrow--center::after { background: var(--amber); }
/* центрированный вариант: черта с обеих сторон, чтобы метка держала ось hero */
.hb-eyebrow--center { justify-content: center; text-align: center; }
.hb-eyebrow--center::after { content: ''; flex: none; width: 44px; height: 2px; background: var(--red); }
.hb-band--accent .hb-eyebrow { color: rgba(255, 255, 255, 0.8); }
.hb-band--accent .hb-eyebrow::before { background: var(--white); }

/* ==========================================================================
   Hero
   ========================================================================== */
/* ==========================================================================
   Первый экран: ролик во весь кадр, поверх — бренд кампании и формула.
   Высота ровно во вьюпорт и ни пикселя больше. dvh, а не svh: svh считается по
   вьюпорту с РАЗВЁРНУТОЙ адресной строкой, и когда мобильный Chrome сворачивал
   её при скролле, экран вырастал, а hero — нет: снизу вылезала следующая
   секция. dvh следует за текущим вьюпортом. svh остаётся фолбэком для
   браузеров без dvh — там лучше недобор, чем скролл на высоту адресной строки.
   ========================================================================== */
/* --hb-header — высота липкой шапки сайта, её меряет JS: у .header нет
   фиксированной высоты, она зависит от rem-брейкпоинтов и от того, загрузились
   ли шрифты. Без вычитания низ экрана уходил бы под сгиб ровно на шапку. */
.hb-hero {
  position: relative; display: flex; align-items: center; overflow: hidden;
  height: calc(100vh - var(--hb-header, 0px));
  height: calc(100svh - var(--hb-header, 0px));
  height: calc(100dvh - var(--hb-header, 0px));
  background: var(--black);
}
.hb-hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
}
/* затемнение только слева — справа кадр остаётся чистым */
.hb-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 42%, transparent 70%);
}
/* ::after идёт последним в потоке псевдо/детей — без z-index он накрыл бы контент.
   flex-grow, а не width: 100%: у глобального .wrapper на узких экранах свои
   боковые margin'ы, и жёсткие 100% выносили бы контент за край кадра. */
.hb-hero__in { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }
.hb-hero__scroll { z-index: 2; }

@keyframes hbNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

.hb-hero__eyebrow { margin-bottom: clamp(24px, 3vw, 40px); }

.hb-hero__brand { color: var(--white); max-width: 320px; }
.hb-hero__brand-kicker {
  font-size: 11.2px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.hb-hero__brand-name {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(35.2px, 4.6vw, 64px); line-height: 0.98;
  text-transform: uppercase; letter-spacing: -0.02em;
}

.hb-js .hb-hero__brand { opacity: 0; transform: translateX(-18px); transition: opacity .9s ease, transform 1s var(--ease-out); }
body.is-ready .hb-hero__brand { opacity: 1; transform: none; transition-delay: .45s; }

.hb-hero__title { margin-top: 24px; text-align: center; line-height: 1; }

/* строки заголовка едут из-под маски */
.hb-hero__line { display: block; overflow: hidden; padding-bottom: 0.1em; }
.hb-hero__line > span { display: inline-block; }

/* единственное место с акцидентным гротеском — леттеринг из макета */
.hb-hero__title-main {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--fs-display); text-transform: uppercase;
  color: var(--red); letter-spacing: -0.02em; line-height: 1;
}
.hb-hero__title-sub {
  font-family: var(--font-display); font-weight: 800;
  margin-top: 4px; font-size: clamp(21.6px, 2.6vw, 36px); line-height: 1.15;
}

.hb-hero__accent { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 2.4px; }
.hb-hero__arrow { width: clamp(64px, 8vw, 112px); height: auto; color: var(--black); flex: none; }
.hb-hero__arrow path { stroke-dasharray: 140; stroke-dashoffset: 0; }
.hb-hero__script {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05;
  color: var(--red); white-space: nowrap;
  clip-path: inset(0 0 0 0);
}

.hb-hero__lead { max-width: 34em; margin: 32px auto 0; text-align: center; color: var(--ink-82); line-height: 1.6; }
.hb-hero__actions { margin-top: 32px; text-align: center; }

/* --- стартовые состояния и оркестрация: леттеринг второго экрана отыгрывает,
       когда полоса въезжает в экран (общий для страницы .hb-reveal → .is-in) --- */
.hb-js .hb-hero__eyebrow,
.hb-js .hb-hero__lead {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s ease, transform .9s var(--ease-out);
}
.hb-js .hb-hero__line > span { transform: translateY(115%); transition: transform 1s var(--ease-out); }
.hb-js .hb-hero__script { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); }
.hb-js .hb-hero__arrow path { stroke-dashoffset: 140; transition: stroke-dashoffset .8s ease; }

.hb-promise.is-in .hb-hero__eyebrow,
.hb-promise.is-in .hb-hero__lead { opacity: 1; transform: none; }
.hb-promise.is-in .hb-hero__line > span { transform: none; }
.hb-promise.is-in .hb-hero__script { clip-path: inset(0 0 0 0); }
.hb-promise.is-in .hb-hero__arrow path { stroke-dashoffset: 0; }

.hb-promise.is-in .hb-hero__eyebrow { transition-delay: .2s; }
.hb-promise.is-in .hb-hero__line--main > span { transition-delay: .3s; }
.hb-promise.is-in .hb-hero__arrow path { transition-delay: .7s; }
.hb-promise.is-in .hb-hero__script { transition-delay: .85s; }
.hb-promise.is-in .hb-hero__lead { transition-delay: 1.1s; }

/* зум только для постера-картинки: если играет видео, оно двигается само */
body.is-ready img.hb-hero__media { animation: hbKen 24s ease-in-out 1.2s infinite alternate; }
@keyframes hbKen { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ==========================================================================
   Второй экран: обещание слева, конструктор плана справа.
   Форма здесь — второй экземпляр того же конструктора, что и в секции
   «Ваш план»: состояние у них общее (см. plans.js).
   ========================================================================== */
.hb-promise__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
/* текстовая колонка стала уже — кегль капса подрезан, иначе «ПРЕВРАЩАЙТЕ
   ОБЫЧНЫЕ ДЕЛА» рвётся на три строки и спорит с карточкой формы */
.hb-promise .hb-hero__title { margin-top: 0; text-align: left; }
.hb-promise .hb-hero__title-main { font-size: clamp(28.8px, 3.2vw, 46.4px); }
.hb-promise .hb-hero__script { font-size: clamp(25.6px, 2.8vw, 40px); }
.hb-promise .hb-hero__accent { justify-content: flex-start; }
.hb-promise .hb-hero__lead { max-width: 30em; margin: 24px 0 0; text-align: left; }
/* Ширину карточки задаёт колонка грида, а не собственный max-width формы.
   Селектор через родителя: правило .hb-form с max-width: 600px объявлено ниже
   по файлу, и при равной специфичности выигрывало бы оно. */
.hb-promise__in .hb-form { max-width: none; margin: 0; }

/* ==========================================================================
   Манифест
   ========================================================================== */
.hb-manifest { max-width: 42em; margin-top: 28px; }
.hb-manifest p { font-size: var(--fs-md); line-height: 1.65; }
.hb-manifest p + p { margin-top: 24px; color: rgba(255, 255, 255, 0.78); }

/* ==========================================================================
   Истории подопечных: один герой крупно, остальные — переключением
   ========================================================================== */
.hb-story {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.hb-story__media {
  position: relative; border-radius: var(--r-card); overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--muted); cursor: pointer;
}
.hb-story__media img { width: 100%; height: 100%; object-fit: cover; animation: hbFade .55s var(--ease-out); }
@keyframes hbFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

.hb-story__quote { font-size: clamp(25.6px, 3vw, 38.4px); line-height: 1.15; }
.hb-story__lead { margin-top: 22.4px; color: var(--ink-82); line-height: 1.7; max-width: 34em; }
.hb-story__who { margin-top: 22.4px; font-size: 14.4px; color: var(--grey-3); }
.hb-story__actions { margin-top: 30.4px; display: flex; gap: 12px; flex-wrap: wrap; }

.hb-btn--ghost { background: transparent; color: var(--black); border-color: var(--border); }
.hb-btn--ghost:hover { background: transparent; border-color: var(--black); color: var(--black); box-shadow: none; }

.hb-switch { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hb-switch__item {
  width: 56px; height: 56px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid transparent; background: none; overflow: hidden;
  opacity: 0.5;
  transition: opacity .25s, border-color .25s, transform .25s var(--ease);
}
.hb-switch__item img { width: 100%; height: 100%; object-fit: cover; }
.hb-switch__item:hover { opacity: 0.85; transform: translateY(-2px); }
.hb-switch__item.is-on { opacity: 1; border-color: var(--red); }

.hb-plans__note { max-width: 42em; margin-top: 44px; color: var(--ink-82); line-height: 1.6; }

/* ==========================================================================
   Промо-блок
   ========================================================================== */
.hb-promo {
  display: grid; grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
/* все баннеры выключены в админке — слайдера нет, текст занимает ряд целиком */
.hb-promo--solo { grid-template-columns: 1fr; }
.hb-promo__title { font-size: var(--fs-title); margin-top: 17.6px; }
.hb-promo__text { margin-top: 20px; color: var(--ink-82); line-height: 1.65; max-width: 34em; }
.hb-promo__actions { margin-top: 28px; }

/* ==========================================================================
   Форма плана
   ========================================================================== */
.hb-plan__head { max-width: 640px; margin: 0 auto clamp(32px, 4vw, 44px); text-align: center; }
.hb-plan__head .hb-eyebrow { justify-content: center; }
.hb-plan__title { font-size: var(--fs-title); margin-top: 17.6px; }
.hb-plan__lead { margin-top: 16px; color: var(--ink-82); line-height: 1.6; }

/* форма лежит поверх календаря месяца — выбранный день загорается по всему месяцу */
.hb-plan__stage { position: relative; }

.hb-month {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column;
  color: var(--grey-2); user-select: none;
  transition: opacity .35s var(--ease), visibility .35s;
}
/* на шаге оформления календарь гаснет: панель шага прозрачная (см. .hb-checkout__summary),
   и сетка с подсвеченным днём просвечивала бы сквозь сводку плана */
.hb-month.is-off { opacity: 0; visibility: hidden; }
.hb-month__head { font-size: 12.8px; margin-bottom: 9.6px; }
.hb-month__name { color: var(--grey-3); }
.hb-month__dows {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 11.2px; padding-bottom: 6.4px;
}
.hb-month__dows span { padding-left: 8px; }
.hb-month__grid {
  flex: 1; display: grid;
  grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr;
  border-top: 1px solid #e6e6e2; border-left: 1px solid #e6e6e2;
}
.hb-month__cell {
  border-right: 1px solid #e6e6e2; border-bottom: 1px solid #e6e6e2;
  padding: 6.4px 8px; font-size: 12.8px; color: #c9c9c4;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.hb-month__cell--out { color: #e0e0dc; }
.hb-month__cell.is-on { background: rgba(218, 53, 44, 0.07); color: var(--red); }

.hb-form {
  --hb-pad: clamp(24px, 3vw, 36px);
  position: relative; z-index: 1;
  max-width: 600px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: var(--hb-pad);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.hb-plan__summary {
  position: relative; z-index: 1;
  max-width: 46em; margin: clamp(28px, 3vw, 40px) auto 0;
  text-align: center; font-size: 14.4px; color: var(--ink-55); line-height: 1.6;
}
.hb-plan__summary b { color: var(--black); font-weight: 400; }

/* --- визард: счётчик шагов, на шагах 2–3 под ним шапка плана --- */
.hb-wz-pane[hidden], .hb-planhead[hidden], .hb-own [hidden] { display: none; }

.hb-wz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.hb-wz-top__count { font-size: 12.8px; color: var(--grey-3); }
.hb-wz-top__bar { display: flex; gap: 5px; }
.hb-wz-top__bar i { width: 26px; height: 4px; border-radius: 4px; background: #e6e6e6; transition: background .3s var(--ease); }
.hb-wz-top__bar i.is-on { background: var(--red); }

/* Шапка плана — серая полоса во всю ширину карточки: отрицательные поля равны
   паддингу формы, скругление — радиусу карточки за вычетом её рамки */
.hb-form.is-planned .hb-form__head {
  margin: calc(-1 * var(--hb-pad)) calc(-1 * var(--hb-pad)) 22px;
  padding: 24px var(--hb-pad) 22px;
  background: var(--muted); border-bottom: 1px solid var(--border);
  border-radius: calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;
}
.hb-form.is-planned .hb-wz-top { margin-bottom: 16px; }
.hb-planhead__label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.2px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-3);
}
.hb-planhead__label::before { content: ''; flex: none; width: 32px; height: 2px; background: var(--red); }
/* привычка набрана леттерингом кампании, как «ПРЕВРАЩАЙТЕ ОБЫЧНЫЕ ДЕЛА» на втором экране */
.hb-planhead__habit {
  margin-top: 12px;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(22.4px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--red); overflow-wrap: anywhere;
}
/* подчёркивание на каждой строке, если своё дело длинное и переносится */
.hb-planhead__habit span {
  padding-bottom: 3px;
  background: linear-gradient(var(--red), var(--red)) left bottom / 100% 2px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hb-planhead__when { margin-top: 8px; font-size: var(--fs-md); line-height: 1.3; color: var(--ink-82); }
.hb-planhead__when.is-empty { color: var(--grey-2); }
.hb-planhead__money { margin-top: 8px; font-size: 14.4px; line-height: 1.45; color: var(--ink-82); }
.hb-planhead__money b { font-weight: 400; color: var(--black); }

.hb-wz-q { margin-bottom: 18px; font-size: 22.4px; line-height: 1.25; }
/* фокус на вопрос ставит JS при смене шага — для скринридера, а не для глаз */
.hb-wz-q:focus { outline: none; }
.hb-wz-q--quiet { margin-bottom: 12px; font-size: var(--fs-base); color: var(--ink-82); }
.hb-wz-q--sub { margin-top: 20px; }
.hb-wz-foot { margin-top: 16px; text-align: center; font-size: 12.8px; color: var(--ink-55); }

/* --- шаг 1: четыре примера и своё дело --- */
.hb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hb-tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 84px; padding: 13px 16px 14px; text-align: left;
  border: 1px solid var(--border); border-radius: 22px;
  background: var(--white); color: var(--black); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, opacity .25s var(--ease), transform .15s var(--ease);
}
.hb-tile small { font-size: 12.8px; line-height: 1.2; color: var(--grey-3); transition: color .2s; }
.hb-tile span {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 13.6px; line-height: 1.15; letter-spacing: -0.005em;
}
.hb-tile:hover { border-color: var(--grey-2); }
.hb-tile:active { transform: scale(0.98); }
.hb-tile.is-on { background: var(--red); border-color: var(--red); color: var(--white); }
.hb-tile.is-on small { color: rgba(255, 255, 255, 0.8); }
/* своё дело раскрыто — примеры отходят назад, но остаются кликабельными */
.hb-tiles.is-dim .hb-tile { opacity: 0.4; }
.hb-tiles.is-dim .hb-tile:hover { opacity: 0.8; }

/* Своё дело — главный путь акции, примеры только подсказывают. Поэтому блок
   графитовый, на всю ширину и с красным плюсом: его замечают раньше белых плиток */
.hb-own { margin-top: 10px; border-radius: 22px; background: var(--black); color: var(--white); }
.hb-own__open {
  display: flex; align-items: center; gap: 16px; width: 100%; min-height: 92px;
  padding: 18px 20px; border: 0; border-radius: inherit;
  background: none; color: inherit; text-align: left; cursor: pointer;
}
.hb-own__plus {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: var(--red); color: var(--white);
  transition: transform .25s var(--ease);
}
.hb-own__plus svg, .hb-own__go svg { width: 20px; height: 20px; }
.hb-own__open:hover .hb-own__plus { transform: rotate(90deg); }
.hb-own__title {
  display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 17px; line-height: 1.1;
}
.hb-own__sub { display: block; margin-top: 5px; font-size: 13.6px; line-height: 1.35; color: rgba(255, 255, 255, 0.7); }
.hb-own__edit { padding: 16px 16px 16px 20px; }
.hb-own__label {
  display: block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7);
}
.hb-own__field {
  display: flex; align-items: center; gap: 10px; height: 56px; margin-top: 10px; padding: 0 6px 0 20px;
  border-radius: var(--r-pill); background: var(--white);
  box-shadow: 0 0 0 3px rgba(218, 53, 44, 0.45);
  transition: box-shadow .3s var(--ease);
}
/* фокус показывает кольцо всей пилюли: квадратная обводка .hb-page :focus-visible легла бы внутри скругления */
.hb-own__field:focus-within { box-shadow: 0 0 0 3px var(--red); }
/* поле ловит прилетевшую из hero фразу */
.hb-own__field:has(.is-catch) { box-shadow: 0 0 0 6px rgba(218, 53, 44, 0.6); }
/* 16px не меньше: на iOS поле мельче этого зумит страницу при фокусе */
.hb-own__input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0;
  border: 0; background: none; outline: none;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 16px; color: var(--red);
}
.hb-own__input:focus-visible { outline: none; }
.hb-own__input::placeholder { font-family: var(--font); font-weight: 400; text-transform: none; color: var(--grey-2); }
.hb-own__go {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: var(--red); color: var(--white); cursor: pointer;
  transition: background .2s;
}
.hb-own__go:hover { background: var(--dark-red); }
.hb-own__hint { display: block; margin-top: 10px; font-size: 12.8px; color: rgba(255, 255, 255, 0.6); }
/* на телефоне клавиши Enter нет — подсказка сбивала бы */
@media (hover: none) { .hb-own__hint { display: none; } }

/* --- шаг 2: дни, можно несколько --- */
.hb-days { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-day {
  flex: 1 1 40px; min-width: 40px; height: 48px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--white); font-size: 15.2px; color: var(--black); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s var(--ease);
}
.hb-day:hover { border-color: var(--grey-2); }
.hb-day.is-on { background: var(--red); border-color: var(--red); color: var(--white); }
.hb-day.is-on:hover { background: var(--dark-red); border-color: var(--dark-red); }
.hb-day:active { transform: scale(0.96); }
.hb-days__hint { margin-top: 12px; font-size: 13.6px; line-height: 1.45; color: var(--ink-82); }
.hb-days__dates { margin-top: 6px; font-size: 13.6px; line-height: 1.5; color: var(--ink-55); }
.hb-days__dates:empty { display: none; }
.hb-days__dates b { font-weight: 400; color: var(--red); }

/* «Дальше» графитовая: красная заливка в визарде остаётся только у «Оформить план» */
.hb-wz-next { margin-top: 22px; }
.hb-btn--dark { background: var(--black); }
.hb-btn--dark:hover { background: #2b2b28; border-color: #2b2b28; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); }
.hb-wz-back {
  display: block; margin: 16px auto 0; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13.6px; color: var(--grey-3);
  text-decoration: underline; text-decoration-color: #d6d6d6; text-underline-offset: 3px;
}
.hb-wz-back:hover { color: var(--red); }

/* --- шаг 3: деньги тише привычки — выбор обводкой, без заливки --- */
.hb-amounts { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-amount {
  flex: 1 1 64px; min-width: 0; height: 46px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--white); font-family: inherit; font-size: 15.2px; color: var(--black);
  text-align: center; cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.hb-amount:hover { border-color: var(--grey-2); }
.hb-amount.is-on { border-color: var(--red); color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.hb-amount--custom { width: auto; cursor: text; -moz-appearance: textfield; appearance: textfield; }
.hb-amount--custom::-webkit-outer-spin-button,
.hb-amount--custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hb-amount--custom::placeholder { color: var(--grey-2); }
.hb-amount--custom:focus { outline: none; border-color: var(--red); }

.hb-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hb-period__opt {
  position: relative; display: block; padding: 14px 14px 14px 42px; text-align: left;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--white); color: var(--black); line-height: 1.3; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.hb-period__opt:hover { border-color: var(--grey-2); }
.hb-period__opt b { display: block; font-weight: 400; font-size: 15.2px; }
.hb-period__opt small { display: block; margin-top: 5px; font-size: 12.8px; line-height: 1.35; color: var(--ink-55); }
.hb-period__radio {
  position: absolute; left: 15px; top: 15px; width: 18px; height: 18px;
  border: 1.5px solid #c8c8c8; border-radius: 50%; background: var(--white);
}
.hb-period__opt.is-on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.hb-period__opt.is-on .hb-period__radio {
  border-color: var(--red);
  background: radial-gradient(circle, var(--red) 0 4.5px, var(--white) 5.5px);
}
@media (max-width: 380px) { .hb-period { grid-template-columns: minmax(0, 1fr); } }

.hb-form__submit { margin-top: 26px; }
.hb-form__note { margin-top: 14.4px; text-align: center; font-size: 12.8px; color: var(--ink-55); line-height: 1.45; }
.hb-form__note b { font-weight: 400; color: var(--black); }

.hb-toast {
  margin-top: 16px; padding: 14.4px 19.2px; border-radius: var(--r-card);
  background: rgba(218, 53, 44, 0.08); color: var(--dark-red);
  font-size: 13.6px; line-height: 1.45; text-align: center;
}
.hb-toast[hidden] { display: none; }

/* ==========================================================================
   Календарь-превью — сигнатурный элемент страницы
   ========================================================================== */
/* ==========================================================================
   Партнёры
   ========================================================================== */
.hb-partner-solo { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 56px; }
.hb-partner {
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px;
  text-decoration: none;
}
.hb-partner img {
  max-height: 56px; max-width: 100%; width: auto;
  opacity: 0.85; transition: opacity .25s;
}
.hb-partner span {
  font-size: 12.8px; letter-spacing: 0.06em; color: var(--grey-3);
  transition: color .25s;
}
.hb-partner:hover img { opacity: 1; }
.hb-partner:hover span { color: var(--red); }

/* ==========================================================================
   Ролик кампании целиком
   ========================================================================== */
.hb-film {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--r-card); background: var(--black);
}
.hb-film__actions { margin-top: 28px; text-align: center; }

/* ==========================================================================
   Появление секций
   ========================================================================== */
.hb-js .hb-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .8s var(--ease-out); }
.hb-js .hb-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Адаптив
   ========================================================================== */
/* На этом брейкпоинте шапка сайта добавляет собственный боковой padding поверх
   полей .wrapper — повторяем его, иначе бренд стоит на 1.25rem левее логотипа */
@media (min-width: 991px) and (max-width: 1460px) {
  .hb-hero { padding-inline: 1.25rem; }
}

@media (max-width: 990px) {
  /* как в birthday.css: на узких экранах h2 сайта ужимается */
  .hb-page { --fs-title: 24px; }

  /* логотип на узких экранах уезжает в центр шапки — равняться на него уже не на что,
     поэтому бренд встаёт по оси остальных полос лендинга (.hb-wrap, 20px от края) */
  .hb-hero__in { margin-inline: 20px; }

  /* форма не встаёт рядом с текстом — уходит под него.
     minmax(0, 1fr), а не 1fr: у 1fr минимум равен min-content колонки, и широкая
     карточка формы распирала бы страницу горизонтально вместо того, чтобы ужаться */
  .hb-promise__in { grid-template-columns: minmax(0, 1fr); }
  /* календарь-подложка не помещается по бокам формы — остаётся текстовое резюме */
  .hb-month { display: none; }
}

@media (max-width: 900px) {
  .hb-promo { grid-template-columns: 1fr; }
  .hb-promo__slider { max-width: 320px; margin-inline: auto; }
}

@media (max-width: 990px) {
  /* фото сверху, текст под ним, кружки-переключатели внизу */
  .hb-story { grid-template-columns: 1fr; }
  .hb-story__media { max-width: 416px; aspect-ratio: 4 / 3; }
}

@media (max-width: 700px) {
  .hb-hero__accent { flex-direction: column; gap: 4px; }
  .hb-hero__arrow { transform: rotate(12deg); }
  .hb-story__actions .hb-btn { flex: 1 1 100%; }
  .hb-switch__item { width: 48px; height: 48px; }
  .hb-team { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hb-eyebrow { font-size: 10.4px; letter-spacing: 0.14em; }
  .hb-eyebrow::before { width: 24px; }
  /* на узком экране черты съедают строку — метка остаётся просто текстом */
  .hb-eyebrow--center::before, .hb-eyebrow--center::after { display: none; }
}

/* ==========================================================================
   Доступность: без анимации
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hb-hero__scroll { display: none; }
  .hb-js .hb-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hb-js .hb-hero__eyebrow, .hb-js .hb-hero__lead, .hb-js .hb-hero__brand {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hb-js .hb-hero__line > span { transform: none !important; transition: none !important; }
  .hb-js .hb-hero__script { clip-path: none !important; transition: none !important; }
  .hb-js .hb-hero__arrow path { stroke-dashoffset: 0 !important; transition: none !important; }
  .hb-hero__media { animation: none !important; }
  .hb-story__media img { animation: none !important; }
  .hb-btn:hover, .hb-switch__item:hover { transform: none !important; }
}

/* ===== source: formula.css ===== */
/* ==========================================================================
   Первый экран: обещание поверх ролика, афиша-календарь справа.
   Заголовок + интерактивная формула заменили блок бренда «Планы на жизнь»,
   скролл-сцены «ролик → обещание» больше нет — всё сказано сразу.

   Формула: [ВАРИТЕ КОФЕ ПО СУББОТАМ] — и помогаете фонду борьбы с лейкемией
   Привычка живёт в тёмном чипе: текст меняется как на табло (барабан),
   а сам чип тянется под новую длину. Вывод справа не двигается.

   Подключается ПОСЛЕ habits-scene.css, переопределяет только hero.
   ========================================================================== */

/* потолок кегля подобран так, чтобы вывод помещался в строку целиком:
   Montserrat 800 в капсе шире, чем кажется, и на 24.8px хвост срывался на перенос */
.hb-page { --fs-formula: clamp(15.2px, 1.65vw, 20.8px); }

/* сцена стала обычным экраном: ролик — фон, контент центрируется поверх */
.hb-hero--first .hb-hero__stage {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: min(94vh, 860px);
}
.hb-hero--first .hb-hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* затемнение — на всю площадь кадра, а не на высоту контента:
   иначе низ градиента виден горизонтальной полосой поперёк экрана */
.hb-hero--first .hb-hero__stage::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.3) 45%, transparent 72%);
}
.hb-hero--first .hb-hero__overlay {
  position: relative; z-index: 2; inset: auto; width: 100%;
  background: none;
  padding-block: clamp(32px, 5vw, 64px);
}

.hb-hero__intro { max-width: 736px; color: var(--white); }
.hb-hero--first .hb-hero__brand-kicker { margin-bottom: 14.4px; }

/* заголовок в две строки, по левому краю; красный акцент — только рукописный хвост,
   и тот на видео уводим в белый: красный на тёмном кадре тускнеет */
.hb-hero--first .hb-hero__title { margin-top: 0; text-align: left; }
/* кегль подобран так, чтобы 24 знака шли одной строкой и не доезжали до афиши */
.hb-hero--first .hb-hero__title-main {
  color: var(--white); font-size: clamp(22.4px, 2.9vw, 37.6px);
}
.hb-hero--first .hb-hero__accent { justify-content: flex-start; }
.hb-hero--first .hb-hero__script { color: var(--white); font-size: clamp(24px, 2.9vw, 36.8px); }
.hb-hero--first .hb-hero__arrow { color: rgba(255, 255, 255, 0.85); }

/* афиша ужата, и левая выноска больше не вылетает на 136px в текстовую колонку */
.hb-hero--first .hb-poster { width: clamp(240px, 26vw, 340px); }
.hb-hero--first .hb-poster__bubble--run { top: 35.2px; left: -32px; }
.hb-hero--first .hb-poster__bubble--yoga { top: 112px; }

.hb-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* вся формула — одна кнопка: клик ведёт к форме с этой привычкой.
   Капсулы под ней нет: её края ездили на каждой смене фразы, а поля слева и
   справа не сходились из-за скрытой подсказки. Строка идёт прямо по кадру,
   тень держит читаемость на светлых кадрах ролика.
   Акцент — осветлённый красный: фирменный на тёмном кадре глохнет. */
.hb-formula {
  --red-glass: #FF7268;
  display: flex; align-items: center; justify-content: flex-start; gap: 14.4px;
  width: max-content; max-width: 100%;
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  padding: 0; border: 0; background: none;
  color: var(--white); cursor: pointer; text-align: left;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  transition: opacity .3s var(--ease);
}

/* капсула отдаёт фразу форме и уходит с дороги, пока страница едет вниз */
.hb-formula.is-launching { opacity: 0; transform: translateY(6px) scale(0.97); pointer-events: none; }

/* Чип: маска в одну строку. Ширина задана по самой длинной фразе и не меняется —
   пока она дышала под каждую, вывод ездил, а замер на ходу резал длинные фразы. */
.hb-formula__chip {
  position: relative; display: block; overflow: hidden;
  height: 1.72em; color: var(--white);
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-formula);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.5;
  transition: width .55s var(--ease-out), color .25s var(--ease);
}
.hb-formula:hover .hb-formula__chip { color: var(--red-glass); }

.hb-formula__item {
  position: absolute; left: 0; top: 0; height: 100%;
  display: flex; align-items: center;
  white-space: nowrap;
  opacity: 0; transform: translateY(60%);
  transition: opacity .3s ease, transform .45s var(--ease-out);
}
.hb-formula__item.is-on { opacity: 1; transform: none; }
.hb-formula__item.is-out { opacity: 0; transform: translateY(-60%); }

/* линия по ширине самой фразы, а не всего чипа: показывает, где слово кончается,
   и прочерчивается заново на каждой смене — привычка «подписывается» */
.hb-formula__item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.12em;
  height: 2px; background: var(--red-glass); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
}
.hb-formula__item.is-on::after {
  transform: scaleX(1);
  transition: transform .7s var(--ease-out) .15s;
}

/* фраза, летящая от капсулы в поле формы */
.hb-formula__fly {
  position: fixed; z-index: 90; margin: 0; white-space: nowrap; pointer-events: none;
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
  color: var(--black); transform-origin: left top;
  transition: transform .65s var(--ease-out), opacity .3s ease, color .65s ease;
}

.hb-formula__tail {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-formula);
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--white); white-space: nowrap;
}
.hb-formula__tail b { font-weight: inherit; color: var(--red-glass); }

.hb-formula__hint {
  flex: none;
  font-size: 10.4px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75); opacity: 0; transition: opacity .25s var(--ease);
}

.hb-formula__hint::after { content: ' →'; }
.hb-formula:hover .hb-formula__hint,
.hb-formula:focus-visible .hb-formula__hint { opacity: 1; }
@media (hover: none) { .hb-formula__hint { opacity: 1; } }

.hb-hero--first .hb-hero__actions { margin-top: 24px; text-align: left; }

.hb-hero__scroll {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6.4px;
  color: rgba(255, 255, 255, 0.85); font-size: 11.2px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.hb-hero__scroll svg { width: 20px; height: 20px; animation: hbNudge 1.8s ease-in-out infinite; }

/* --- появление: раньше оркестровала сцена, теперь просто загрузка страницы --- */
.hb-js .hb-hero__intro .hb-hero__brand-kicker,
.hb-js .hb-formula {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s ease, transform .9s var(--ease-out);
}
body.is-ready .hb-hero__intro .hb-hero__brand-kicker { opacity: 1; transform: none; transition-delay: .3s; }
body.is-ready .hb-hero--first .hb-hero__line > span { transform: none; transition-delay: .45s; }
body.is-ready .hb-hero--first .hb-hero__arrow path { stroke-dashoffset: 0; transition-delay: .85s; }
body.is-ready .hb-hero--first .hb-hero__script { clip-path: inset(0 0 0 0); transition-delay: 1s; }
/* без привязки к --first: формула используется и в варианте со сценой */
body.is-ready .hb-formula { opacity: 1; transform: none; transition-delay: 1.2s; }
body.is-ready .hb-hero--first .hb-hero__actions { opacity: 1; transform: none; transition-delay: 1.4s; }

/* афиша поднялась на первый экран вместе с текстом — на узких её не прячем,
   базовый CSS её скрывал, потому что там она была декорацией второго плана */
@media (max-width: 990px) {
  .hb-hero--first .hb-hero__overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .65) 100%);
  }
  .hb-hero--first .hb-hero__overlay-in { flex-direction: column; align-items: flex-start; gap: 40px; }
  .hb-hero--first .hb-poster { display: block; width: min(360px, 100%); align-self: center; }
  .hb-hero--first .hb-poster__bubble { display: none; }
  .hb-hero--first .hb-hero__scroll { display: none; }
}

/* Чип и вывод в одну строку требуют ~700px: до этой ширины хвост уезжает
   под привычку, иначе фраза упирается в край экрана и режется маской чипа. */
@media (max-width: 990px) {
  .hb-formula { flex-wrap: wrap; justify-content: flex-start; row-gap: 6.4px; }
  .hb-formula__tail { width: 100%; padding: 0 0 4px; white-space: normal; }
  .hb-formula__hint { display: none; }
}

/* На телефоне стекло капсулы разваливалось: чип с подчёркиванием на своей
   строке, вывод на двух — внутри одной большой скруглённой плашки это читалось
   как обломки. Здесь капсулы нет вовсе: привычка идёт плакатной строкой,
   вывод — подписью под ней. Кнопкой блок быть не перестаёт. */
@media (max-width: 700px) {
  .hb-page { --fs-formula: clamp(14.4px, 4.6vw, 19.2px); }
  .hb-formula { display: block; row-gap: 0; }
  .hb-formula__chip { width: 100% !important; height: 1.5em; }
  /* ширина по фразе — иначе красная линия тянулась бы во всю строку экрана */
  .hb-formula__item { width: max-content; max-width: 100%; }
  .hb-formula__item::after { bottom: 0; }
  .hb-formula__tail {
    display: block; width: 100%; padding: 0; margin-top: 10px;
    font-size: 0.82em; line-height: 1.35; white-space: normal;
    color: rgba(255, 255, 255, 0.9);
  }
  /* тире связывало привычку с выводом в одну строку — в столбце оно висит обрубком */
  .hb-formula__dash { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-js .hb-hero__intro .hb-hero__brand-kicker,
  .hb-js .hb-formula { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hb-js .hb-hero--first .hb-hero__line > span { transform: none !important; }
  .hb-js .hb-hero--first .hb-hero__script { clip-path: none !important; }
  .hb-formula__chip::after { transition: none !important; }
  .hb-formula__item, .hb-formula__chip { transition: none !important; }
}

/* ===== source: combo.css ===== */
/* ==========================================================================
   Первый экран: бренд кампании и формула поверх ролика.
   Подключается ПОСЛЕ habits-scene.css и formula.css.
   ========================================================================== */

/* колонка бренда была узкой под «Планы на жизнь» — формуле нужна вся ширина */
.hb-hero__brand { max-width: none; width: 100%; container-type: inline-size; }
.hb-hero__brand .hb-formula { margin-top: clamp(24px, 3vw, 36px); }

/* «ПЛАНЫ НА ЖИЗНЬ» во всю ширину — главный типографический акцент экрана.
   Кегль считается от ширины КОНТЕЙНЕРА (cqw), а не вьюпорта: вьюпортные vw не
   знают про поля .hb-wrap, и на части ширин «НА ЖИЗНЬ» срывалось бы на третью
   строку. clamp ниже — запасной вариант для браузеров без container queries. */
/* 22svh в min — потолок по высоте: экран теперь ровно во вьюпорт, и на низком
   окне (ландшафт телефона) две строки капса иначе выдавливали бы формулу за край */
.hb-hero__brand-name {
  margin-top: clamp(8px, 1.5vw, 16px);
  font-size: clamp(48px, 14vw, 176px);
  font-size: min(17cqw, 22svh, 208px);
  line-height: 0.86; letter-spacing: -0.03em;
  /* оптическая ось: у капса Montserrat 800 боковой бэринг 0.075em, и без сдвига
     «ПЛАНЫ» стоят правее надкивера и фразы в плашке — три разных левых края */
  margin-left: -0.075em;
}


/* главная строка заголовка — графитом: красный акцент остаётся на рукописном хвосте */
.hb-promise .hb-hero__line--main .hb-hero__title-main { color: var(--black); }

/* ==========================================================================
   Слайдер баннеров кампании (промо-блок)
   Горизонтальная лента со scroll-snap: свайп на телефоне работает сам,
   стрелки и точки — надстройка. Fade-карусель отдала бы свайп в JS.
   ========================================================================== */
.hb-promo__slider { position: relative; }
.hb-slider__track {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hb-slider__track::-webkit-scrollbar { display: none; }
.hb-slider__slide { flex: 0 0 100%; scroll-snap-align: center; }
/* 2/3 — родная пропорция баннеров (600×900). При 4/5 cover срезал им низ,
   вместе с подписью и логотипом фонда */
.hb-slider__slide img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--r-sm); background: var(--muted);
}

.hb-slider__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--black);
  display: grid; place-items: center;
  box-shadow: var(--sh-card); transition: background .2s, opacity .2s, transform .2s var(--ease);
}
.hb-slider__arrow svg { width: 18px; height: 18px; }
.hb-slider__arrow:hover { background: var(--white); transform: translateY(-50%) scale(1.06); }
.hb-slider__arrow--prev { left: 12px; }
.hb-slider__arrow--next { right: 12px; }

.hb-slider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.hb-slider__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: #d5d5d0; transition: background .25s, transform .25s var(--ease);
}
.hb-slider__dot.is-on { background: var(--red); transform: scale(1.25); }

/* ==========================================================================
   Кто делает акцию
   ========================================================================== */
/* Две карточки в ряд: идея и продакшн. Оба участника набраны одинаково —
   фото сверху, под ним лого и текст, — чтобы никто не читался как главный */
.hb-crew {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.hb-crew__photo {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-card); margin-bottom: 24px;
}
.hb-agency__logo { max-height: 52px; width: auto; }
.hb-agency__role {
  margin-top: 20px; font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey-3);
}
.hb-agency__text { margin-top: 12px; font-size: var(--fs-md); line-height: 1.5; color: var(--black); }
.hb-agency__note { margin-top: 20px; color: var(--ink-55); line-height: 1.6; font-size: 15.2px; }

/* Цитата стоит в колонке своей команды: на телефоне колонки идут друг под другом,
   и по колонке видно, чей это текст */
.hb-crew__quote { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--border); }
.hb-crew__who {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; line-height: 1.35; color: var(--grey-3);
}
.hb-crew__who img {
  flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--red);
}
.hb-quote__name { display: block; font-size: var(--fs-base); color: var(--black); }
.hb-quote__text { margin-top: 20px; font-size: 17px; line-height: 1.6; color: var(--ink-82); }
.hb-quote__text p { margin: 0; }
.hb-quote__text p + p { margin-top: .75em; }
.hb-quote__text p:first-child::before { content: '\00AB'; color: var(--red); }
.hb-quote__text p:last-child::after { content: '\00BB'; color: var(--red); }

/* ==========================================================================
   Секция «Ваш план»: сначала визард плана, потом штатная форма фонда
   ========================================================================== */
.hb-wizard { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.hb-wizard .hb-form { max-width: none; margin: 0; }
.hb-wizard__pane[hidden] { display: none; }

/* Оформление — прозрачная панель: собственная карточка есть у формы компонента,
   вторая рамка вокруг неё дала бы карточку в карточке. */
.hb-checkout__summary {
  border-radius: 16px; background: rgba(218, 53, 44, 0.07);
  padding: 16px 20px; font-size: 15.2px; line-height: 1.5; color: var(--black);
}
.hb-checkout__summary b { font-weight: 400; }
.hb-checkout__back {
  margin: 12px 0 20px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 13.6px; color: var(--grey-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.hb-checkout__back:hover { color: var(--red); }

/* Сумму и периодичность задал план — в форме они лишний выбор.
   Поля остаются в DOM: значения из них уходят в платёж и в CRM. */
.hb-donate--wizard .fbl-form h2,
.hb-donate--wizard .fbl-form__type-group,
.hb-donate--wizard .fbl-form__amount-group { display: none; }
/* штатный серый фон формы почти сливается с серой полосой секции —
   на шаге мастера карточка белая, как и карточка плана на шаге 1 */
.hb-donate--wizard .fbl-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}
.hb-donate.is-catch { animation: hbCatch 1.4s var(--ease-out); }
@keyframes hbCatch {
  0%   { box-shadow: 0 0 0 0 rgba(218, 53, 44, 0); }
  25%  { box-shadow: 0 0 0 6px rgba(218, 53, 44, 0.16); }
  100% { box-shadow: 0 0 0 0 rgba(218, 53, 44, 0); }
}

/* ==========================================================================
   Истории: карточка ведёт на страницу подопечного
   ========================================================================== */
.hb-story__media { display: block; }
.hb-story__who span { color: var(--grey-2); }
.hb-story__source { margin-top: 20px; font-size: 12.8px; color: var(--grey-2); }

@media (max-width: 900px) {
  .hb-crew { grid-template-columns: 1fr; }
  .hb-crew__photo { max-width: 480px; }
}

@media (max-width: 700px) {
  .hb-slider__arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-slider__track { scroll-behavior: auto; }
  .hb-donate.is-catch { animation: none; }
}

/* ==========================================================================
   Спасибо-страница /plans/thanks/: полосы и леттеринг лендинга, без анимаций
   появления — страница открывается сразу после оплаты.
   ========================================================================== */
.hb-thanks__in { max-width: 760px; text-align: center; }

.hb-thanks__title {
  margin-top: 24px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4.6vw, 60px); line-height: 1.05;
  text-transform: uppercase; letter-spacing: -0.02em; color: var(--red);
  overflow-wrap: anywhere;
}
.hb-thanks__script {
  max-width: 18em; margin: 20px auto 0;
  font-family: var(--font-script); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2;
}

/* карточка плана повторяет итог конструктора: привычка рукописью, день под ней */
.hb-thanks__plan {
  max-width: 440px; margin: 40px auto 0; padding: 28px 32px;
  background: var(--muted); border-radius: var(--r-card);
}
.hb-thanks__plan-label {
  font-size: 11.2px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-3);
}
.hb-thanks__plan-habit {
  margin-top: 10px;
  font-family: var(--font-script); font-size: clamp(32px, 4vw, 44px); line-height: 1.1;
  color: var(--red); overflow-wrap: anywhere;
}
.hb-thanks__plan-every { margin-top: 6px; font-size: var(--fs-md); }

.hb-thanks__text { margin-top: 40px; }
.hb-thanks__text p { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-82); }
.hb-thanks__text p + p { margin-top: 16px; }

.hb-thanks__share { max-width: 34em; margin-inline: auto; font-size: var(--fs-md); line-height: 1.6; }
.hb-thanks__icons { display: flex; justify-content: center; margin-top: 28px; }

/* ==========================================================================
   Страница напоминаний /plans/stop/: та же разметка, что у спасибо-страницы,
   плюс форма с одной кнопкой.
   ========================================================================== */
.hb-stop .hb-thanks__text a { color: var(--red); }
.hb-stop__form { margin-top: 32px; }
.hb-stop__note { margin-bottom: 16px; font-size: var(--fs-base); color: var(--red); }