/* ==========================================================================
   ПЕРЕПЛЁТ · Blocks — раскладки секций новогодней страницы
   Каждая секция = один блок Directus. Имена классов совпадают с ключами
   блоков в docs/blocks-inventory.md (hero, fresh, product, mechanics, …).
   ========================================================================== */

.cta-row {
  display: flex;
  align-items: center;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}
.cta-row .caption { max-width: 48ch; }
/* Правка 10.09 (Диана): по всему сайту сноски были по левому краю, а кнопки
   то по центру, то слева. Одно правило: в колоночном cta-row всё по центру,
   в строчном — всё по левому краю. Исключений не заводим. */
.cta-row:not(.cta-row--center):not(.section__foot) { justify-content: flex-start; text-align: left; }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  min-height: min(92vh, 60rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  filter: grayscale(0.85) contrast(1.05) brightness(0.55);
  transform: scale(1.04);
  animation: hero-drift 24s ease-in-out infinite alternate;
}
@keyframes hero-drift { to { transform: scale(1.1) translate(-1.5%, -1%); } }
.hero__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(36, 33, 33, 0.96) 0%, rgba(36, 33, 33, 0.85) 45%, rgba(36, 33, 33, 0.45) 100%),
    linear-gradient(180deg, rgba(36, 33, 33, 0.2), rgba(36, 33, 33, 0.9) 95%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.hero__meta { margin-bottom: 1.5rem; }
.hero__title { margin-bottom: 1.5rem; max-width: 26ch; }
/* Единственный сырой интерлиньяж на странице: плашка подсветки в H1 подгоняется
   оптически под высоту капса Fatal, роли в шкале у неё нет (13.09). */
.hero__title .hl { display: inline-block; background: var(--paper-100); color: var(--ink-900); padding: 0.06em 0.14em 0.02em; margin-top: 0.06em; line-height: 0.96; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-bottom: 1.75rem; }
.hero__chips li { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.hero__chips b { display: inline-grid; place-items: center; min-width: 2.4rem; height: 1.75rem; padding: 0 0.7rem; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--radius-pill); color: #fff; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0; font-size: var(--fs-small); white-space: nowrap; }
/* Бирка «Улика №01» с штрихкодом (из прототипа) */
.evidence-tag {
  display: grid;
  gap: 0.35rem;
  width: 15rem;
  padding: 0.7rem 0.85rem;
  background: rgba(42, 39, 39, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: var(--fs-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
  transform: rotate(-4deg);
}
.evidence-tag__head { display: flex; justify-content: space-between; color: var(--fg-muted); }
.evidence-tag__barcode { height: 22px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px, #fff 4px 5px, transparent 5px 9px, #fff 9px 12px, transparent 12px 14px); }
.evidence-tag__text { text-transform: none; letter-spacing: 0; font-size: var(--fs-caption); line-height: var(--lh-caption); }
/* Карточки выросли на 50% (13.09) — бирка и штамп ушли под них, иначе
   перекрывали подписи. */
.hero__tag { position: absolute; left: -12%; top: 105%; z-index: 3; }
.hero__lead { margin-bottom: 2rem; max-width: 52ch; }
.hero__actions { --cluster: 0.75rem 1rem; margin-bottom: 1.25rem; }
.hero__gallery {
  position: relative;
  min-height: 26rem;
}
.hero__photo { position: absolute; }
.hero__photo--1 { width: min(88%, 39rem); left: 0; top: -24%; z-index: 2; }   /* +50%, поднята выше (правка 13.09) */
.hero__photo--2 { width: min(80%, 34.5rem); right: 0; top: 38%; z-index: 1; }
.hero__stamp { position: absolute; left: auto; right: 2%; bottom: -34%; z-index: 3; }
/* Единый кегль показателей — и в первом экране, и в доказательствах (10.09) */
.hero__stats .stat__value { font-size: var(--fs-stat); }
.hero__stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-on-dark);
}
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__gallery { min-height: 20rem; max-width: 34rem; }
}
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__stats .stat__value { font-size: var(--fs-stat); }
.hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hero__gallery { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; padding: 1rem 0 2.5rem; }
  .hero__photo { position: static; width: auto; }
  .hero__photo--2 { margin-top: 2.5rem; }
  .hero__tag { position: static; grid-column: 1 / -1; width: 100%; transform: rotate(-1deg); }
  .hero__stamp { position: static; grid-column: 1 / -1; justify-self: center; margin-top: -0.5rem; }
  .hero__actions .btn { width: 100%; }
}

/* ==========================================================
   FRESH (Desktop-31): 2×2 + три полароида снизу
   ========================================================== */
.fresh__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 4rem;
  max-width: 68rem;
}
.fresh__item h3 { font-size: var(--fs-h3-lg); line-height: var(--lh-display-lg); margin-bottom: 0.75rem; }
.fresh__item p { max-width: min(100%, var(--fresh-copy-w, 22rem)); font-size: var(--fs-small); color: var(--fg-muted); }
.fresh__photos {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-inline: calc(-1 * clamp(0px, 3vw, 3rem));
  align-items: center;
}
.fresh__photo { margin: 0; transition: transform var(--dur-slow) var(--ease-out); }
.fresh__photo img { width: 100%; height: auto; }
.fresh__photo--1 { transform: rotate(-3.5deg); box-shadow: var(--shadow-polaroid); margin-right: -6%; }
.fresh__photo--2 { position: relative; z-index: 2; padding: 12px 12px 14px; transform: rotate(2deg) scale(1.06); }
.fresh__photo--2 img { aspect-ratio: 5 / 4; object-fit: cover; }
.fresh__photo--3 { transform: rotate(3deg); box-shadow: var(--shadow-polaroid); margin-left: -6%; }
.fresh__photo:hover { transform: rotate(0) scale(1.03); z-index: 3; }
@media (max-width: 900px) {
  .fresh__grid { grid-template-columns: 1fr; gap: 2rem; }
  .fresh__photos { grid-template-columns: 1fr; margin-inline: 0; gap: 2rem; max-width: 26rem; margin-inline: auto; }
  .fresh__photo--1, .fresh__photo--3 { margin: 0; }
  .fresh__photo--2 { transform: rotate(2deg); }
  .fresh__photo--2:hover { transform: rotate(0); }
}

/* Водяной знак «шар с полосочками» из брендбука: одна крупная еле заметная
   картинка за текстом — по центру блока со смещением вправо (правка 10.09).
   Иконка в Figma векторная и в выгрузку .fig не попала, поэтому перерисована. */
.fresh { position: relative; isolation: isolate; }
.fresh::after {
  content: "";
  position: absolute;
  z-index: -1;
  /* по центру текстовой части блока и ближе к правому краю, но целиком в кадре */
  top: 42%;
  left: 68%;
  width: min(32rem, 55vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../assets/ui/globe.svg") no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
}
@media (max-width: 900px) {
  .fresh::after { width: min(20rem, 66vw); left: 74%; top: 34%; transform: translate(-50%, -50%); opacity: 0.05; }
}

/* ==========================================================
   PRODUCT
   ========================================================== */
.product__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  counter-reset: none;
}
.product__step {
  padding: 1.75rem 1.5rem 2rem;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base);
}
.product__step:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.55); }
.product__kicker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.product__step h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); margin-bottom: 0.75rem; }
.product__step p { font-size: var(--fs-small); color: var(--fg-muted); }
/* Правка 10.09: было 1.4fr 1fr 1fr — фото не совпадали по ширине с карточками
   над ними. Та же сетка, что у .product__steps: снимок ровно под своим блоком. */
