/* The illustrated workflow replaces the hero still. Real screens stay in the tour. */
.product-film { --film-ink:#20272b; --film-muted:#5b625e; --film-line:#c2c8be; --film-accent:#165bd1; min-width:0; width:100%; max-width:800px; color:var(--film-ink); align-self:center; }
.product-film-heading { display:flex; justify-content:space-between; gap:18px; padding:0 0 13px; font-size:11px; line-height:1.4; color:var(--film-muted); }
.product-film-heading>span:last-child { white-space:nowrap; font-variant-numeric:tabular-nums; }
.product-film-frame { position:relative; overflow:hidden; background:#eeede7; border:1px solid var(--film-line); }
.product-film-frame video { display:block; width:100%; height:auto; aspect-ratio:16 / 10; object-fit:contain; }
.product-film-controls { display:flex; align-items:center; gap:13px; min-height:55px; }
.product-film-controls button { display:inline-flex; justify-content:center; align-items:center; min-height:44px; min-width:44px; border:0; padding:0; background:transparent; color:inherit; }
.product-film-toggle { gap:11px; font-size:12px; text-align:left; }
.product-film-toggle [data-film-icon] { display:grid; place-items:center; width:24px; font-size:12px; }
.product-film-toggle [data-film-label] { min-width:111px; }
.product-film-actions { display:flex; gap:2px; margin-left:auto; }
.product-film-actions button { font-size:23px; font-weight:400; line-height:1; }
.product-film-time { font-size:10px; color:var(--film-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.product-film-controls button:hover,.product-film-chapters button:hover { color:var(--film-accent); }
.product-film-chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.product-film-chapters button { position:relative; min-height:48px; display:flex; gap:8px; align-items:center; padding:9px 0 10px; border:0; border-top:1px solid var(--film-line); background:transparent; color:var(--film-muted); text-align:left; font-size:11px; line-height:1.25; }
.product-film-chapters button>span { font-size:9px; font-variant-numeric:tabular-nums; opacity:.8; }
.product-film-chapters button>i { position:absolute; top:-1px; left:0; height:2px; width:0; background:var(--film-accent); }
.product-film-chapters button[aria-current="step"] { color:var(--film-ink); }
.product-film-chapters button[aria-current="step"]>i { width:calc(var(--chapter-progress,0) * 100%); }
.product-film figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding-top:14px; font-size:10px; line-height:1.4; color:var(--film-muted); }
.product-film figcaption a { display:inline-flex; align-items:center; gap:13px; min-height:36px; }
.product-film figcaption a:hover { color:var(--film-accent); }
.product-film figcaption a>span { font-size:19px; }
.product-film-direct { white-space:nowrap; }
.product-film-error { padding:16px 0 0; font-size:12px; line-height:1.5; }
.product-film :focus-visible { outline:2px solid var(--film-accent); outline-offset:5px; }
.product-film [hidden] { display:none!important; }
.product-film-frame:fullscreen { display:grid; place-items:center; width:100vw; height:100dvh; background:#15191d; border:0; }
.product-film-frame:fullscreen video { max-height:100dvh; width:100%; object-fit:contain; }
.variant-archive .product-film { --film-ink:#f0f2eb; --film-muted:#b9cec0; --film-line:#54685b; --film-accent:#b1ceff; }
.variant-training .product-film { --film-ink:#f1f3e9; --film-muted:#c8d0be; --film-line:#637058; --film-accent:#d4f86b; }
.variant-review .product-film { --film-accent:#64529d; }
.variant-seats .product-film { --film-accent:#8d4034; }
.variant-commerce .product-film { --film-accent:#954529; }
.variant-integration .product-film,.variant-learning .product-film { --film-accent:#205e91; }
.variant-operations .product-film { --film-accent:#a84322; }
.variant-editorial .product-film { --film-accent:#165bd1; }
.has-product-film .story-hero-grid { gap:45px; }
@media(max-width:1100px) { .has-product-film .story-hero-grid { gap:30px; } .product-film-chapters { gap:10px; } .product-film-controls { gap:8px; } }
@media(max-width:860px) { .product-film { max-width:760px; } .has-product-film .story-hero-grid { gap:35px; } }
@media(max-width:560px) { .product-film-heading { font-size:10px; } .product-film-controls { gap:5px; } .product-film-toggle { gap:5px; font-size:11px; } .product-film-toggle [data-film-label] { min-width:101px; } .product-film-time { font-size:9px; } .product-film-chapters { gap:10px; } .product-film-chapters button { font-size:10px; gap:5px; } .product-film-chapters button>span { font-size:8px; } .product-film figcaption { font-size:9px; gap:12px; } }
@media(max-width:380px) { .product-film-time { display:none; } .product-film-direct { display:none!important; } }
@media(prefers-reduced-motion:reduce) { .product-film *, .product-film *::before, .product-film *::after { animation:none!important; transition:none!important; } }