/* Проблемные экраны. Правило одно: на экране один крупный тезис и один
   крупный объект, который человек узнаёт из своей жизни. Промежуточных
   размеров нет, иначе взгляд не цепляется и страница читается как текст. */

.probs {
  background: var(--buzz-night-950);
  color: var(--buzz-ink-100);
  font-family: var(--buzz-font-body);
}

.prob {
  border-top: 1px solid var(--buzz-night-800);
}

.prob__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 104px 48px;
}

.prob--flip .prob__copy { order: 2; }

.prob__num {
  margin: 0 0 4px;
  font-family: var(--buzz-font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--buzz-amber-500);
}

/* Триггер это главный графический элемент экрана, но не главный читаемый:
   огромный и приглушённый. Он называет проблему одним словом, а предложение
   под ним её объясняет. Два одинаково контрастных крупных текста дрались бы
   за взгляд. */
.prob__trigger {
  margin: 0 0 6px;
  font-family: var(--buzz-font-display);
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  line-height: 0.86;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: oklch(72% 0.17 60 / 0.3);
}

.prob__title {
  margin: 0 0 20px;
  font-family: var(--buzz-font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--buzz-sand-50);
}

.prob__body {
  margin: 0 0 22px;
  max-width: 30em;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--buzz-ink-200);
}

/* Разворот намеренно мельче тезиса: сначала человек узнаёт свою боль,
   и только потом слышит, что мы с ней делаем. */
.prob__turn {
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--buzz-amber-500);
  max-width: 28em;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--buzz-amber-300);
}

/* Появление на прокрутке: небольшое, чтобы читалось как ритм страницы,
   а не как аттракцион. */
.prob__copy, .prob__art {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-standard), transform 620ms var(--ease-standard);
}

.prob__art { transition-delay: 110ms; }
.prob.is-in .prob__copy,
.prob.is-in .prob__art { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .prob__copy, .prob__art { opacity: 1; transform: none; transition: none; }
}

/* ---------- 01 сетка бронирования ---------- */

.art-grid {
  padding: 26px;
  border: 1px solid var(--buzz-night-700);
  border-radius: 18px;
  background: var(--buzz-night-900);
}

.art-grid__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--buzz-ink-600);
}

.art-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.art-slot {
  padding: 14px 10px;
  border: 1px solid var(--buzz-night-700);
  border-radius: 10px;
  text-align: center;
  font-family: var(--buzz-font-mono);
  font-size: 14px;
  color: var(--buzz-ink-200);
}

.art-slot.is-gone {
  color: var(--buzz-night-700);
  text-decoration: line-through;
  border-style: dashed;
}

.art-slot.is-pick {
  border-color: var(--buzz-amber-500);
  color: var(--buzz-amber-300);
  box-shadow: 0 0 0 3px oklch(64% 0.19 58 / 0.16);
}

.art-grid__foot {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--buzz-ink-600);
}

/* ---------- 02 остывание интереса ---------- */

.art-decay {
  display: grid;
  gap: 22px;
  padding: 30px;
  border: 1px solid var(--buzz-night-700);
  border-radius: 18px;
  background: var(--buzz-night-900);
}

.art-decay__row {
  display: grid;
  grid-template-columns: 104px 1fr 150px;
  align-items: center;
  gap: 18px;
  font-size: 15px;
  color: var(--buzz-ink-200);
}

.art-decay__day {
  font-family: var(--buzz-font-mono);
  font-size: 16px;
  color: var(--buzz-sand-50);
}

.art-decay__bar {
  position: relative;
  height: 34px;
  border-radius: 999px;
  background: var(--buzz-night-800);
  overflow: hidden;
}

.art-decay__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--buzz-amber-500);
}

/* Подпись отдельной колонкой, а не поверх полосы: на коротких полосах текст
   лёг бы на тёмный трек и пропал. */
.art-decay__pct {
  font-size: 15px;
  color: var(--buzz-ink-200);
}