.product__media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.product__shot {
  position: relative;
  overflow: hidden;
  background: var(--ink-950);
}
.product__shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; filter: grayscale(0.15) contrast(1.05); transition: transform var(--dur-slow) var(--ease-out); }
.product__shot:hover img { transform: scale(1.04); }
.product__shot figcaption { position: absolute; left: 1rem; bottom: 1rem; }
.product__play {
  position: absolute;
  left: 50%; top: 50%;
  width: 4.5rem; height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: 50%;
  background: rgba(245, 245, 245, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform var(--dur-base) var(--ease-spring);
}
.product__play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--ink-900);
  transform: translate(-40%, -50%);
}
@media (max-width: 900px) {
  .product__steps { grid-template-columns: 1fr; }
  .product__media { grid-template-columns: 1fr 1fr; }
  .product__shot--lead { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .product__media { grid-template-columns: 1fr; } }

/* ==========================================================
   MECHANICS: контейнеры в ряд с прокруткой
   ========================================================== */
.mechanics { overflow: hidden; }
.mechanics .scroller-hint { margin-top: -1.5rem; margin-bottom: 2rem; }
.mechanics__stage {
  position: relative;
  --crate-w: clamp(17rem, 21.5vw, 19.5rem);
  --track-left: clamp(var(--gutter), calc(50vw - var(--container) / 2), 9.5rem);
}
/* Дворецкий (Desktop-7): корпус за левым краем экрана, перчатки держат первый контейнер за борт */
/* Перчатки держат первый ящик: верхний палец упирается в верхний край ящика,
   нижний — в нижний (пересчитано по альфе butler.webp, правка 09.09) */
.mechanics__butler {
  position: absolute;
  left: calc(var(--track-left) - var(--crate-w) * 1.299);
  top: calc(var(--crate-w) * 0.006);
  width: calc(var(--crate-w) * 1.464);
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45));
}
.mechanics__track {
  position: relative;
  padding: calc(var(--crate-w) * 0.1) var(--gutter) calc(var(--crate-w) * 0.22) var(--track-left);
  scroll-padding-left: var(--track-left);
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}
.mechanics__track .crate { width: var(--crate-w); }
@media (max-width: 1080px) { .mechanics__stage { --track-left: var(--gutter); } }
@media (max-width: 600px) { .mechanics__stage { --crate-w: 78vw; } .mechanics__track .crate { width: var(--crate-w); } }
/* Правка 10.09: под ящиками на мобилке зияло 118px пустоты до кнопки.
   Нижнее поле ленты вдвое меньше — остаётся ~60px. */
@media (max-width: 900px) {
  .mechanics__track { padding-bottom: calc(var(--crate-w) * 0.06); }
  .mechanics .section__foot { margin-top: 1rem; }
}

/* ==========================================================
   TURNKEY (Desktop-23)
   ========================================================== */
