/* Блок «что вы получите».

   Выделено из блока стилей внутри home.html: там сто восемьдесят
   строк лежали вперемешку, и ни переиспользовать, ни прочитать
   это было нельзя. Файлы подключаются в том же порядке, в каком
   правила шли в блоке, чтобы каскад не изменился. */

.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--gap-3)}
.benefits-block{padding-bottom:0}
.benefits-heading{margin-bottom:var(--gap-5)}
/* Правка клиента 03.09: три сцены занимали больше экрана, чем несли
   смысла - под каждой полторы строки текста. Высота убавлена примерно
   на треть, цифры вслед за ней: при прежних 104 пикселях в низкой сцене
   номер перевешивал заголовок, ради которого сцена и стоит. */
.benefits-cinema{display:grid;grid-template-columns:repeat(3,1fr);min-height:clamp(380px,34vw,520px)}
.benefit-scene{position:relative;display:flex;align-items:flex-end;overflow:hidden;padding:var(--gap-4);
  border-top:1px solid var(--line);border-right:1px solid var(--line);color:var(--cream)}
.benefit-scene:last-child{border-right:0}
.benefit-scene::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.08) 74%)}
/* Видео ведёт себя как кадр сцены: те же геометрия и дрейф ([data-drift]>video
   в drift.css), ленивая загрузка - общий наблюдатель [data-tile-video] в home.js.
   Первая и третья сцены - петли «камин» и «чай наливается» по просьбе клиента
   03.09 (Seedance 2.5 из кадров GPT Image 2, 07.09). */
.benefit-scene img,.benefit-scene .benefit-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.benefit-copy{position:relative;z-index:2;max-width:32ch}
.benefit-copy .number{display:block;margin-bottom:var(--gap-2);font:400 clamp(40px,4.6vw,72px)/.7 var(--disp);color:var(--gold)}
.benefit-copy h3{font-size:var(--step-2);color:var(--cream)}
.benefit-copy p{color:rgba(241,233,217,.78)}
@media(max-width:760px){
  .benefits-block{overflow:hidden;overflow:clip}
  .benefits-heading h2{font-size:clamp(46px,14vw,68px);line-height:.94}
  .benefits-cinema{display:flex;min-height:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gap-3) 18px;gap:12px}
  .benefits-cinema::-webkit-scrollbar{display:none}
  .benefit-scene{flex:0 0 84vw;min-height:min(56svh,440px);border:1px solid var(--line);scroll-snap-align:center;padding:24px 22px}
  .benefit-copy .number{font-size:60px}.benefit-copy h3{font-size:32px;line-height:1}.benefit-copy p{font-size:15px;max-width:26ch}
}