.art-decay__note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 15px; color: var(--buzz-ink-600); }

/* ---------- 03 экран блокировки со спамом ---------- */

/* Корпус нужен затем, чтобы список пропущенных читался как экран телефона,
   а не как текст в пустоте. */
.art-phone {
  position: relative;
  max-width: 340px;
  margin-inline: auto;
  padding: 12px;
  border: 1px solid var(--buzz-night-700);
  border-radius: 42px;
  background: var(--buzz-night-800);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.art-phone__notch {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 104px;
  height: 22px;
  border-radius: 999px;
  background: var(--buzz-night-950);
  z-index: 1;
}

.art-lock {
  padding: 54px 16px 30px;
  border-radius: 32px;
  background: linear-gradient(180deg, var(--buzz-night-900), var(--buzz-night-950));
}

.art-lock__day {
  margin: 0;
  text-align: center;
  font-size: 14px;
  color: var(--buzz-ink-600);
}

.art-lock__time {
  margin: 2px 0 26px;
  text-align: center;
  font-family: var(--buzz-font-display);
  font-size: 62px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--buzz-sand-50);
}

.art-call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding: 14px 16px;
  border-radius: 14px;
  background: oklch(97% 0.008 76 / 0.09);
  font-size: 15px;
}

.art-call span:first-child { color: var(--buzz-sand-50); }
.art-call span:last-child { font-family: var(--buzz-font-mono); font-size: 12px; color: var(--buzz-danger); }
.art-call.is-quiet span:last-child { color: var(--buzz-ink-600); }

/* ---------- 04 два уведомления ---------- */

.art-notes { display: grid; gap: 18px; }

.art-note {
  padding: 24px 26px;
  border-radius: 18px;
  border: 1px solid var(--buzz-night-700);
  background: var(--buzz-night-900);
}

.art-note--harsh { border-color: oklch(58% 0.2 25 / 0.55); }

.art-note__app {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--buzz-ink-600);
}

.art-note__line { margin: 0; font-size: 20px; line-height: 1.35; color: var(--buzz-sand-50); }
.art-note__sub { margin: 8px 0 0; font-size: 14px; color: var(--buzz-ink-600); }

/* ---------- 05 профили гостей ---------- */

/* Одна сетка читалась бы как расписание хоста, то есть как календарь, против
   которого построена вся страница. Здесь наоборот: четыре человека, у каждого
   свой пик. Смысл в различии, а не в самой карте. */
.art-people {
  padding: 26px 24px 22px;
  border: 1px solid var(--buzz-night-700);
  border-radius: 18px;
  background: var(--buzz-night-900);
}

.art-people__axis,
.art-person {
  display: grid;
  grid-template-columns: 104px 1fr 116px;
  align-items: center;
  gap: 14px;
}

.art-people__axis { margin-bottom: 10px; }

.art-people__hours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

.art-people__hours i {
  font-family: var(--buzz-font-mono);
  font-size: 11px;
  font-style: normal;
  text-align: center;
  color: var(--buzz-ink-600);
}

.art-person { margin-bottom: 12px; }

.art-person__who {
  font-size: 14px;
  font-weight: 600;
  color: var(--buzz-sand-50);
  white-space: nowrap;
}

.art-person__strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

.art-people__cell {
  height: 30px;
  border-radius: 6px;
  background: var(--buzz-night-800);
}

.art-people__cell[data-h="1"] { background: oklch(64% 0.19 58 / 0.22); }
.art-people__cell[data-h="2"] { background: oklch(64% 0.19 58 / 0.5); }
.art-people__cell[data-h="3"] { background: oklch(64% 0.19 58 / 0.9); }

.art-people__cell.is-peak {
  box-shadow: inset 0 0 0 1.5px var(--buzz-amber-300), 0 0 0 3px oklch(64% 0.19 58 / 0.16);
}

.art-person__when {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--buzz-amber-300);
}

