/* Desktop footage stays visually distinct from the free browser tool above. */
.desktop-demo { padding: 24px 0 64px; border-bottom: 1px solid var(--line); }
.desktop-demo-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
.desktop-demo-heading h2 { margin: 0 0 12px; font-family: Georgia, serif; font-weight: 400; }
.desktop-demo-heading p { margin: 0; color: var(--muted); max-width: 620px; }
.desktop-demo-heading > a { flex-shrink: 0; }
.demo-player { margin: 0; }
.demo-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #111411; border: 1px solid var(--line); border-radius: 8px; }
.demo-player video:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.demo-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; font-size: 13px; color: var(--muted); }
.demo-caption button { min-width: 130px; min-height: 44px; flex-shrink: 0; }
.demo-status { display: block; color: var(--ink); }
.demo-status:empty { display: none; }
.demo-description { color: var(--muted); font-size: 13px; }
.demo-description summary { cursor: pointer; display: list-item; padding: 8px 0; width: fit-content; min-height: 44px; }
.demo-description p { max-width: 760px; line-height: 1.65; margin-bottom: 12px; }
@media (max-width: 600px) {
  .desktop-demo { padding: 16px 0 40px; }
  .desktop-demo-heading { align-items: start; flex-direction: column; gap: 16px; }
  .desktop-demo-heading h2 { font-size: 30px; }
  .demo-caption { align-items: start; gap: 12px; }
  .demo-caption > span { max-width: 210px; }
}