/* Native captured pixels, the existing frame, and one quiet control row. */
.cm-stage{position:relative;display:block;width:100%;min-width:0;aspect-ratio:var(--cm-desktop-ratio);overflow:hidden;background:transparent;border-radius:var(--cm-radius,0px);isolation:isolate}
.cm-stage>picture{display:block;width:100%;height:100%}
.cm-stage img{display:block;width:100%;height:100%!important;object-fit:contain!important}
.cycle .cm-stage img{position:static!important;opacity:1!important;transform:none!important}
.cm-stage video{position:absolute;left:var(--cm-left,0px);top:var(--cm-top,0px);width:var(--cm-width,100%);height:var(--cm-height,100%);border-radius:var(--cm-screen-radius,0px);object-fit:contain;background:transparent;opacity:0;pointer-events:none;transition:opacity .16s linear}
.cm-stage[data-cm-ready] video{opacity:1}
.cm-stage[data-cm-stage="keys"],.cm-stage[data-cm-stage="keys"] video{background:#080b0a}
.cm-owner .cm-controls{display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0!important;margin:4px 0 0!important;font:inherit;font-size:12px;line-height:1.35;color:inherit;box-shadow:none;background:none;border:0}
.cm-owner .cm-controls{opacity:1!important}
.cm-caption{opacity:1;min-width:0}
.cm-actions{display:inline-flex;align-items:center;gap:4px;flex:none}
.cm-controls .cm-play,.cm-controls .cm-inspect{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;padding:0 9px;border:1px solid color-mix(in srgb,currentColor 26%,transparent);border-radius:24px;background:none;color:inherit;font:inherit;font-size:12px;line-height:1;text-decoration:none;cursor:pointer;box-sizing:border-box}
.cm-controls .cm-inspect{font-size:22px;padding:0}
.cm-controls .cm-play[hidden]{display:none}
.cm-controls :is(button,a):hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.cm-controls :is(button,a):focus-visible{outline:2px solid #ed641c;outline-offset:3px}
.cm-standalone{min-width:0}
.cm-dialog{padding:0;border:1px solid #505753;background:#0b0e0d;color:#f5f2ec;border-radius:12px;width:min(94vw,1440px);max-width:94vw;max-height:94dvh;overflow:auto}
.cm-dialog::backdrop{background:rgb(5 8 7 / .9)}
.cm-dialog video{display:block;width:100%;max-height:calc(90dvh - 54px);object-fit:contain;background:#080b0a}
.cm-dialog-head{height:52px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.cm-dialog-close{min-width:44px;min-height:44px;color:inherit;background:none;border:0;font-size:24px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.cm-stage video{transition:none}}
@media(max-width:600px){.cm-mobile-600{aspect-ratio:var(--cm-phone-ratio)}}
@media(max-width:700px){.cm-mobile-700{aspect-ratio:var(--cm-phone-ratio)}}
@media(max-width:760px){.cm-mobile-760{aspect-ratio:var(--cm-phone-ratio)}}
@media(max-width:600px){
 .nine-services .ns-evidence.cm-owner>.cm-stage{width:224px;max-width:100%;margin-inline:auto}
 .nine-services .ns-evidence.cm-owner>.cm-stage>picture{width:100%;margin:0}
}
/* Pay for the controls with existing section breathing room, never smaller hit areas. */
body.nine-home #lx-lights .lx-scene:has(.cm-owner){padding-block:44px!important}
body.nine-services main :is(#wap-assistant-proof,#wap-reporting,#wap-lori-proof,#wap-mailroom-reply-desktop):has(.cm-owner){padding-block:calc(clamp(48px,5.2vw,76px) - 12px)!important}
body.nine-services main #software-examples:has(.cm-owner){padding-block:76px!important}
body.nine-services main .sv-proof:has(.cm-owner){padding-block:calc(clamp(48px,6.4vw,96px) - 18px)!important}
body.sys-n.dealer-editorial main>.de-products{padding-block:24px!important}
@media(max-width:760px){body.nine-home #lx-lights .lx-scene:has(.cm-owner){padding-block:26px!important}}
@media(max-width:600px){body.nine-services main #software-examples:has(.cm-owner){padding-block:41px!important}}

/* Keep the richer Meetings view inside the existing Lori page height. */
body.sys-n.np-page main>#lori{padding-block:39px!important}
@media(max-width:760px){body.sys-n.np-page main>:is(#lori,#install){padding-block:29px!important}}

/* Stable labels: playback state never changes caption width or page height. */
.cm-owner .cm-controls{flex-direction:row!important;flex-wrap:wrap;gap:8px!important}
.cm-owner .cm-caption{flex:1 1 96px;font:inherit!important;font-size:12px!important;line-height:1.35!important}
.cm-controls .cm-play{width:64px;min-width:64px;padding-inline:4px;flex:none}
/* A complete native phone canvas replaces the old shorter placeholder.
   Use existing section padding so the correction adds no page length. */
@media(max-width:600px){
 body.sys-n.nine-services main #wap-reporting:has(.cm-owner){padding-block:20px!important}
 body.sys-n.nine-services main .sv-proof:has(.pc-display .cm-stage){padding-block:14px!important}
 body.sys-n.np-guide main .co-example-flow:has(.cm-stage){padding-block:40px!important}
 body.sys-n.dealer-editorial main #reporting:has(.cm-stage){padding-block:14px!important}
 body.sys-n.page-rooftop main #reporting:has(.cm-stage){padding-block:26px!important}
}
/* The shared control row owns expansion; an overlay obscures the phone screen. */
.cm-owner .nh-steady-inspect{display:none!important}
@media(min-width:761px){
 body.nine-home #lx-lights .nh-mail-proof .cm-stage img{border-radius:3px}
}
/* Let the whole native recording establish height, including the surrounding bezel. */
body.nine-home #lx-lights .lx-rooftop .lx-slides:has(.cm-stage){aspect-ratio:auto!important}
body.nine-home #lx-lights .lx-rooftop .lx-slide:has(.cm-stage){height:auto!important}
.ni-screen-image:has(>.cm-stage){aspect-ratio:auto!important}
@media(max-width:760px){
 body.nine-home #lx-lights .lx-rooftop:has(.cm-owner){padding-block:15px!important}
 body.sys-n main #construction-proof:has(.cm-stage){padding-block:37px!important}
 body.sys-n main #ni-dealer-work:has(.cm-stage){padding-block:23px!important}
 body.sys-n main #dealer-delivery:has(.cm-stage){padding-block:9px!important}
 #dealer-delivery:has(.cm-stage) .ni-section-heading{margin-bottom:20px}
 #dealer-delivery:has(.cm-stage) .ni-tabs{margin-bottom:16px}
}
@media(min-width:761px){
 body.nine-home #lx-lights .lx-rooftop:has(.cm-owner){padding-block:42px!important}
 body.sys-n main #construction-proof:has(.cm-stage){padding-block:66px!important}
 body.sys-n main #ni-dealer-work:has(.cm-stage){padding-block:47px!important}
}

/* 13 Oct night. Phones get the phone recording wherever the product has one (cm-swap, set by
   cinematic_demos.py), never a desktop window shrunk to 3px text. The frame around it narrows to a
   phone's shape and borrows the size, bezel and corners of the phone frame already used beside it
   on the same page family. Desktop and tablet widths are untouched. */
@media(max-width:700px){
 .cm-owner:has(.cm-swap){--cm-swap-width:230px;--cm-swap-outer:22px;--cm-swap-inner:16px}
 .cm-stage.cm-swap,.cm-stage.cm-swap>picture,.cm-stage.cm-swap img{aspect-ratio:var(--cm-phone-ratio)!important}
 :is(.lx-device,.wap-device,.ow-frame,.sv-frame):has(.cm-swap),
 :is(figure.np-screen,figure.ni-screen):has(.cm-swap){width:var(--cm-swap-width)!important;max-width:100%!important;margin-inline:auto!important;box-sizing:border-box}
 .cm-owner:has(.cm-swap)>.cm-controls{width:var(--cm-swap-width);max-width:100%;margin-inline:auto!important;box-sizing:border-box}
 /* Bezelled frames: round the bezel and the screen inside it like a handset. */
 :is(.lx-device,.wap-device,.ow-frame,.sv-frame):has(.cm-swap){border-radius:var(--cm-swap-outer)!important}
 :is(.lx-device,.wap-device,.ow-frame,.sv-frame) :is(.cm-stage.cm-swap,.lx-panel-window:has(>.cm-swap)){border-radius:var(--cm-swap-inner)!important}
 /* Home: the Lori frame matches the Mailroom phone above it (238px screen, 22px corners). */
 .lx-lori-screen.cm-owner:has(.cm-swap){--cm-swap-width:250px;--cm-swap-outer:27px;--cm-swap-inner:22px}
 /* AI pages: same 224px screen as the other assistant examples. */
 .wap-feature-art.cm-owner:has(.cm-swap){--cm-swap-width:236px;--cm-swap-outer:20px;--cm-swap-inner:14px}
 /* Keys is a taller clip (390 by 1008); 210px matches Keys on the home page. */
 .cm-owner:has(.cm-swap[data-cm-stage="keys"]){--cm-swap-width:222px;--cm-swap-outer:18px;--cm-swap-inner:12px}
 /* Our work: the same handset frame as the app recordings lower on that page. */
 figure.ni-screen:has(.cm-swap)>a.ni-screen-image{border:4px solid #191d1e!important;border-radius:16px!important;background:#191d1e!important;box-sizing:border-box}
 /* The Lori page: the recorded tab keeps the phone-recording width; the four stills are the real
    interface in a narrow window, shown at full column width so its words are readable. */
 body.sys-n.np-page #lori .np-screen.np-responsive:not(.cm-owner){width:100%}
 /* The caption gets its own full line above the buttons, never a four-line sliver beside them. */
 .cm-owner .cm-controls{row-gap:2px!important;align-items:flex-start}
 .cm-owner .cm-caption{flex:1 0 100%!important}
 .cm-owner .cm-actions{margin-left:auto}
}
/* AI pages (existing 224px phone examples): keep the caption and buttons under the phone, not at the column edges. */
@media(max-width:600px){.nine-services .ns-evidence.cm-owner:has(>.cm-stage.cm-mobile-600)>.cm-controls{width:224px;max-width:100%;margin-inline:auto!important}}