.art-people__foot {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--buzz-ink-600);
}


/* ---------- 05 день, отданный расписанию ---------- */

.art-day {
  padding: 26px 24px 22px;
  border: 1px solid var(--buzz-night-700);
  border-radius: 18px;
  background: var(--buzz-night-900);
}

.art-day__head {
  display: flex;
  justify-content: space-between;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--buzz-ink-600);
}

.art-day__rows { display: grid; gap: 7px; }

.art-day__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 14px;
  font-family: var(--buzz-font-mono);
  font-size: 13px;
  color: var(--buzz-ink-600);
}

/* Пустые часы намеренно видны: они и есть содержание картинки. Держали весь
   день, использовали два часа. */
.art-day__bar {
  height: 30px;
  border-radius: 8px;
  border: 1px dashed var(--buzz-night-700);
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 7px,
    oklch(35% 0.025 258 / 0.32) 7px 8px
  );
}

.art-day__row.is-taken { color: var(--buzz-amber-300); }

.art-day__row.is-taken .art-day__bar {
  display: flex;
  align-items: center;
  padding-left: 14px;
  border: none;
  background: var(--buzz-amber-500);
  color: var(--buzz-ink-950);
  font-family: var(--buzz-font-body);
  font-size: 13px;
  font-weight: 700;
}

.art-day__foot { margin: 16px 0 0; font-size: 14px; color: var(--buzz-ink-600); }

/* ---------- подсказка часа хосту ---------- */

.art-tip {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--buzz-night-700);
}

.art-tip__label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--buzz-ink-600);
}

.art-tip__bubble {
  padding: 14px 16px;
  border-radius: 16px 16px 16px 5px;
  background: var(--buzz-night-800);
  font-size: 15px;
  line-height: 1.45;
  color: var(--buzz-sand-50);
}


/* ---------- 06 что мы на самом деле храним ---------- */

/* Показать собственную запись вместо метафоры: строка «when: not decided» и
   есть весь аргумент, и придумать её убедительнее нельзя. */
.art-record {
  padding: 28px 26px 24px;
  border: 1px solid var(--buzz-night-700);
  border-radius: 18px;
  background: var(--buzz-night-900);
}

.art-record__head {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--buzz-ink-600);
}

.art-record__list { margin: 0; display: grid; gap: 1px; }

.art-record__list > div {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid var(--buzz-night-800);
}

.art-record__list > div:first-child { border-top: 0; }

.art-record__list dt {
  font-family: var(--buzz-font-mono);
  font-size: 13px;
  color: var(--buzz-ink-600);
}

.art-record__list dd {
  margin: 0;
  font-size: 16px;
  color: var(--buzz-sand-50);
}

.art-record__list > div.is-open dd {
  font-weight: 700;
  color: var(--buzz-amber-300);
}

.art-record__foot {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--buzz-ink-600);
}

@media (max-width: 900px) {
  .art-record__list > div { grid-template-columns: 120px 1fr; }

  .art-day__row { grid-template-columns: 48px 1fr; }

  .art-decay__row { grid-template-columns: 84px 1fr; }
  .art-decay__pct { grid-column: 2; font-size: 14px; }

  .prob__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 72px 24px;
  }
  .prob--flip .prob__copy { order: 0; }
}

/* ---------- 06 дверь: последний экран главной ---------- */

.prob--door { border-bottom: 1px solid var(--buzz-night-800); }

.prob__inner--door {
  display: block;
  max-width: 900px;
  text-align: center;
  padding: 120px 48px 128px;
}

.prob__title--door {
  margin: 0 auto 20px;
  max-width: 16em;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.prob__body--door { margin: 0 auto 40px; max-width: 34em; }

/* Знак на кнопке допустим только здесь: кнопка ведёт на сам buzzzz.me, и
   глагол под ним всё равно говорит, что произойдёт. */
.door-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 52px;
  border-radius: 22px;
  background: var(--buzz-amber-600);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 50px oklch(56% 0.18 58 / 0.36);
  transition: background 200ms ease, transform 200ms ease;
}

