/* Task films supplement the original page layouts without changing their typography. */
.media-page .motion-stage { position:relative; isolation:isolate; overflow:hidden; background:#101a20; aspect-ratio:var(--motion-ratio,16/9); }
.media-page .motion-stage video { display:block; width:100%; height:100%; object-fit:contain; }
.media-page .motion-controls { position:absolute; z-index:2; right:12px; bottom:12px; display:flex; gap:8px; }
.media-page .motion-controls button { display:grid; place-items:center; width:44px; height:44px; border:1px solid #ffffff52; border-radius:50%; color:#fff; background:#15252ebd; }
.media-page .motion-controls button:hover { background:#15252e; }
.media-page .motion-controls svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.media-page .play-symbol { fill:currentColor; stroke:none; }
.media-page .pause-symbol { display:none; stroke-width:2.4; }
.media-page .is-playing .play-symbol { display:none; }
.media-page .is-playing .pause-symbol { display:block; }
.media-page .task-motion { margin-top:44px; }
.media-page .scenario-story > figure { min-width:0; margin:0; }
.media-page .scenario-story > figure > img { width:100%; height:auto; aspect-ratio:auto; object-fit:contain; }
.media-page .scenario-story .task-motion { margin-top:18px; }
.media-page .workstation-brief { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:7%; align-items:center; margin-top:64px; padding-top:56px; border-top:1px solid var(--line); }
.media-page .workstation-brief h3 { font-size:clamp(25px,2.3vw,36px); }
.media-page .workstation-brief p,.media-page .resource-motion p { color:var(--muted); margin:16px 0 26px; }
.media-page .workstation-brief > img { display:block; width:100%; height:auto; }
.media-page .resource-motion { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:6%; align-items:center; margin:56px 0; }
.media-page .resource-motion h3 { font-size:clamp(25px,2.3vw,36px); }
.media-page .motion-filters { display:flex; flex-wrap:wrap; gap:10px; margin:48px 0 30px; }
.media-page .motion-filters button { padding:10px 20px; border:1px solid var(--line); background:transparent; font-size:14px; }
.media-page .motion-filters button[aria-pressed=true] { color:#fff; background:var(--ink); border-color:var(--ink); }
.media-page .motion-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 26px; }
.media-page .motion-tile { min-width:0; }
.media-page .motion-tile .motion-stage { aspect-ratio:16/9; }
.media-page .motion-tile .motion-stage video { position:absolute; inset:0; object-fit:cover; }
.media-page .motion-tile[hidden] { display:none; }
.media-page .motion-tile h3 { font-size:20px; margin-top:16px; }
.media-page .motion-all { margin-top:32px; }
@media(max-width:1100px) {
 .media-page .motion-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767px) {
 .media-page .motion-stage.motion-panorama { aspect-ratio:16/9; }
 .media-page .resource-motion,.media-page .workstation-brief { grid-template-columns:1fr; gap:28px; }
 .media-page .workstation-brief { margin-top:44px; padding-top:36px; }
 .media-page .resource-motion { margin-block:40px; }
 .media-page .task-motion { margin-top:32px; }
 .media-page .motion-gallery { grid-template-columns:1fr; gap:30px; }
 .media-page .motion-filters { gap:8px; margin-top:36px; }
 .media-page .motion-filters button { padding:9px 13px; font-size:13px; }
 .media-page .motion-controls { right:8px; bottom:8px; gap:6px; }
 .media-page .motion-controls button { width:40px; height:40px; }
}

.media-page .demo-video-hero{min-height:580px;padding-block:56px 44px}
.demo-video-layout{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.7fr);align-items:center;gap:40px}
.demo-video-hero h1{font-size:clamp(34px,3vw,46px);margin-top:32px;line-height:1.25}
.demo-video-film{min-width:0;scroll-margin-top:140px}
.demo-video-film .motion-stage{aspect-ratio:16/9}
.demo-video-film video{object-fit:contain}
.demo-video-caption{margin-top:14px;color:#c7d7de;font-size:13px}
@media(max-width:800px){
 .media-page .demo-video-hero{min-height:0;padding-block:32px}
 .demo-video-layout{grid-template-columns:1fr;gap:32px}
 .demo-video-hero h1{font-size:38px;margin-top:28px}
 .demo-video-hero .page-actions{margin-top:24px}
 .demo-video-caption{font-size:12px}
}
@media(max-width:800px){
 .inner-page[data-nav-section=resources] .page-hero{display:block;min-height:0;padding-bottom:280px}
 .inner-page[data-nav-section=resources] .page-hero-content{padding-block:32px 36px}
 .inner-page[data-nav-section=resources] .page-hero h1{margin-top:32px}
 .inner-page[data-nav-section=resources] .page-hero-media{inset:auto 0 0;height:280px}
 .inner-page[data-nav-section=resources] .page-hero-media img{object-position:75% center}
 .inner-page[data-nav-section=resources] .page-hero-media::after{background:linear-gradient(180deg,#f2f5f5 0%,#f2f5f570 12%,#f2f5f500 30%)}
}

.media-page .scenario-video-hero{padding-block:44px;min-height:610px}
.scenario-video-layout{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.8fr);align-items:center;gap:38px}
.scenario-video-hero h1{font-size:clamp(34px,3vw,46px);margin-top:32px;line-height:1.25}
.scenario-video-hero .page-lead{font-size:16px}
.scenario-hero-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;min-width:0}
.scenario-hero-tile{min-width:0}
.scenario-hero-tile .motion-stage{aspect-ratio:552/310}
.scenario-hero-tile h2{font-size:15px;font-weight:500;line-height:1.5;margin-top:8px;color:#eef5f7;letter-spacing:0}
.scenario-hero-tile h2 span{font-size:12px;color:#a8bac3;margin-left:12px;white-space:nowrap}
.scenario-hero-tile .motion-controls{right:8px;bottom:8px}
.scenario-hero-tile .motion-controls button{width:34px;height:34px}
.scenario-hero-tile .motion-controls svg{width:18px;height:18px}
@media(max-width:800px){
 .media-page .scenario-video-hero{min-height:0;padding-block:28px 32px}
 .scenario-video-layout{grid-template-columns:1fr;gap:28px}
 .scenario-video-hero h1{font-size:34px;margin-top:24px}
 .scenario-video-hero .page-lead{font-size:15px;margin-top:18px}
 .scenario-video-hero .page-actions{margin-top:24px}
 .scenario-hero-wall{gap:16px 10px}
 .scenario-hero-tile h2{font-size:13px;margin-top:6px}
 .scenario-hero-tile h2 span{display:block;font-size:11px;margin-left:0}
 .scenario-hero-tile .motion-controls{right:5px;bottom:5px}
 .scenario-hero-tile .motion-controls button{width:28px;height:28px}
}