/* One consistent device treatment for every anonymised client conversation. */
.stories-carousel {
  overflow: hidden;
  margin: 0 calc((100vw - min(1180px, 100vw - 48px)) / -2);
  padding: 14px max(24px, calc((100vw - min(1180px, 100vw - 48px)) / 2)) 22px;
}

.story-track,
.story-set {
  display: flex;
  gap: 28px;
  width: max-content;
}

.story-track {
  align-items: flex-start;
  animation: story-marquee 68s linear infinite;
  will-change: transform;
}

.stories-carousel:hover .story-track,
.stories-carousel:focus-within .story-track {
  animation-play-state: paused;
}

.phone-story {
  flex: 0 0 246px;
  margin: 0;
  color: #0b2b51;
  text-align: left;
  transition: transform .26s ease;
}

.phone-story:hover,
.phone-story:focus-within {
  z-index: 2;
  transform: translateY(-8px);
}

.phone-device {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 8px;
  overflow: hidden;
  border: 2px solid #26313b;
  border-radius: 36px;
  background: linear-gradient(145deg, #4c5964 0%, #111b24 34%, #070c10 100%);
  box-shadow: 0 16px 31px rgba(7, 29, 58, .25), inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.phone-device::before {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  width: 92px;
  height: 19px;
  content: "";
  transform: translateX(-50%);
  border-radius: 0 0 13px 13px;
  background: #070b0f;
}

.phone-screen {
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border-radius: 27px;
  background: #fff;
  cursor: zoom-in;
}

.phone-screen:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}


.phone-story figcaption {
  box-sizing: border-box;
  min-height: 128px;
  padding: 15px 4px 0;
}

.phone-story figcaption span {
  display: block;
  margin-bottom: 5px;
  color: #687b90;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.phone-story figcaption strong {
  display: block;
  font: 600 22px/1.08 var(--serif);
  letter-spacing: -.025em;
}

.phone-story figcaption p {
  min-height: 57px;
  margin: 9px 0 0;
  color: #52677a;
  font-size: 13px;
  line-height: 1.45;
}

@keyframes story-marquee {
  to { transform: translateX(calc(-50% - 14px)); }
}

@media (prefers-reduced-motion: reduce) {
  .story-track { animation: none; }
}

@media (max-width: 800px) {
  .stories-carousel {
    margin: 0 -24px;
    padding: 10px 24px 20px;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
  }

  .story-track { animation: none; }
  .story-set-copy { display: none; }
  .phone-story { flex-basis: min(75vw, 270px); scroll-snap-align: start; }
  .phone-story figcaption { min-height: 120px; }
}