.door-btn:hover { background: var(--buzz-amber-700); transform: translateY(-2px); }
.door-btn:active { transform: scale(0.985); }

.door-btn__logo {
  display: block;
  width: 214px;
  height: 42px;
  background-color: currentColor;
  -webkit-mask: url(logo.svg) no-repeat center / contain;
  mask: url(logo.svg) no-repeat center / contain;
}

.door-btn__verb {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---------- блок присоединения на /how ---------- */

.join {
  border-top: 1px solid var(--buzz-night-800);
  background: var(--buzz-night-950);
}

.join__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 96px 24px 104px;
  text-align: center;
  font-family: var(--buzz-font-body);
}

.join__eyebrow {
  margin: 0 0 10px;
  font-family: var(--buzz-font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--buzz-amber-500);
}

.join__title {
  margin: 0 0 14px;
  font-family: var(--buzz-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  color: var(--buzz-sand-50);
}

.join__lead {
  margin: 0 auto 32px;
  max-width: 34em;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--buzz-ink-200);
}

.join__label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--buzz-ink-600);
}

.join__row {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}

.join__row input {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  height: 52px;
  border: 1px solid var(--buzz-night-700);
  border-radius: 999px;
  background: var(--buzz-night-900);
  color: var(--buzz-sand-50);
  font: inherit;
  font-size: 17px;
}

.join__row input:focus {
  outline: 2px solid var(--buzz-amber-500);
  outline-offset: 1px;
}

.join__row button { flex-shrink: 0; }

.join__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.join__error { margin: 14px 0 0; color: var(--buzz-danger); font-size: 15px; }

.join__done-title {
  margin: 0 0 8px;
  font-family: var(--buzz-font-display);
  font-size: 26px;
  color: var(--buzz-sand-50);
}

.join__done p { margin: 0 0 6px; color: var(--buzz-ink-200); }
.join__note { color: var(--buzz-ink-600); font-size: 15px; }

@media (max-width: 560px) {
  .join__row { flex-direction: column; }
  .join__row button { width: 100%; }
  .door-btn { padding: 24px 32px; }
  .door-btn__logo { width: 172px; height: 34px; }
}

@media (max-width: 900px) {
  .art-people__axis,
  .art-person { grid-template-columns: 88px 1fr; }
  .art-person__when { grid-column: 2; text-align: left; font-size: 12px; }
  .art-people__axis > span:last-child { display: none; }
}

/* ---------- Оживление при прокрутке ----------
   Не украшение: объект собирается на глазах, и человек видит, что там
   происходит, вместо того чтобы разглядывать готовую картинку. */

.prob__num, .prob__trigger, .prob__title, .prob__body, .prob__turn {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease-standard), transform 560ms var(--ease-standard);
}

.prob.is-in .prob__num { transition-delay: 0ms; }
.prob.is-in .prob__trigger { transition-delay: 70ms; }
.prob.is-in .prob__title { transition-delay: 150ms; }
.prob.is-in .prob__body { transition-delay: 230ms; }
.prob.is-in .prob__turn { transition-delay: 310ms; }

.prob.is-in .prob__num,
.prob.is-in .prob__trigger,
.prob.is-in .prob__title,
.prob.is-in .prob__body,
.prob.is-in .prob__turn { opacity: 1; transform: none; }

/* Копия целиком больше не двигается: иначе текст едет дважды. */
.prob__copy { opacity: 1; transform: none; transition: none; }