.turnkey__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1.4fr;
  gap: 1.5rem;
}
.turnkey__card { padding: 1.5rem; }
.turnkey__card-head .num-plain { white-space: nowrap; font-size: var(--fs-h3); }
.turnkey__card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.checklist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.turnkey__card--photo h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); margin-bottom: 0.5rem; }
.turnkey__card--photo .small { color: var(--fg-muted); margin-bottom: 1.25rem; }
.turnkey__photos { position: relative; padding-right: 28%; }
.turnkey__photos picture img { width: 100%; aspect-ratio: 13/10; object-fit: cover; box-shadow: var(--shadow-card); position: relative; z-index: 1; }
.turnkey__blank {
  position: absolute;
  right: 12%; top: 6%;
  width: 26%;
  height: auto;
  transform: rotate(8deg);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
  z-index: 2;
}
.turnkey__a4 {
  position: absolute;
  right: 0; top: 0;
  width: 30%;
  aspect-ratio: 1.22;
  background: linear-gradient(180deg, #a9a9a9, #8f8f8f);
  transform: rotate(-4deg);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
  z-index: 0;
}
.turnkey__note { margin-top: 1.5rem; }
@media (max-width: 1000px) {
  .turnkey__grid { grid-template-columns: 1fr 1fr; }
  .turnkey__card--photo { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .turnkey__grid { grid-template-columns: 1fr; }
  .checklist--2col { grid-template-columns: 1fr; }
}

/* ==========================================================
   CASES: полароид-карточки с переворотом
   ========================================================== */
.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}
.case { height: 31rem; }
.case__front, .case__back { display: flex; flex-direction: column; }
.case__img {
  margin: 1.25rem 1.25rem 0;
  aspect-ratio: 4 / 3;
  background: #8a8a8a;
  position: relative;
  overflow: hidden;
}
.case__img picture { display: block; width: 100%; height: 100%; }
.case__img img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.18) contrast(1.06) saturate(0.92); }
.case[data-case="india"] .case__img img { object-position: center 42%; }
.case[data-case="spain"] .case__img img { object-position: center 38%; }
.case[data-case="iceland"] .case__img img { object-position: center 68%; }
.case__img--stub { display: grid; place-items: center; padding: 1.5rem; text-align: center; background: repeating-linear-gradient(-45deg, #8f8f8f 0 10px, #868686 10px 20px); }
.case__stub-text { font-size: var(--fs-caption); color: #f5f5f5; max-width: 26ch; line-height: var(--lh-compact); }
.case__body { padding: 1.5rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.case__body h3 { font-size: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem); }
.case__body p { font-size: var(--fs-small); line-height: var(--lh-compact); }
.case__body .marker-link { margin-top: auto; align-self: flex-start; }
/* мобильная/узкая раскладка карточки дела (десктоп задаёт frames.css) */
.case__front, .case__back { background: var(--paper-100); color: var(--ink-900); }
.case__front { padding: 1.25rem 1.25rem 1.5rem; gap: 0.75rem; }
.case__front .case__img { margin: 0 0 0.5rem; }
.case__title { font-size: var(--fs-h3); }
.case__desc { font-size: var(--fs-small); line-height: var(--lh-compact); }
/* Тот же текст дела в мобильной раскладке — тот же интерлиньяж (13.09) */
.case__stub .small { line-height: var(--lh-compact); }
.case__link { margin-top: auto; }
/* Правка 10.09: карточка вся ведёт себя как кнопка — курсор-рука по всей
   площади, а не только на закладке. На тач-устройствах курсора нет, там
   за отклик отвечает :active ниже. */
.case[data-flip] { cursor: pointer; }
.case[data-flip]:active { transform: scale(0.995); }
/* Правка 10.09: карточка «оживает» под курсором — лёгкое покачивание, как
   реагируют фотографии в других блоках. Анимация на самой карточке, а не на
   .flip__inner: там transform занят переворотом. */
@keyframes case-wobble {
  0%   { transform: rotate(0) translateY(0); }
  25%  { transform: rotate(-0.9deg) translateY(-5px); }
  55%  { transform: rotate(0.7deg) translateY(-7px); }
  80%  { transform: rotate(-0.35deg) translateY(-4px); }
  100% { transform: rotate(0) translateY(-4px); }
}
.case[data-flip] { transition: transform var(--dur-base) var(--ease-out); }
.case[data-flip]:hover { animation: case-wobble 900ms var(--ease-out) forwards; }
@media (prefers-reduced-motion: reduce) { .case[data-flip]:hover { animation: none; } }
/* Снимок внутри тоже подаётся вперёд — тем же движением, что и остальные фото */
.case .case__img img, .case .case__img--stub { transition: transform var(--dur-slow) var(--ease-out); }
.case:hover .case__img img, .case:hover .case__img--stub { transform: scale(1.05); }
/* Жёлтая закладка: заходит за левый край карточки и выходит за него, как скотч (07.09) */
.marker-link {
  margin-left: -1.75rem;
  padding-left: 2.25rem;
}
.case__body--back { padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; }
/* «Описание скоро» — такой же жёлтый стикер, как у готового дела (правка 09.09) */
.marker-link--muted { color: var(--ink-900); text-decoration: none; }
.marker-link--muted::before { background: var(--yellow-400); opacity: 0.82; }
.case__back { background: var(--paper-100); }
/* Оборот — светлая бумага, поэтому надзаголовок и подпись должны быть тёмными.
   Правило жило только в десктопной ветке, и на мобилке они были белым по белому
   (правка 10.09). */
.case__back .kicker, .case__back .muted { color: var(--paper-fg-muted); }
.case__body--back { padding: 2rem 1.75rem; }
.case__body--back p { font-size: var(--fs-small); }
/* Строки «Фишка» и «Сложность» на обороте дела (правка 10.09) */
.case__feature { font-size: var(--fs-small); color: var(--paper-fg-muted); }
.case__feature b { color: var(--paper-fg); }
.case__back-actions { margin-top: auto; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.case__back-actions .link { color: var(--paper-fg-muted); }
@media (max-width: 1000px) { .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cases__grid { grid-template-columns: 1fr; max-width: none; } .case { height: 30rem; } }

/* ==========================================================
   AUTHORS (светлая)
   ========================================================== */
.authors__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 4rem;
  align-items: center;
}
.authors__steps { display: grid; gap: 1.5rem; }
.authors__steps li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.authors__steps p { font-size: var(--fs-small); color: var(--ink-700); margin-top: 0.35rem; }
.authors__photo { max-width: 30rem; justify-self: end; }
/* Заголовок блока «Сценарии прописаны до мелочей» занимает обе колонки */
.authors__head { grid-column: 1 / -1; margin-bottom: 0; }
/* Между заголовком и списком хватает зазора сетки — свой отступ не нужен */
.authors__grid { row-gap: 2.5rem; }
@media (max-width: 900px) {
  .authors__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .authors__photo { justify-self: center; }
}

/* ==========================================================
   HIT
   ========================================================== */
.hit__grid { display: grid; gap: 0; }
.hit__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.hit__stats .stat { padding: 2rem 1.5rem; border-right: 1px solid rgba(255, 255, 255, 0.2); }
.hit__stats .stat:last-child { border-right: 0; }
/* Правка 10.09 (Диана): «Sold Out» набран другим кеглем и выпрыгивал из ряда.
   Общая высота строки значений + выравнивание по нижнему краю ставит все
   четыре показателя на одну линию независимо от размера шрифта. */
.hit__stats .stat__value {
  /* Тот же --fs-stat, что и в первом экране: было 86px против 72px (10.09) */
  font-size: var(--fs-stat);
  white-space: nowrap;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: var(--fs-stat);
}
@media (max-width: 900px) { .hit__stats { grid-template-columns: repeat(2, 1fr); } .hit__stats .stat:nth-child(2) { border-right: 0; } .hit__stats .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } }

/* ==========================================================
   CTA BAND (тёплая полоса)
   ========================================================== */
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band .h3 { margin-bottom: 0.35rem; }
@media (max-width: 600px) { .cta-band__inner .btn { width: 100%; } }

/* ==========================================================
   ENGAGE — нумерованный список-документ + фото
   ========================================================== */
.engage__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: start;
}
.engage__list { padding: 0.5rem 1.75rem; }
.engage__list li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.engage__list li:last-child { border-bottom: 0; }
.engage__num {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-display-lg);
  color: var(--fg-faint);
}
.engage__list p { font-size: var(--fs-small); color: var(--fg-muted); margin-top: 0.35rem; }
.engage__photo { position: sticky; top: 6rem; }
@media (max-width: 900px) {
  .engage__grid { grid-template-columns: 1fr; }
  .engage__photo { position: static; max-width: 26rem; margin-inline: auto; }
}

/* ==========================================================
   REVIEWS — «напечатанные» листы
   ========================================================== */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}
.review {
  --rot: 0deg;
  margin: 0;
  padding: 2.25rem 1.75rem 1.75rem;
  transform: rotate(var(--rot));
  transition: transform var(--dur-base) var(--ease-out);
}
.review:hover { transform: rotate(0) translateY(-4px); }
.review p { font-size: var(--fs-small); line-height: var(--lh-body); }
.review footer {
  font-size: var(--fs-small);   /* было 12px против 13px у прочих подписей (10.09) */
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.3);
  font-size: var(--fs-caption);
  color: var(--paper-fg-muted);
}
.review footer b { color: var(--ink-900); }
.review__letter {
  flex: 0 0 auto;
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--ink-900);
  border-radius: 50%;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-900);
}
.review__letter:has(.review__photo) { border: 0; font-size: 0; }
.review__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) { .reviews__grid { grid-template-columns: 1fr; max-width: 34rem; } }

/* ==========================================================
   TIMELINE + карточка Зины
   ========================================================== */
