/* H5: стрічка «Так це виглядає у стрічці» на /features. Лише #ttFeed —
   герой на головній (.hero-ph) цим файлом не торкається.
   Обідок і глибина — з shared/rim.css (.so-card--hero). */
.ttf-head .so-kicker{ margin-bottom:14px }
#ttFeed{ position:relative; perspective:1200px; padding-bottom:34px }
/* Тінь-еліпс під телефонами: градієнт, не filter. */
#ttFeed::after{
  content:""; position:absolute; left:50%; bottom:6px; width:min(720px,80%); height:30px;
  translate:-50% 0; pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);
}
#ttFeed .ttf-phone{
  width:min(288px,29vw); border-radius:36px; z-index:1;
  border:0; box-shadow:var(--so-depth-2);
}
/* Обідок над відео (картки мають z-index:2); рамка 1px по краю. */
#ttFeed .ttf-phone::before{ z-index:6 }
#ttFeed .ttf-phone:not(.side)::after{ display:none }
#ttFeed .ttf-phone.side{
  width:min(216px,22vw); opacity:.7; transform-origin:50% 50%;
}
/* Колода навмисна й дзеркальна: бічні телефони менші за центральний і
   сидять на ТІЙ САМІЙ осьовій лінії (без зсуву по Y) — різні верхи є
   наслідком різної висоти, а не розсинхрону (QA 2026-10-05, п.7). */
#ttFeed .ttf-phone.side:first-child{ transform:translateY(0) rotateY(14deg) }
#ttFeed .ttf-phone.side:last-child{ transform:translateY(0) rotateY(-14deg) }
/* Затемнення бічних — накладка, не filter. */
#ttFeed .ttf-phone.side::after{
  display:block; inset:0; height:auto; z-index:4; border-radius:inherit;
  background:rgba(0,0,0,.35);
}
#ttFeed .ttf-card img{ width:100%; height:100%; object-fit:cover; display:block }
@media (max-width:860px){
  #ttFeed{ perspective:none }
  #ttFeed .ttf-phone{ width:min(288px,74vw) }
}