/* 01: слоты выкладываются по очереди, выбранный последним */
.art-slot { opacity: 0; transform: scale(0.94); transition: opacity 340ms ease, transform 340ms ease; }
.prob.is-in .art-slot { opacity: 1; transform: none; }
.prob.is-in .art-slot:nth-child(1) { transition-delay: 260ms; }
.prob.is-in .art-slot:nth-child(2) { transition-delay: 305ms; }
.prob.is-in .art-slot:nth-child(3) { transition-delay: 350ms; }
.prob.is-in .art-slot:nth-child(4) { transition-delay: 395ms; }
.prob.is-in .art-slot:nth-child(5) { transition-delay: 440ms; }
.prob.is-in .art-slot:nth-child(7) { transition-delay: 485ms; }
.prob.is-in .art-slot:nth-child(8) { transition-delay: 530ms; }
.prob.is-in .art-slot:nth-child(9) { transition-delay: 575ms; }
.prob.is-in .art-slot.is-pick { transition-delay: 700ms; }

/* 02: полосы растут от нуля, и остывание видно, а не читается */
.art-decay__fill { width: 0; transition: width 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.prob.is-in .art-decay__fill { width: var(--w); }
.prob.is-in .art-decay__row:nth-child(2) .art-decay__fill { transition-delay: 380ms; }
.prob.is-in .art-decay__row:nth-child(3) .art-decay__fill { transition-delay: 520ms; }
.prob.is-in .art-decay__row:nth-child(4) .art-decay__fill { transition-delay: 660ms; }

/* 03: пропущенные падают одна за другой, как это и происходит в жизни */
.art-call { opacity: 0; transform: translateY(-8px); transition: opacity 320ms ease, transform 320ms ease; }
.prob.is-in .art-call { opacity: 1; transform: none; }
.prob.is-in .art-call:nth-of-type(1) { transition-delay: 320ms; }
.prob.is-in .art-call:nth-of-type(2) { transition-delay: 470ms; }
.prob.is-in .art-call:nth-of-type(3) { transition-delay: 620ms; }
.prob.is-in .art-call:nth-of-type(4) { transition-delay: 770ms; }
.prob.is-in .art-call:nth-of-type(5) { transition-delay: 980ms; }

/* 04: сначала обвиняющее уведомление, потом безразличное */
.art-note { opacity: 0; transform: translateY(12px); transition: opacity 420ms ease, transform 420ms ease; }
.prob.is-in .art-note { opacity: 1; transform: none; }
.prob.is-in .art-note:nth-child(1) { transition-delay: 300ms; }
.prob.is-in .art-note:nth-child(2) { transition-delay: 620ms; }

/* 05: день заполняется сверху вниз, и пустота копится на глазах */
.art-day__row { opacity: 0; transition: opacity 300ms ease; }
.prob.is-in .art-day__row { opacity: 1; }
.prob.is-in .art-day__row:nth-child(1) { transition-delay: 260ms; }
.prob.is-in .art-day__row:nth-child(2) { transition-delay: 320ms; }
.prob.is-in .art-day__row:nth-child(3) { transition-delay: 380ms; }
.prob.is-in .art-day__row:nth-child(4) { transition-delay: 440ms; }
.prob.is-in .art-day__row:nth-child(5) { transition-delay: 500ms; }
.prob.is-in .art-day__row:nth-child(6) { transition-delay: 560ms; }
.prob.is-in .art-day__row:nth-child(7) { transition-delay: 620ms; }
.prob.is-in .art-day__row:nth-child(8) { transition-delay: 680ms; }
.prob.is-in .art-day__row:nth-child(9) { transition-delay: 740ms; }

/* 06: строки записи проявляются, «not decided» последней */
.art-record__list > div { opacity: 0; transform: translateX(-8px); transition: opacity 360ms ease, transform 360ms ease; }
.prob.is-in .art-record__list > div { opacity: 1; transform: none; }
.prob.is-in .art-record__list > div:nth-child(1) { transition-delay: 300ms; }
.prob.is-in .art-record__list > div:nth-child(2) { transition-delay: 380ms; }
.prob.is-in .art-record__list > div:nth-child(3) { transition-delay: 460ms; }
.prob.is-in .art-record__list > div:nth-child(4) { transition-delay: 540ms; }
.prob.is-in .art-record__list > div:nth-child(5) { transition-delay: 720ms; }

/* 07: люди появляются по одному, различие пиков читается по очереди */
.art-person { opacity: 0; transform: translateY(10px); transition: opacity 420ms ease, transform 420ms ease; }
.prob.is-in .art-person { opacity: 1; transform: none; }
.prob.is-in .art-person:nth-of-type(1) { transition-delay: 300ms; }
.prob.is-in .art-person:nth-of-type(2) { transition-delay: 420ms; }
.prob.is-in .art-person:nth-of-type(3) { transition-delay: 540ms; }
.prob.is-in .art-person:nth-of-type(4) { transition-delay: 660ms; }
.art-tip { opacity: 0; transform: translateY(10px); transition: opacity 480ms ease, transform 480ms ease; }
.prob.is-in .art-tip { opacity: 1; transform: none; transition-delay: 900ms; }

@media (prefers-reduced-motion: reduce) {
  .prob__num, .prob__trigger, .prob__title, .prob__body, .prob__turn,
  .art-slot, .art-call, .art-note, .art-day__row, .art-record__list > div,
  .art-person, .art-tip {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .art-decay__fill { width: var(--w); transition: none; }
}

/* ---------- Телефон: воздух вместо плотности ---------- */

@media (max-width: 760px) {
  .prob__inner {
    gap: 44px;
    padding: 84px 24px 88px;
  }

  .prob__trigger { font-size: clamp(3.4rem, 15vw, 5rem); margin-bottom: 10px; }
  .prob__title { font-size: clamp(1.75rem, 6.4vw, 2.3rem); }
  .prob__body { font-size: 1.05rem; }
  .prob__turn { font-size: 1rem; }

  .prob__inner--door { padding: 96px 24px 104px; }
}

/* ---------- Пять дней ----------
   Карточки-ситуации, а не отзывы. Поэтому ни кавычек, ни подписи, ни звёзд:
   всё, что делает блок похожим на testimonials, работает против него, пока
   клиентов нет.

   Карточка горизонтальная, низкая и почти во всю ширину: это листалка, по
   одной истории в поле зрения. Высокая карточка вываливает пять историй
   сразу, и читать перестают на второй. Следующая подглядывает из-за края,
   и это единственная подсказка, что блок листается. */

.cases {
  border-top: 1px solid var(--buzz-night-800);
  padding: 104px 0 112px;
}

.cases__head {
  max-width: 1360px;
  margin: 0 auto 34px;
  padding: 0 48px;
}

.cases__title {
  margin: 0;
  max-width: 20em;
  font-family: var(--buzz-font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--buzz-sand-50);
}

.cases__sub {
  margin: 6px 0 0;
  font-family: var(--buzz-font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--buzz-ink-200);
  opacity: 0.5;
}

.cases__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 22px;
}

.cases__note {
  margin: 0;
  max-width: 42em;
  font-family: var(--buzz-font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--buzz-ink-600);
}

.cases__nav {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.cases__count {
  margin-right: 4px;
  font-family: var(--buzz-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--buzz-ink-600);
  font-variant-numeric: tabular-nums;
}

.cases__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--buzz-night-700);
  border-radius: 50%;
  background: transparent;
  color: var(--buzz-ink-200);
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.cases__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cases__arrow:hover { border-color: var(--buzz-amber-500); color: var(--buzz-amber-400); }
.cases__arrow[disabled] { opacity: 0.28; cursor: default; }
.cases__arrow[disabled]:hover { border-color: var(--buzz-night-700); color: var(--buzz-ink-200); }

.cases__rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: max(48px, (100vw - 1360px) / 2);
  padding: 6px max(48px, (100vw - 1360px) / 2) 22px;
  scrollbar-width: none;
}