.timeline__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: start;
}
.timeline__list { position: relative; padding-left: 7rem; }
.timeline__list::before {
  content: "";
  position: absolute;
  left: 5.5rem; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0 6px, transparent 6px 12px);
}
.timeline__item { position: relative; padding: 0 0 2rem; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: -1.5rem; top: 0.55rem;
  width: 9px; height: 9px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--paper-300);
}
.timeline__time {
  position: absolute;
  left: -7rem;
  width: 4.5rem;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  padding-top: 0.3rem;
}
.timeline__item h4 { margin-bottom: 0.35rem; }
.timeline__item p { font-size: var(--fs-small); color: var(--fg-muted); max-width: 46ch; }
.timeline__item--hl::before { display: none; }
.timeline__card {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem;
  margin: -0.75rem 0 0.5rem -1.5rem;
  transform: rotate(-0.8deg);
  display: grid;
  gap: 0.5rem;
}
.timeline__card .kicker { color: var(--paper-fg-muted); }
.timeline__card h4 { font-size: var(--fs-h3); }
.timeline__card p { color: var(--ink-700); max-width: none; }
.timeline__pin { top: -16px; left: -18px; width: 48px; height: 42px; }
.timeline__item--hl .timeline__time { color: #fff; }

.zina {
  padding: 2rem 1.75rem;
  display: grid;
  gap: 1rem;
  transform: rotate(0.6deg);
}
.zina__clip { top: -18px; right: 2rem; }
.zina__photo {
  width: 7rem; height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-500);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.zina h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.zina .btn { justify-self: start; }
@media (max-width: 900px) {
  .timeline__grid { grid-template-columns: 1fr; }
  .timeline__list { padding-left: 5.5rem; }
  .timeline__list::before { left: 4.25rem; }
  /* Кружок отсчитывается от левого края пункта: на мобилке отступ списка
     меняется, поэтому смещение кружка пересчитано под линию — иначе он
     съезжал с неё на 4px (правка 10.09). */
  .timeline__item::before { left: -1.25rem; }
  .timeline__time { left: -5.5rem; width: 3.75rem; }
}

/* ==========================================================
   ALTS
   ========================================================== */
.alts__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}
.alts__formats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.alts__format {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-on-dark);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.alts__format:hover { border-color: rgba(255, 255, 255, 0.5); transform: translateY(-3px); }
.alts__format h3 {
  margin-bottom: 0.5rem;
  text-wrap: wrap;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}
.alts__format p { font-size: var(--fs-small); color: var(--fg-muted); }
.alts__add {
  --rot: 0deg;
  padding: 2rem 1.75rem;
  transform: rotate(var(--rot));
}
.alts__add h3 { font-size: var(--fs-h3); margin: 0.5rem 0 1.25rem; }
.alts__add .checklist li { color: var(--ink-900); }
@media (max-width: 900px) { .alts__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .alts__formats { grid-template-columns: 1fr; } }

/* ==========================================================
   HOSTS
   ========================================================== */
.hosts__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.75rem 1.25rem;
  padding-top: 1rem;
}
.host { --ar: 3 / 4; }
/* Портреты ведущих: реальные фото вместо заглушек-букв (11.09).
   Кадрированы по лицу так, чтобы голова у всех занимала одну долю кадра. */
.host__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: linear-gradient(160deg, #cfcfcf, #a9a9a9);
}
.host__meta { display: grid; gap: 0.2rem; padding: 0.75rem 0.25rem 0.25rem; color: var(--ink-900); }
.host__meta b { font-family: var(--font-mono); font-size: var(--fs-mono-title); font-weight: 700; letter-spacing: 0.01em; }
.host__meta span { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-700); }
.hosts__note { margin-top: 1.5rem; }
.hosts__crew {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  margin-top: 3.5rem;
  align-items: stretch;
}
.hosts__crew-photo { position: relative; overflow: hidden; }
.hosts__crew-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }
.hosts__crew-text { padding: 1.75rem; }
.hosts__crew-text h3 { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-mono-title); line-height: var(--lh-title-mono); letter-spacing: 0.01em; text-transform: none; margin-bottom: 0.75rem; }
.hosts__crew-text .small { color: var(--fg-muted); margin-bottom: 1.25rem; }
@media (max-width: 1000px) { .hosts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .hosts__crew { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hosts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================
   STEPS (Desktop-33): 8 листков, 1 и 3 жёлтые
   ========================================================== */
.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.25rem;
}
.step {
  position: relative;
  min-height: 13.75rem;
  padding: 1.15rem 1.05rem 1.2rem;
  background: var(--paper-500);
  color: var(--ink-900);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  transform: rotate(calc(var(--rot, 0deg) * 0.4));
  transform-origin: 50% 0;
}
.step--you {
  background: linear-gradient(163deg, var(--yellow-400) 0%, var(--yellow-500) 70%, #f0cd2f 100%);
}
.step .sticky-tape--top { top: -14px; width: 70px; height: 34px; margin-left: -35px; }
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display-lg);
  color: var(--ink-900);
}
.step__title {
  margin: 0.45rem 0 0.4rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-mono-title);
  line-height: var(--lh-title-mono);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.step__text {
  margin: 0;
  padding: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-compact);
  color: var(--ink-900);
  max-width: none;
}
@media (max-width: 1100px) {
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .steps__deck { height: auto; overflow: visible; }
  .steps__list {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding: 1.5rem var(--gutter) 1.75rem;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: none;
    min-height: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .steps__list::-webkit-scrollbar { display: none; }
  .step {
    flex: 0 0 76vw;
    width: 76vw;
    max-width: 18.25rem;
    min-height: 16.5rem;
    padding: 1.4rem 1.25rem 1.5rem;
    transform: rotate(var(--rot, 0deg));
    scroll-snap-align: start;
  }
  .step:last-child { margin-right: 24vw; }
  .step__num { font-size: clamp(3.5rem, 22vw, 6.3rem); }
}

/* ==========================================================
   CALCULATOR (Desktop-9): папка, слева опции, справа лист
   ========================================================== */
.calc .section__head { max-width: none; }
.calc__usp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}
.calc { padding-bottom: 0; }
/* Папка (Desktop-10): PNG папки растянут на всю ширину и обрезан снизу границей секции — как во фрейме Figma */
.calc__stage {
  position: relative;
  /* Ни тёмного зазора сверху, ни собственной кромки папки: верхние 3% картинки
     обрезаются, поэтому под чёрной секцией нет ступеньки (правка 09.09). */
  margin-top: 0;
  padding: clamp(2rem, 4vw, 3.5rem) 0 var(--section-y);
  background: url("../assets/ui/folder.webp") no-repeat;
  /* Сдвиг задаём длиной, а не процентом: при картинке выше блока отрицательный
     процент двигает её ВНИЗ и оставляет зазор (правка 09.09). */
  background-size: auto 108%;
  background-position: 38% -42px;
  isolation: isolate;
}
.calc__stage::before { /* лёгкое затемнение папки, как color-burn в Figma */
  content: "";
  position: absolute; inset: 0;
  background: rgba(36, 33, 33, 0.14);
  pointer-events: none;
}
.calc__stage > .container { position: relative; }
.calc__folder {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.5rem;
}
.calc__left { display: grid; gap: 0.75rem; align-content: start; }
.calc__panel { padding: 1.5rem 1.5rem 1.25rem; }
.calc__panel .caption { color: var(--ink-900); }
.calc__calendar { display: grid; gap: 1rem; }
.cal-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.cal-wrap > .cal + .cal { padding-left: 1.5rem; border-left: 1px solid var(--ink-500); }
.calc__cal-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 2rem;
  align-items: start;
  padding-top: 0.5rem;
}
.calc__cal-foot .caption { max-width: 34ch; }
.calc__selected { padding-top: 0.25rem; border-top: 1px dashed rgba(0, 0, 0, 0.25); }
/* Правка 10.09: число стало полем ввода — его можно набрать руками.
   Выглядит как прежняя крупная цифра, рамка появляется только при фокусе. */
