/* barecruit.uz: the home clip (clip v5, 13 Nov 2026). Loaded by the three home pages only; sizes are set here because the CSP
   blocks style=. 16:9 above 640 px, 9:16 at or below (as the <source media> in the page and track.js's "phone" width). */
.demo-frame { position: relative; }
.demo-clip { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--rule); border-radius: 2px; background: var(--ink); object-fit: contain; }
.demo-unmute { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 22px; background: rgba(15, 23, 32, .84); color: #fff; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.demo-unmute:hover { background: rgba(15, 23, 32, .94); }
.demo-unmute:focus-visible { outline: 3px solid var(--firuza); outline-offset: 2px; }
.demo-unmute[hidden] { display: none; }
.demo-unmute svg { width: 20px; height: 20px; flex: none; }
.demo-text { margin: 12px 0 0; }
.demo-text summary { padding: 10px 0; min-height: 44px; box-sizing: border-box; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.demo-text ol { margin: 4px 0 0; padding: 0 0 0 22px; line-height: 1.5; }
.demo-text li + li { margin-top: 6px; }
@media (max-width: 640px) {
  .demo-clip { aspect-ratio: 9 / 16; max-height: 82vh; }
  .demo-unmute { position: static; width: 100%; justify-content: center; margin: 10px 0 0; min-height: 48px; border-radius: 3px; }
}