.cases__rail::-webkit-scrollbar { display: none; }
.cases__rail:focus-visible { outline: 2px solid var(--buzz-amber-500); outline-offset: 4px; }

.case {
  flex: 0 0 min(760px, 86vw);
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 216px 1fr;
  background: var(--buzz-night-900);
  border: 1px solid var(--buzz-night-800);
  border-radius: 20px;
  overflow: hidden;
}

/* Лицо не аватарка в кружке, а полоса во всю высоту карточки: кружок читается
   как автор отзыва, полоса как кадр из чьего-то дня. Правый край уводится в
   фон, чтобы фотография не стояла в тексте заплаткой. */
.case__photo {
  position: relative;
}

.case__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
}

.case__photo::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 34%;
  background: linear-gradient(to right, transparent, var(--buzz-night-900));
}

.case__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px 22px;
}

.case__who {
  margin: 0;
  font-family: var(--buzz-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--buzz-amber-500);
}

.case__who span {
  color: var(--buzz-ink-600);
  letter-spacing: 0.08em;
}

.case__head {
  margin: 2px 0 2px;
  font-family: var(--buzz-font-display);
  font-size: 1.26rem;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--buzz-sand-50);
}

.case__line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--buzz-ink-200);
}

/* Команда в тред выглядит командой: это заодно единственное место на главной,
   где видно, что пульт хоста это сообщение, а не экран (D19). */