/* Число стоит по центру над шкалой — и на десктопе тоже (правка 10.09) */
.calc__people-row { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; margin: 0.35rem 0 0.5rem; }

@media (max-width: 900px) { .calc__people-row { margin-bottom: 0.75rem; } }
.calc__people-input {
  width: 4.5ch;
  text-align: center;
  padding: 0 0.15rem;
  border: 0;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.28);
  background: transparent;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  -moz-appearance: textfield;
}
.calc__people-input::-webkit-outer-spin-button,
.calc__people-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc__people-input:focus { outline: 0; border-bottom-color: var(--red-600); border-bottom-style: solid; }
.calc__people-unit { color: var(--ink-900); font-family: var(--font-display); font-weight: 700; }
/* Апсейл виден сразу (разбор 07.09): жёлтая метка + акцентный кант */
.calc__custom { position: relative; border-left: 3px solid var(--yellow-500); }
.calc__custom-flag {
  display: inline-block;
  margin-bottom: 0.7rem;
  background: var(--yellow-500);
  color: #1a1a1a;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
  rotate: -1.5deg;
}
.calc__custom .check { align-items: center; flex-wrap: nowrap; }
.calc__custom .check > span:nth-child(3) { flex: 1; }
.calc__custom-price { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-mono-title); letter-spacing: 0.04em; white-space: nowrap; }
.calc__custom .caption { margin-top: 0.75rem; padding-left: 1.6rem; }
.calc__total { color: var(--ink-900); }
.calc__total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.calc__total-label { font-size: var(--fs-display-xl); }
.calc__total-value { font-size: var(--fs-display-xl); }
.calc__per-person { text-align: right; }

.calc__right { position: relative; }
.calc__sheet {
  position: relative;
  padding: 2.25rem 1.75rem 2rem;
  height: 100%;
}
.calc__clip { top: -18px; right: 0.9rem; z-index: 4; }
.calc__sticker {
  position: absolute;
  right: -1.25rem; top: -1.5rem;
  z-index: 3;
}
.calc__sheet-title { font-size: var(--fs-h3); margin-bottom: 1.25rem; }
.calc__sheet-title--next { margin-top: 2rem; }
.calc__fields { display: grid; gap: 0.75rem; padding-left: 0.9rem; }
.calc__fields .field + .field { margin-top: 0; }
.calc__consent { margin-top: 1rem; }
.calc__submit { margin-top: 1.25rem; white-space: normal; line-height: var(--lh-ui); }
.calc__disclaimer { margin-top: 0.75rem; }
.calc__next { display: grid; gap: 0.9rem; }
.calc__next li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; align-items: start; }
.calc__next .display { font-size: var(--fs-h3); line-height: var(--lh-display); }
.calc__next p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-900); }
.calc__after { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed rgba(0, 0, 0, 0.3); }
.calc__after .kicker { margin-bottom: 0.75rem; }
.calc__after .checklist li { font-size: var(--fs-caption); color: var(--ink-900); }
.calc__sheet .muted { color: var(--paper-fg-muted); }
@media (max-width: 1080px) {
  .calc__folder { grid-template-columns: 1fr; }
  .calc__sticker { right: 0.5rem; top: -1rem; width: 12rem; }
  .calc__sheet { padding-top: 3rem; }
}
/* Шаги формы — только на мобилке (решение 07.09): календарь не должен падать на голову */
.calc__step {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.calc__swipe { color: var(--ink-700); margin-top: 0.5rem; }
.calc__step + .calc__sheet-title { margin-top: 0.35rem; }

@media (max-width: 700px) {
  .calc__folder > *, .calc__left > *, .calc__right > * { min-width: 0; }
  /* Месяц не в своём скролле — иначе на iOS сетка едет под «Шаг 1» */
  .cal-wrap {
    display: block;
    overflow: visible;
    scroll-snap-type: none;
  }
  .cal-wrap > .cal { width: 100%; }
  .cal-wrap > .cal + .cal { padding-left: 0; padding-top: 0; border-left: 0; border-top: 0; }
  .cal__grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; justify-content: stretch; }
  .cal__day { width: 100%; height: auto; aspect-ratio: 1; font-size: var(--fs-small); }
  .calc__total-row { flex-wrap: wrap; }
  .calc__per-person { text-align: left; }
  .calc__cal-foot { grid-template-columns: 1fr; }
  .calc__panel { padding: 1.25rem 1rem 1rem; }
  .calc__total-label { font-size: var(--fs-h3); }
  .calc__total-value { font-size: var(--fs-h3); }
  .calc__sticker { position: relative; right: auto; top: auto; margin: 0.5rem 0.5rem 1.5rem auto; }
  .calc__clip { display: none; }
  .calc__sticker::after { content: ""; position: absolute; top: -20px; right: 14px; width: 22px; height: 84px; background: url("../assets/ui/clip.png") no-repeat center / contain; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.35)); }
  .calc__sheet { padding: 1.5rem 1.1rem; }
}

/* ==========================================================
   MANAGER (Коля)
   ========================================================== */
.manager__grid {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 3.5rem;
  align-items: start;
}
.manager__photo { width: 15rem; }
.manager__text h2 { margin-bottom: 1rem; }
.manager__text .lead { margin-bottom: 2rem; }
/* Поля 2x2, задача во всю ширину под ними (правка 10.09) */
.manager__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.manager__fields .field + .field { margin-top: 0; }
.manager__task { grid-column: 1 / -1; }
.manager__consent { margin-top: 1rem; }
.manager__actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
@media (max-width: 900px) {
  .manager__grid { grid-template-columns: 1fr; gap: 2rem; }
  .manager__fields { grid-template-columns: 1fr; }
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 3rem;
  align-items: start;
}
.faq .section__head { position: sticky; top: 6rem; margin-bottom: 0; }
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq .section__head { position: static; }
}

/* ==========================================================
   PROOF / открытые игры
   ========================================================== */
.proof .section__head .tape { margin-bottom: 1.25rem; }
.proof__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}
.proof__form { padding: 2.25rem 1.75rem 1.75rem; display: grid; gap: 1rem; }
.proof__form .check { align-items: center; }
.proof__form [data-ny-note] { line-height: var(--lh-body); }
.proof__form h3 { font-size: var(--fs-h3); }
.proof__form .small { color: var(--ink-700); }
.proof__fields { display: grid; gap: 0.75rem; }
.proof__fields .field + .field { margin-top: 0; }
.proof__ugc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.ugc {
  --rot: 0deg;
  position: relative;
  margin: 0;
  background: var(--ink-950);
  transform: rotate(var(--rot));
  transition: transform var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.ugc:hover { transform: rotate(0) translateY(-4px); }
.ugc img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; filter: contrast(1.05); }
.ugc .product__play { width: 3.25rem; height: 3.25rem; margin: -1.625rem 0 0 -1.625rem; }
.ugc .product__play::after { border-width: 8px 0 8px 13px; }
/* Рилсы — настоящие ролики (13.09). preload=none: до клика ничего не грузится. */
.ugc__video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 9 / 16; background: var(--ink-950); }
.ugc__play { border: 0; padding: 0; }
.ugc.is-playing .ugc__play { opacity: 0; pointer-events: none; }

