/* Defne case study: real recordings of Rafine's websites with the real Defne widget.
   Loaded only by /case-studies/defne/ (head extra_css in .site-build/defne.py). */

/* walkthrough: each panel is a 1440x900 recording in a 16:10 view, shown whole */
.tc-walk .tc-panel > .pg { transform: none; transition: none; }
.tc-walk .tc-view { background: #f2efe9; }
.tc-panel > video.tc-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.6s ease; }
.tc-panel > video.tc-vid.is-playing { opacity: 1; }
.tc-walk .tc-walk-note { margin-top: 0; padding-bottom: 10px; }

/* modes: the same moment on a laptop and on a phone */
.cx-pane > .dfl-duo { width: 100%; }
.dfl-duo .dv-phone { filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.18)); }

/* sales console: copy on the left, what the team gets on the right */
.dfl-console { align-items: start; }
.dfl-console .ta-list { margin: 54px 0 0; }

@media (max-width: 1024px) {
  .dfl-console .ta-list { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-panel > video.tc-vid { display: none; }
}