.case__line b {
  font-family: var(--buzz-font-mono);
  font-size: 0.86em;
  font-weight: 500;
  color: var(--buzz-amber-300);
  background: oklch(64% 0.19 58 / 0.13);
  padding: 1px 6px;
  border-radius: 5px;
}

.case__line i {
  font-style: italic;
  color: var(--buzz-ink-100);
}

.case__punch {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--buzz-night-800);
  font-family: var(--buzz-font-display);
  font-size: 1.06rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--buzz-amber-300);
}

/* Появление: заголовок, затем карточки по одной слева направо. */
.cases .prob__num,
.cases__title,
.cases__sub,
.cases__foot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease-standard), transform 560ms var(--ease-standard);
}

.cases.is-in .prob__num,
.cases.is-in .cases__title,
.cases.is-in .cases__sub,
.cases.is-in .cases__foot {
  opacity: 1;
  transform: none;
}

.cases.is-in .prob__num { transition-delay: 0ms; }
.cases.is-in .cases__title { transition-delay: 80ms; }
.cases.is-in .cases__sub { transition-delay: 160ms; }
.cases.is-in .cases__foot { transition-delay: 240ms; }

.case {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms var(--ease-standard), transform 520ms var(--ease-standard);
}

.cases.is-in .case { opacity: 1; transform: none; }
.cases.is-in .case:nth-child(1) { transition-delay: 300ms; }
.cases.is-in .case:nth-child(2) { transition-delay: 390ms; }
.cases.is-in .case:nth-child(3) { transition-delay: 480ms; }
.cases.is-in .case:nth-child(4) { transition-delay: 570ms; }
.cases.is-in .case:nth-child(5) { transition-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
  .cases .prob__num,
  .cases__title,
  .cases__sub,
  .cases__foot,
  .case {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 900px) {
  .case { grid-template-columns: 172px 1fr; }
  .case__body { padding: 20px 20px 18px; }
}

@media (max-width: 760px) {
  .cases { padding: 84px 0 88px; }
  .cases__head { padding: 0 24px; margin-bottom: 26px; }
  .cases__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .cases__rail {
    gap: 14px;
    padding: 6px 24px 20px;
    scroll-padding-inline-start: 24px;
  }
  .case { flex-basis: 88vw; grid-template-columns: 112px 1fr; border-radius: 16px; }
  .case__photo::after { width: 46%; }
  .case__body { padding: 16px 16px 16px; gap: 7px; }
  .case__who { font-size: 11px; letter-spacing: 0.12em; }
  .case__head { font-size: 1.08rem; }
  .case__line { font-size: 0.9rem; line-height: 1.45; }
  .case__punch { font-size: 0.98rem; padding-top: 12px; }
}