/* Ссылки на сообщества */
.proof__socials { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0.75rem 0 1.25rem; }
/* Паблики под рилсами: заголовок и два крупных лого (правка 13.09) */
.proof__follow { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line-on-dark); }
/* Заголовок — обычный h3 секции, как у рилсов рядом. Лого в две колонки
   во всю ширину блока, по центру каждой (правка 13.09). */
.proof__follow .proof__socials { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 1.5rem; margin: 1.25rem 0 0; }
.social--lg { flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; font-size: var(--fs-small); }
.social--lg .social__ico { width: 4.375rem; height: 4.375rem; }
.social {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--fs-small); font-weight: 700;
  color: var(--fg); text-decoration: underline; text-underline-offset: 0.25em;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition: text-decoration-color var(--dur-fast);
}
.social:hover { text-decoration-color: currentColor; }
.social__ico { flex: 0 0 auto; }
.footer__socials { display: flex; gap: 1.25rem; margin-top: 0.5rem; }
.social--sm { font-size: var(--fs-caption); font-weight: 400; }
.footer__address { margin-top: 0.5rem; max-width: 26ch; font-size: var(--fs-small); color: var(--fg-muted); }

@media (max-width: 900px) {
  .proof__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) { .proof__ugc { grid-template-columns: 1fr 1fr; } .proof__ugc .ugc:last-child { display: none; } }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer { padding: 3.5rem 0 2rem; border-top: 1px solid var(--line-on-dark); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2rem;
}
.footer__brand .logo { display: block; margin-bottom: 0.75rem; }
.footer__brand .caption { max-width: 32ch; }
.footer__nav, .footer__contacts { display: grid; gap: 0.4rem; align-content: start; }
.footer__nav .kicker, .footer__contacts .kicker { margin-bottom: 0.5rem; }
.footer__nav a, .footer__contacts a { font-size: var(--fs-small); color: var(--fg-muted); transition: color var(--dur-fast); }
.footer__nav a:hover, .footer__contacts a:hover { color: #fff; }
.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-on-dark);
  color: var(--fg-faint);
}
.footer__legal a { text-decoration: underline; text-underline-offset: 0.2em; }
.footer__legal a:hover { color: #fff; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================
   404
   ========================================================== */
.header__inner > .header__cta:last-child { margin-left: auto; }
.not-found__wrap { max-width: 40rem; }
.not-found__title {
  font-size: clamp(3.75rem, 2rem + 8vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
}
.not-found__link { text-decoration: underline; text-underline-offset: 0.2em; }

/* ==========================================================
   MODALS (контент)
   ========================================================== */
.modal-success { display: grid; gap: 1.25rem; justify-items: start; text-align: left; }
.modal-success h3 { font-size: var(--fs-h3); }
.modal-video__frame {
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  background: var(--ink-950);
  border: 1px dashed rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   ПРАВКИ 09.09 — блоки
   ========================================================================== */

/* 1. Первый экран: заголовок на всю ширину мобильного экрана */
@media (max-width: 900px) {
  .hero__title { max-width: none; font-size: clamp(2.25rem, 10.2vw, 3.5rem); }
  .hero__lead { max-width: none; }
}

/* 3 + 13. Цифры по центру колонок */
.hit__stats .stat { justify-items: center; text-align: center; }
.hit__stats .stat__label { max-width: none; }
@media (max-width: 900px) {
  .hero__stats .stat { justify-items: center; text-align: center; }
  .hero__stats .stat__label { max-width: none; }
}

/* 5. «Вся компания на два часа»: на мобилке текст — картинка — текст — картинка */
@media (max-width: 900px) {
  .product > .container { display: flex; flex-direction: column; }
  .product .section__head { order: 0; }
  .product__steps, .product__media { display: contents; }
  .product__step { margin-bottom: 1.25rem; }
  .product__shot { margin-bottom: 2rem; }
  .product__step:nth-child(1) { order: 1; }
  .product__shot:nth-child(1) { order: 2; }
  .product__step:nth-child(2) { order: 3; }
  .product__shot:nth-child(2) { order: 4; }
  .product__step:nth-child(3) { order: 5; }
  .product__shot:nth-child(3) { order: 6; }
}

/* 8 + 12 + 15 + 24. Кнопка по центру, подпись — под ней */
.section__foot.cta-row, .cta-row--center, .manager__actions {
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Правка 10.09 (Диана): подпись под кнопкой почти наезжала на неё */
  gap: 1.75rem;
}
.section__foot.cta-row .caption, .cta-row--center .caption, .manager__actions .caption { max-width: 52ch; }
@media (max-width: 900px) {
  .cta-row, .section__foot.cta-row, .manager__actions, .hero__actions {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cta-row .btn, .manager__actions .btn, .hero__actions .btn { width: 100%; }
  .cta-row .caption, .manager__actions .caption { max-width: 46ch; text-align: center; }
  .section__foot:not(.cta-row) { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .section__foot:not(.cta-row) .btn { width: 100%; }
  .cases .section__foot .btn, .mechanics .section__foot .btn { width: 100%; }
}

/* 14. «Дату можно забрать сейчас»: заголовок как у соседних секций, но чёрный */
.cta-band .cta-band__inner > div { max-width: 46rem; }
.cta-band h2 { margin-bottom: 0.6rem; color: var(--paper-fg); }

/* 16. Тайминг: линия «прочерчивается», точки появляются */
.timeline__list::before { transform-origin: top; transform: scaleY(0); transition: transform 900ms var(--ease-out); }
.timeline__list.is-in::before { transform: scaleY(1); }
.timeline__item::before { transform: scale(0); transition: transform 420ms var(--ease-spring); transition-delay: calc(var(--i, 0) * 110ms + 250ms); }
.timeline__list.is-in .timeline__item::before { transform: scale(1); }
.timeline__item h4 { font-size: var(--fs-h4); }

/* 17. Зина в тайминге: фото слева, «ваш менеджер» и заголовок справа */
.zina__head { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.zina__photo { width: 6.5rem; height: 6.5rem; }
.zina__intro .kicker { display: block; margin-bottom: 0.35rem; }
/* Кегль h3 не свой, а общий для заголовков внутри карточек (10.09) */
.zina__intro h3 { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.zina__foot { display: grid; justify-items: center; gap: 0.75rem; text-align: center; }
.zina__foot .btn { width: min(100%, 20rem); }
.zina .btn { justify-self: center; }

/* 18. Форматы 2×2 без скролла + анимация.
   Правило ниже по файлу раньше перебивало мобильный 1-col — на узком экране
   карточки оставались в две колонки, и «Тематическая вечеринка» не переносилась. */
@media (min-width: 601px) {
  .alts__formats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.alts__format { transform: translateY(14px); opacity: 0; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
[data-reveal].is-in .alts__format, .alts__formats.is-in .alts__format { opacity: 1; transform: none; }

/* 19. Ведущие: сначала текст, потом фото */
.hosts__crew-text { order: 0; }
.hosts__crew-photo--second { order: 1; }

/* 22 + 23. Калькулятор: шаги, подпись календаря на всю ширину */
.calc__step {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.calc__step b { font-weight: 700; }
.calc__step--total { font-weight: 700; }
.calc__cal-foot { grid-template-columns: 1fr; }
.calc__cal-foot .caption { max-width: none; }
.cal__legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.4rem 1.5rem; }
/* На узком экране легенда в колонку по строке на пункт — иначе подписи
   переносились по слогам и блок занимал полэкрана (правка 10.09) */
@media (max-width: 480px) {
  .cal__legend { gap: 0.35rem 1rem; }
}

/* 24. Коля: фото слева, текст справа, форма ниже */
.manager__grid { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
.manager__formwrap { grid-column: 2; }
@media (max-width: 900px) {
  .manager__formwrap { grid-column: 1 / -1; margin-top: 1.5rem; }
  .manager__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1.25rem; }
  .manager__photo { width: 100%; }
  .manager__text { align-self: center; }
  .manager__text h2 { margin-bottom: 0.6rem; }   /* кегль общий — var(--fs-h3) из .h3 (10.09) */
}


/* 25. «Записаться через Зину»: отступы по бокам не теряются */
.proof__grid { min-width: 0; }
.proof__grid > * { min-width: 0; }

/* Мелкие правки раскладки 09.09 */
@media (max-width: 700px) {
  .calc__custom .check { flex-wrap: wrap; }
  .calc__custom-price { margin-left: 1.7rem; }
}
@media (max-width: 480px) {
  .manager__grid { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
  .manager__photo { width: 100%; }
}

/* Зина в форме — горизонтальный стикер и на мобилке (правка 09.09) */
@media (max-width: 899px) {
  .calc__sticker {
    position: relative;
    width: 100%;
    max-width: none;
    right: auto; top: auto; left: auto;
    margin: 0 0 1.4rem;
    --sticker-rotate: 1deg;
  }
  .calc__sticker::after { right: 18px; }
}

/* Уважение к prefers-reduced-motion: всё, что появляется анимацией, видно сразу */
@media (prefers-reduced-motion: reduce) {
  .alts__format { opacity: 1; transform: none; }
  [data-reveal] .checklist__box--checked::after { transform: scale(1); }
  .timeline__list::before { transform: scaleY(1); }
  .timeline__item::before { transform: scale(1); }
}

/* ==========================================================================
   ПРАВКИ 09.09 (вечер): Safari, календарь, шаги, стикеры
   ========================================================================== */

/* 1. Дворецкий вне скролл-ленты: Safari обрезал его как содержимое контейнера
   с overflow-x. Едет вместе с лентой через translateX в app.js. */
.mechanics__butler { will-change: transform; }

/* 8. Календарь: в .cal-wrap теперь навигация + сетка, а не два месяца рядом.
   Старое правило grid 1fr 1fr разваливало блок на 701–899px. */
.cal-wrap { display: block; grid-template-columns: none; overflow: visible; }
.cal-nav { justify-content: center; gap: 0.9rem; }
.cal-nav__title { flex: 0 1 auto; min-width: 8.5rem; }
.calc__people .caption:last-child { margin-top: 0.9rem; }

/* 9. Зина в форме — тоже на скотче, скрепка убрана */
.calc__sticker-tape { top: -14px; z-index: 4; }

/* 10. Фото Коли ниже на 30% */
.manager__photo .host__photo { aspect-ratio: 1.07; }
.manager__photo .host__photo span { font-size: 3rem; }

/* 4. Тайминг: центральный блок программы въезжает заметно */
.timeline__item--hl .timeline__card {
  opacity: 0;
  transform: rotate(-4deg) translateY(28px) scale(0.94);
  transition: opacity 620ms var(--ease-out), transform 720ms var(--ease-spring);
  transition-delay: 420ms;
}
.timeline__list.is-in .timeline__item--hl .timeline__card {
  opacity: 1;
  transform: rotate(-0.8deg) translateY(0) scale(1);
}
.timeline__item--hl .timeline__pin {
  opacity: 0;
  transform: translateY(-26px) scale(0.7) rotate(-14deg);
  transition: opacity 260ms var(--ease-out), transform 420ms var(--ease-spring);
  transition-delay: 900ms;
}
.timeline__list.is-in .timeline__item--hl .timeline__pin { opacity: 1; transform: none; }
.timeline__item--hl .timeline__time {
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  transition-delay: 700ms;
}
.timeline__list.is-in .timeline__item--hl .timeline__time { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .timeline__item--hl .timeline__card { opacity: 1; transform: rotate(-0.8deg); }
  .timeline__item--hl .timeline__pin, .timeline__item--hl .timeline__time { opacity: 1; transform: none; }
}

/* Календарь на средних ширинах (701–899): сетка на всю ширину панели,
   месяц центрируется ровно над ней */
@media (min-width: 701px) and (max-width: 899px) {
  .cal { --cell: 2.6rem; }
  .cal__grid { grid-template-columns: repeat(7, var(--cell)); gap: 0.15rem; justify-content: center; }
  .cal__day { width: var(--cell); height: var(--cell); font-size: var(--fs-small); }
  .cal__wd { text-align: center; }
  .cal-nav { max-width: 22rem; margin-inline: auto; }
}
/* «Мало мест»: плашка не сливается с соседним днём в сплошной серый блок */
.cal__day.is-scarce { background-clip: content-box; padding: 2px; }

/* 3. Заголовки заполняют строку: снимаем искусственные ограничения по ширине */
.hero__title { max-width: none; }
.cta-band .cta-band__inner > div { max-width: 60rem; }

/* 10. Коля: фото занимает обе строки, форма поднимается сразу под текст */
.manager__person { grid-row: 1 / span 2; }
.manager__formwrap { grid-row: 2; margin-top: 1.25rem; }
.manager__grid { row-gap: 0; }
.manager__text .lead { margin-bottom: 0; }
@media (max-width: 900px) {
  .manager__person { grid-row: auto; }
  .manager__formwrap { grid-row: auto; }
}

/* ==========================================================================
   ПРАВКИ 09.09 (2): руки, календарь, стикеры, Telegram, одностраничник
   ========================================================================== */

/* 1. Дворецкий. max-width из reset обрезал картинку на мобилке — оттуда и «рук нет».
   Размах перчаток = высота ящика + 5% с каждой стороны, чтобы они держали за наружный борт. */
.mechanics__butler {
  max-width: none;
  left: calc(var(--track-left) - var(--crate-w) * 1.232);
  top: calc(var(--crate-w) * -0.018);
  width: calc(var(--crate-w) * 1.446);
}
/* Корпус обрезается краем секции встык, без затемняющего перехода (правка 09.09).
   Перчатки лежат ПОВЕРХ ящика — обе, и верхняя, и нижняя. */
.mechanics__butler { z-index: 4; }
.mechanics__track { z-index: 3; }

/* Подпись под ящиком по внутренней ширине дна — текст не расходится шире короба */
.crate__label { width: 82%; margin-inline: auto; }

/* 3. Закладка на делах: текст сдвинут влево и на узких экранах тоже */
.case__link .marker-link { margin-left: -1.1rem; padding-left: 1.6rem; padding-right: 2.1rem; }

/* 6. Календарь: кнопки как конверсионные — тёмные, стрелка белая */
.cal-nav { gap: 1.1rem; }
/* Плоская заливка вместо градиента и тени: любые градиент, тень и трансформация
   на квадратной кнопке в Safari читались как срез сверху и снизу (правка 09.09).
   Стрелка — inline-SVG, глиф ‹ рисовался по-разному в разных шрифтах. */
.cal-nav__btn {
  width: 2.5rem; height: 2.5rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--ink-900);
  color: #fff;
  box-shadow: none;
  transition: background var(--dur-fast), opacity var(--dur-fast);
}
.cal-nav__btn svg { width: 42%; height: 42%; display: block; }
.cal-nav__btn:hover:not([disabled]) { background: #3d3939; }
.cal-nav__btn:active:not([disabled]) { background: #000; }
.cal-nav__btn[disabled] { opacity: 0.3; }
/* Название месяца — общий кегль заголовков панелей (10.09) */
.cal-nav__title { font-size: var(--fs-h3); }
.cal-body { touch-action: pan-y; }
/* Выбранные даты — крупно и жирно */
.calc__selected { font-weight: 400; }
.calc__selected.has-dates { font-weight: 700; font-size: var(--fs-body); color: var(--ink-900); }

/* 7. Зина: скрепки нет, фото круглое без белого квадрата */
.calc__sticker::after { content: none; }
.calc__sticker .sticker__photo { border-radius: 50%; }

/* 8. Telegram-бот рядом с формой */
/* Правка 10.09: было space-between на всю ширину кадра — кнопки отрывались
   от текста и уезжали к правому краю экрана. Теперь идут сразу за текстом. */
.calc__ways {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem 1.75rem;
  flex-wrap: wrap;
  /* Блок отлеплен от папки с формой снизу (правка 10.09) */
  margin: 1.5rem 0 2.75rem;
}
.calc__ways-text { flex: 0 1 auto; min-width: 0; }
.calc__ways .btn { flex: 0 0 auto; margin-left: 0; }
.calc__ways-text { font-size: var(--fs-small); color: var(--fg-muted); max-width: none; }
/* Пастельный телеграмный синий: узнаётся, но не выбивается из графита (правка 09.09) */
.btn--tg {
  --btn-bg: #9cc6dc;
  --btn-fg: var(--ink-900);
  --btn-bg-hover: #aed4e7;
  --btn-edge: #6f96a9;
  border-color: #cfe4ee;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  padding-inline: 1.1rem;
  letter-spacing: 0.06em;
}
.btn__ico { flex: 0 0 auto; }
@media (max-width: 520px) { .calc__ways .btn { width: 100%; justify-content: center; margin-left: 0; } }
/* Подпись идёт после кнопки и звучит одинаково на всех ширинах (10.09):
   на десктопе — строкой справа, на мобилке — по центру под кнопкой. */
@media (max-width: 900px) {
  .calc__ways { flex-direction: column; align-items: center; gap: 0.75rem; }
  .calc__ways .btn { width: auto; min-width: 14rem; justify-content: center; }
  .calc__ways-text { text-align: center; margin: 0; }
}

/* 9. Подвал одностраничника */
.footer__contacts a { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ПРАВКИ 09.09 (3): анимация фото и «монетка» на фото Зины
   ========================================================================== */

/* Фото проявляются при входе экрана: лёгкий наезд и подъём насыщенности.
   Через animation, а не transition — иначе конечный transform перебивал ховер. */
@keyframes photo-in {
  from { opacity: 0; transform: scale(1.07); filter: saturate(0.45) contrast(0.95); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; filter: none; }
}
[data-reveal].is-in .polaroid img,
[data-reveal].is-in .product__shot img,
[data-reveal].is-in .fresh__photo img,
[data-reveal].is-in .turnkey__photos picture img,
[data-reveal].is-in .ugc img,
.polaroid[data-reveal].is-in img,
.fresh__photo[data-reveal].is-in img {
  animation: photo-in 1900ms var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 220ms + 240ms);
}

/* Фото Зины поворачивается монеткой, когда экран открывается */
@keyframes coin-flip {
  from { transform: rotateY(-360deg); }
  to   { transform: rotateY(0); }
}
.sticker__photo, .zina__photo { backface-visibility: visible; }
.sticker--wide, .zina__head { perspective: 700px; }
[data-reveal].is-in .sticker__photo,
[data-reveal].is-in .zina__photo,
.sticker[data-reveal].is-in .sticker__photo {
  animation: coin-flip 2000ms var(--ease-out) backwards;
  /* Стикер проявляется с 800 мс (reveal-delay 400 x --anim-k). Монетка стартовала
     на 1400 мс и к моменту, когда на неё смотрят, уже успевала докрутиться —
     сдвигаем к началу появления (правка 10.09). */
  animation-delay: 850ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-in .polaroid img,
  [data-reveal].is-in .product__shot img,
  [data-reveal].is-in .fresh__photo img,
    [data-reveal].is-in .turnkey__photos picture img,
  [data-reveal].is-in .ugc img,
  .polaroid[data-reveal].is-in img,
  .fresh__photo[data-reveal].is-in img,
  [data-reveal].is-in .sticker__photo,
  [data-reveal].is-in .zina__photo { animation: none; }
}

/* Карточка персонализации (калькулятор / другие экраны): моно, не рукопись. */
.sticker--slate .sticker__title { font-size: var(--fs-mono-title); line-height: var(--lh-title-mono); margin-bottom: 0.55rem; }
.sticker--slate .sticker__text { font-size: var(--fs-small); line-height: var(--lh-body); }

/* ==========================================================================
   Карточка «Столько реквизита не унести в руках» (правка 13.09)
   Один кадр фургона во всю ширину карточки. Бумажные подложки убраны,
   рамки не нужны. Блок стоит в конце файла: базовые .turnkey__photos
   идут ниже по файлу и иначе перебивали эти правила.
   ========================================================================== */
.turnkey__photos--van { position: relative; display: block; height: auto; aspect-ratio: auto; padding-right: 0; margin-top: 1.25rem; }
.turnkey__photos--van picture { position: static; display: block; width: 100%; }
.turnkey__photos--van picture img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 628 / 260;
  object-fit: cover;
  border-radius: var(--radius-xs);
  box-shadow: none;
}
/* На мобилке порядок простой: заголовок, текст, под ними снимок */
@media (max-width: 900px) {
  .turnkey__card--photo { display: flex; flex-direction: column; }
  .turnkey__photos--van { margin-top: 1rem; }
  .turnkey__photos--van picture img { aspect-ratio: 3 / 2; }
}