/* Shared front-facing laptop display. No outside card or player. */
.macbook-frame{position:relative;width:100%;max-width:800px;margin:0 auto 16px;padding:8px 8px 11px;border:1px solid #687077;border-radius:19px;background:linear-gradient(120deg,#545a60,#1c1e21 15%,#090a0c 70%,#636970);box-shadow:0 18px 35px #0004;box-sizing:border-box}
.macbook-frame:before{content:'';position:absolute;width:64px;height:15px;left:50%;top:7px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#090a0c;z-index:12}
.macbook-frame:after{content:'';position:absolute;left:calc(50% - 2px);top:11px;width:4px;height:4px;border-radius:50%;background:#233039;box-shadow:0 0 0 1px #141a1e;z-index:13}
.native-demo .macbook-screen{position:relative;aspect-ratio:16/10;min-height:0!important;height:auto!important;width:100%;border-radius:11px;overflow:hidden!important;container-type:inline-size;background:radial-gradient(ellipse at 70% 85%,#53718b,#20354b 58%,#172231)!important;color:#f5f4f0}
.family-menubar{position:absolute;top:0;left:0;right:0;height:30px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:#e5eaf0f2;color:#17212d;z-index:8;font:11px/1 Barlow,Arial,sans-serif;gap:10px;box-sizing:border-box}
.mac-active,.mac-status-area,.family-icons,.inline-apps,.mac-system{display:flex;align-items:center;gap:10px;flex-shrink:0}.mac-active>span:first-child{font-size:10px}.mac-active strong{font-weight:600}.mac-status-area{margin-left:auto;gap:10px}.family-icons,.inline-apps{gap:10px}.family-status{display:inline-flex;width:18px;height:22px;align-items:center;justify-content:center;flex-shrink:0}.family-menubar img,.detail-menu img,.detail-shelf img,.second-shelf .family-status img{width:18px;height:18px;filter:none;border-radius:0;object-fit:contain}.mac-system{gap:10px}.mac-system svg{width:15px;height:16px;stroke:currentColor;stroke-width:2;fill:none}.mac-system time{font-size:10px;white-space:nowrap}.mac-battery{display:inline-block;width:18px;height:8px;border:1px solid currentColor;border-radius:2px;position:relative}.mac-battery:before{content:'';position:absolute;inset:1px;background:currentColor;border-radius:1px}.mac-battery:after{content:'';position:absolute;right:-3px;top:2px;width:1px;height:3px;background:currentColor}.native-demo .family-menubar button{width:24px;height:28px;min-height:28px;min-width:24px;border:0;border-radius:4px;padding:3px;background:transparent;color:#17212d;display:inline-flex;align-items:center;justify-content:center;opacity:1}.native-demo .family-menubar button:hover{background:#0001}.native-demo .family-menubar button:focus-visible{outline:2px solid #825000!important;outline-offset:1px!important}.native-demo{max-width:840px;margin-left:auto;margin-right:auto}.native-demo .demo-topbar{padding-left:9px;padding-right:9px}.native-demo figcaption{padding-left:9px!important;padding-right:9px!important;min-height:0!important;height:auto!important;margin-top:10px}.native-demo .motion-toggle{display:none!important}
/* KlikBar: one screen and a readable mobile detail of the same state. */
.bar-demo .inline-apps{max-width:0;opacity:0;overflow:hidden;transition:max-width .35s ease,opacity .25s ease}.bar-demo.full-view .inline-apps,.bar-demo.inline-view .inline-apps{max-width:170px;opacity:1}.bar-demo .second-shelf{top:40px;right:18px;gap:14px;padding:10px 16px;background:#eef2f5;color:#17212d;border:1px solid #b9c5ce;box-shadow:0 7px 18px #0003;border-radius:9px}.bar-demo .second-shelf .family-status{width:22px;height:24px}.bar-demo .second-shelf img{width:22px;height:22px}.workspace-card{position:absolute;top:23%;left:12%;right:24%;padding:6%;background:#f4f2ed;color:#1c2b39;border-radius:7px;box-shadow:0 12px 25px #0002}.workspace-card>span{font:1.45cqw 'IBM Plex Mono',monospace;color:#4c5b68}.workspace-card h3{font:600 5.5cqw/1.1 'Barlow Condensed',sans-serif;margin:6% 0}.workspace-card p{font-size:2cqw;color:#465767}.workspace-lines{margin-top:8%;display:grid;gap:10px}.workspace-lines i{height:3px;border-radius:3px;background:#d4dade}.workspace-lines i:last-child{width:60%}.bar-demo .bar-state{left:8%;right:8%;bottom:5%;text-align:center;gap:6px}.bar-demo .bar-state strong{font-size:clamp(14px,2.5cqw,22px)}.bar-demo .bar-state>span:last-child{font:clamp(10px,1.6cqw,13px)/1.4 Barlow,sans-serif;color:#e5edf4}.bar-detail{display:none}.bar-view-picker{justify-content:center;max-width:840px;margin:18px auto 0}.bar-view-picker button{font-size:14px;min-height:44px}.bar-demo-section .section-heading{max-width:1000px;margin-left:auto;margin-right:auto}.bar-demo-section .demo-kind{max-width:840px;margin:0 auto 18px}.bar-demo .bar-caption{font-size:14px!important;text-align:center}
/* Keep the action inside the display; the family menu stays at the top. */
.native-demo .macbook-screen.demo-desktop .demo-window{top:14%;bottom:12%;left:7%;right:7%}.native-demo .macbook-screen .eye-mac-menu,.native-demo .macbook-screen .eye-macbar,.native-demo .macbook-screen .eye-menu-bar{display:none}.native-demo .macbook-screen .demo-window{z-index:1}.native-demo .macbook-screen.rec-stage .rec-panel{top:14%}.native-demo .macbook-screen.clean-stage .clean-setup,.native-demo .macbook-screen.clean-stage .clean-prep,.native-demo .macbook-screen.clean-stage .clean-locked,.native-demo .macbook-screen.clean-stage .clean-done{top:30px}.native-demo .macbook-screen.mirror-stage .mirror-camera{width:34%;top:22%}.native-demo .macbook-screen .tutorial-document{top:16%;height:49%}.native-demo .macbook-screen .keyboard-overlay{bottom:6%}.recording-grid{gap:32px}.native-demo .macbook-screen .rec-stage{min-height:0}
@media(max-width:800px){.macbook-frame{padding:5px 5px 8px;border-radius:12px;margin-bottom:12px}.macbook-frame:before{top:5px;width:35px;height:9px;border-radius:0 0 5px 5px}.macbook-frame:after{top:7px;left:calc(50% - 1px);width:2px;height:2px}.native-demo .macbook-screen{border-radius:7px}.family-menubar{height:22px;padding:0 7px;gap:6px;font-size:8px}.mac-active{gap:4px}.mac-menu-text{display:none}.family-icons,.family-menubar .inline-apps{gap:5px}.mac-status-area{gap:5px}.family-status{width:12px;height:18px}.family-menubar img{width:12px;height:12px}.native-demo .family-menubar button{width:17px;height:21px;min-width:17px;min-height:21px;padding:2px}.mac-system{gap:5px}.mac-system svg{width:11px;height:12px}.mac-system time{font-size:8px}.mac-battery{width:12px;height:6px}.mac-active>span:first-child{display:none}.bar-demo .family-menubar .family-status{width:11px}.bar-demo .family-menubar img{width:11px;height:11px}.bar-demo .family-menubar .inline-apps{gap:4px}.bar-demo .second-shelf{top:30px;right:8px;padding:7px 10px;gap:8px}.bar-demo .second-shelf .family-status{width:16px;height:18px}.bar-demo .second-shelf img{width:16px;height:16px}.bar-demo .workspace-card{top:23%;left:9%;right:23%;padding:5%}.workspace-lines{gap:5px}.workspace-lines i{height:2px}.bar-demo .bar-state strong{font-size:13px}.bar-demo .bar-state>span:last-child{font-size:10px}.bar-detail{display:block;padding:12px 5px 0;min-height:109px}.bar-detail>span{display:block;color:#c3ced6;font:12px Barlow,sans-serif;margin-bottom:9px}.detail-menu{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:9px 12px;background:#e5eaf0;color:#17212d;border-radius:7px}.detail-family,.detail-shelf{display:flex;gap:10px;align-items:center}.detail-family{overflow:hidden;max-width:0;opacity:0;transition:max-width .35s,opacity .25s}.full-view .detail-family,.inline-view .detail-family{max-width:180px;opacity:1}.detail-family .family-status,.detail-shelf .family-status{width:18px;height:22px}.detail-menu .mac-system svg{width:14px;height:14px}.detail-menu .mac-system time{font-size:10px}.detail-menu .mac-battery{width:16px;height:8px}.detail-shelf{visibility:hidden;justify-content:flex-end;min-height:30px;margin-top:6px;padding-right:16px}.shelf-view .detail-shelf{visibility:visible}.detail-shelf .family-status{background:#e5eaf0;border-radius:4px;padding:4px;box-sizing:content-box}.bar-view-picker{gap:8px;margin-top:8px}.bar-view-picker button{font-size:12px;padding:11px 14px}.native-demo .macbook-screen.clean-stage .clean-setup,.native-demo .macbook-screen.clean-stage .clean-prep,.native-demo .macbook-screen.clean-stage .clean-locked,.native-demo .macbook-screen.clean-stage .clean-done{top:22px}.native-demo .macbook-screen.clean-stage .clean-setup{gap:6px}.native-demo .macbook-screen.clean-stage .clean-setup img{width:30px;height:30px}.native-demo .macbook-screen.clean-stage .clean-setup strong{font-size:22px}.native-demo .macbook-screen.clean-stage .clean-setup>span{font-size:11px}.native-demo .macbook-screen.clean-stage .clean-start{font-size:12px;padding:6px 15px;margin-top:0}.native-demo .macbook-screen.clean-stage .clean-done strong{font-size:24px}.native-demo .macbook-screen.clean-stage .clean-done p{font-size:12px}.native-demo .macbook-screen.clean-stage .clean-prep strong{font-size:50px}.native-demo .macbook-screen.clean-stage .clean-prep>span,.native-demo .macbook-screen.clean-stage .clean-prep small{font-size:10px}.native-demo .macbook-screen .record-saved{font-size:11px}.native-demo .macbook-screen .rec-panel{font-size:11px}.native-demo .macbook-screen .rec-panel strong{font-size:14px}.native-demo .macbook-screen.rec-stage .rec-panel{top:17%;padding:10px}.native-demo .macbook-screen .rec-field{padding:5px 0}.native-demo .macbook-screen .rec-panel .rec-label{font-size:9px}.native-demo .macbook-screen .rec-panel .rec-button{padding:5px;font-size:11px}.native-demo .macbook-screen .rec-panel .rec-checks{font-size:9px;gap:4px}.native-demo .macbook-screen .record-saved{padding:10px}.native-demo .macbook-screen .record-saved strong{font-size:17px}.native-demo .macbook-screen .record-saved small{font-size:10px}.native-demo .macbook-screen .rec-caption{font-size:12px}}
@media(prefers-reduced-motion:reduce){.bar-demo .inline-apps,.detail-family,.bar-demo .second-shelf{transition:none}}
.native-demo .macbook-screen .eye-menubar{display:none}.native-demo .family-menubar .mirror-switch[aria-pressed=false]{opacity:.4}.bar-demo .bar-state{z-index:2}.bar-demo .workspace-card{bottom:19%;padding:5%;}.bar-demo .workspace-card h3{margin:5% 0}.bar-demo .workspace-lines{margin-top:6%}.native-demo .macbook-screen .eye-state-panel{top:22%;bottom:10%}
@media(max-width:800px){.bar-demo .bar-state{bottom:4%;gap:3px}.bar-demo .bar-state strong{font-size:11px}.bar-demo .bar-state>span:last-child{font-size:8px}.bar-demo .workspace-card{bottom:22%}.native-demo .macbook-screen .eye-state-panel{padding:0 6%}.native-demo .macbook-screen .eye-state-message{font-size:clamp(18px,5cqw,26px)}.native-demo .macbook-screen .eye-state-detail{font-size:11px}.native-demo .macbook-screen .eye-state-name{font-size:10px}.native-demo .macbook-screen .eye-state-panel>img{width:38px;height:38px}}
/* Small displays use a bezel camera so menu items never sit under a notch. */
.native-demo:not(.bar-demo) .macbook-frame:before{display:none}.native-demo:not(.bar-demo) .macbook-frame:after{top:2px}
@media(max-width:800px){.macbook-frame:before{display:none}.macbook-frame:after{top:1px}.native-demo .family-menubar button{min-width:24px;min-height:24px;width:24px;height:24px}.family-menubar{height:26px}.mac-status-area{gap:4px}.family-icons{gap:4px}.family-menubar .mac-active{font-size:7px}.family-menubar .mac-system{gap:4px}.family-menubar .mac-battery{width:10px}.bar-demo .family-menubar .bar-switch{min-width:24px;min-height:24px}.bar-demo .family-menubar .mac-system{gap:4px}.native-demo .macbook-screen.clean-stage .clean-setup,.native-demo .macbook-screen.clean-stage .clean-prep,.native-demo .macbook-screen.clean-stage .clean-locked,.native-demo .macbook-screen.clean-stage .clean-done{top:26px}}
.native-demo{width:100%;box-sizing:border-box}.native-demo .macbook-screen{aspect-ratio:16/10!important}.native-demo .macbook-screen.mirror-stage .mirror-camera{width:34%;height:auto;aspect-ratio:1;top:24%;right:8%}.native-demo .macbook-screen.mirror-stage .meeting-card{left:7%;right:auto;top:31%;width:40%;padding:4%}.native-demo .macbook-screen .keyboard-overlay{height:auto;bottom:7%;align-items:flex-end}.native-demo .macbook-screen .key{padding:.35cqw 0;font-size:1.1cqw;min-height:0}.native-demo .macbook-screen .keyboard-row{margin-bottom:.5cqw}.native-demo .macbook-screen .keyboard-illustration{padding:2%}
@media(max-width:800px){.native-demo .macbook-screen.clean-stage .clean-locked{gap:3px}.native-demo .macbook-screen.clean-stage .clean-locked>strong::after{font-size:43px}.native-demo .macbook-screen.clean-stage .clean-locked>span{font-size:10px}.native-demo .macbook-screen.clean-stage .clean-locked>span:first-child{font-size:9px}.native-demo .macbook-screen .command-exit{margin-top:5px}.native-demo .macbook-screen .command-exit>span{font-size:15px;padding:2px 8px}.native-demo .macbook-screen .command-exit p{font-size:9px;margin:5px 0}.native-demo .macbook-screen .trigger-setup,.native-demo .macbook-screen .trigger-running,.native-demo .macbook-screen .trigger-ended{inset:22% 8% 18%;padding:5%}.native-demo .macbook-screen .trigger-running h3,.native-demo .macbook-screen .trigger-ended h3{font-size:21px;margin:5% 0 0}.native-demo .macbook-screen .trigger-running p,.native-demo .macbook-screen .trigger-ended p{font-size:11px}.native-demo .macbook-screen .trigger-setup strong{font-size:16px}.native-demo .macbook-screen .trigger-setup>span,.native-demo .macbook-screen .trigger-setup>div{font-size:11px}.native-demo .macbook-screen .awake-toast{font-size:10px;bottom:4%;padding:5px;width:90%;line-height:1.3}.native-demo .macbook-screen .trigger-status span{font-size:10px}.native-demo .macbook-screen .trigger-running>span{font-size:11px}.native-demo .macbook-screen .presentation-slide{inset:19% 7% 20%;padding:5%}.native-demo .macbook-screen .presentation-slide strong{font-size:6cqw}.native-demo .macbook-screen .presentation-slide small{font-size:2cqw}.native-demo .macbook-screen .sleep-shade{inset:26px 0 0}.native-demo .macbook-screen.mirror-stage .meeting-card h3{font-size:5cqw}.native-demo .macbook-screen.mirror-stage .camera-status{font-size:10px;bottom:5%}.native-demo .macbook-screen .keyboard-overlay{left:7%;right:7%;bottom:7%}.native-demo .macbook-screen .key{font-size:1.15cqw;padding:.4cqw 0}.native-demo .macbook-screen .tutorial-document{top:18%;height:43%;padding:4%}.native-demo .macbook-screen .tutorial-document .document-title{font-size:5cqw}.native-demo .macbook-screen .copy-source,.native-demo .macbook-screen .paste-result{font-size:2.7cqw}.native-demo .macbook-screen .tutorial-document small{font-size:1.7cqw}.native-demo .macbook-screen .example-save{font-size:2cqw}.native-demo .macbook-screen.demo-desktop .demo-window{top:17%;bottom:13%}.native-demo .macbook-screen.demo-desktop .annotation-tools{top:19%;left:10%;right:10%;height:12%;padding:0 3%}.native-demo .macbook-screen.demo-desktop .copy-toast{font-size:10px;bottom:4%;padding:5px}.native-demo .macbook-screen.demo-desktop .review-note{font-size:10px;padding:4px}.native-demo .macbook-screen.demo-desktop .capture-size{font-size:9px}}
.home-shot-preview{width:100%;max-width:540px}.home-shot-preview .macbook-screen{position:relative;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:radial-gradient(ellipse at 60% 80%,#53718b,#20354b);container-type:inline-size}.home-shot-preview .macbook-frame:before{display:none}.home-shot-preview .macbook-frame:after{top:2px}.home-shot-preview .preview-bar{position:absolute;top:17%;left:8%;right:8%;height:24px;padding:0 12px;font-size:10px}.home-shot-preview .preview-canvas{position:absolute;top:calc(17% + 24px);bottom:12%;left:8%;right:8%;padding:0;background:#f5f4ef}.home-shot-preview .preview-canvas img{width:80%}.home-shot-preview .preview-canvas>span{font-size:10px;padding:5px 9px}.home-shot-preview .family-menubar{font-size:9px}.home-shot-preview .mac-menu-text{display:none}.home-shot-preview .family-menubar img{width:13px;height:13px}.home-shot-preview .family-status{width:13px}.home-shot-preview .family-icons{gap:6px}.home-shot-preview .mac-status-area{gap:6px}
@media(max-width:800px){.home-shot-preview .preview-bar{font-size:8px;height:18px;top:18%}.home-shot-preview .preview-canvas{top:calc(18% + 18px)}.home-shot-preview .family-menubar img{width:11px;height:11px}.home-shot-preview .family-status{width:11px}.home-shot-preview .family-icons{gap:4px}.home-shot-preview .mac-status-area{gap:4px}.home-shot-preview .preview-canvas>span{font-size:8px}}
/* One product catalogue; short demonstrations communicate one action at a time. */
.home-baseline{margin-top:20px}.portfolio-grid{margin-top:34px}
.native-demo:not(.mini-demo) .capture-region{z-index:3;animation:area-selection 8s linear infinite;left:12%;top:25%;width:76%;height:44%;transform:none;clip-path:none}
.native-demo:not(.mini-demo) .annotation-tools{z-index:5;animation:area-tools 8s infinite;top:17%;left:22%;right:auto;height:9%;max-width:none}
.native-demo:not(.mini-demo) .demo-cursor{z-index:7;animation:area-pointer 8s linear infinite}
.native-demo:not(.mini-demo) .review-arrow path,.native-demo:not(.mini-demo) .review-note,.native-demo:not(.mini-demo) .copy-toast,.native-demo:not(.mini-demo) .step{animation-duration:8s}
.native-demo:not(.mini-demo) .demo-window{z-index:1}
@keyframes area-selection{0%,7%{opacity:0;width:0;height:0}8%{opacity:1;width:0;height:0}28%,88%{opacity:1;width:76%;height:44%}97%,100%{opacity:0;width:76%;height:44%}}
@keyframes area-tools{0%,29%{opacity:0;transform:translateY(5px)}34%,88%{opacity:1;transform:translateY(0)}97%,100%{opacity:0;transform:translateY(0)}}
@keyframes area-pointer{0%,6%{left:12%;top:25%;opacity:0}8%{left:12%;top:25%;opacity:1}28%{left:88%;top:69%;opacity:1}35%{left:38%;top:21%;opacity:1}45%{left:71%;top:51%;opacity:1}65%{left:76%;top:70%;opacity:1}83%{left:50%;top:84%;opacity:1}90%,100%{left:50%;top:84%;opacity:0}}
.static-demo .capture-region{width:76%!important;height:44%!important;opacity:1!important;animation:none!important}.static-demo .annotation-tools{opacity:1!important;transform:none!important;animation:none!important}.static-demo .demo-cursor{opacity:0!important}
@media(max-width:800px){.native-demo:not(.mini-demo) .annotation-tools{left:10%;right:10%;top:17%;height:12%;gap:8px}.native-demo:not(.mini-demo) .annotation-tools .tool-copy{display:none}}
/* Each Keys style remains visible throughout its automatic selection. */
.keys-demo:not(.bubble-style) .keyboard-overlay{opacity:1;animation:none}
.bubble-style .balloon-overlay>span{animation:example-copy 5.2s steps(1,end) infinite}
.bubble-style .balloon-overlay .balloon-paste{animation-name:example-paste}
@keyframes example-copy{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes example-paste{0%,49%{opacity:0}50%,100%{opacity:1}}
.static-demo.bubble-style .balloon-overlay>span{opacity:1;animation:none!important}.static-demo.bubble-style .balloon-overlay .balloon-paste{opacity:0}
/* Annotation must sit above the captured window, not behind it. */
.native-demo .macbook-screen.demo-desktop .review-arrow{inset:0;width:100%;height:100%;z-index:4}
.native-demo .macbook-screen.demo-desktop .review-note{z-index:4}
.native-demo:not(.mini-demo) .review-arrow path{stroke:#e99000;stroke-width:5;stroke-dasharray:190;animation:draw-selected-arrow 8s linear infinite}
.native-demo:not(.mini-demo) .review-arrow .arrow-head{stroke-dasharray:90;animation-name:draw-selected-head}
.native-demo .annotation-tools .selected{border-radius:4px;padding:2px 4px;animation:choose-arrow-tool 8s infinite}
@keyframes draw-selected-arrow{0%,41%{opacity:0;stroke-dashoffset:190}42%{opacity:1;stroke-dashoffset:190}57%,94%{opacity:1;stroke-dashoffset:0}99%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes draw-selected-head{0%,54%{opacity:0;stroke-dashoffset:90}58%,94%{opacity:1;stroke-dashoffset:0}99%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes choose-arrow-tool{0%,33%{background:transparent}36%,48%{background:#ff9f0a44;box-shadow:0 0 0 1px #ff9f0a}54%,100%{background:transparent;box-shadow:none}}
.static-demo .review-arrow path{opacity:1!important;stroke-dashoffset:0!important;animation:none!important}
@keyframes area-pointer{0%,6%{left:12%;top:25%;opacity:0}8%{left:12%;top:25%;opacity:1}28%{left:88%;top:69%;opacity:1}35%,38%{left:28%;top:21%;opacity:1}42%{left:84%;top:65.6%;opacity:1}57%{left:74.8%;top:44%;opacity:1}65%{left:76%;top:70%;opacity:1}83%{left:50%;top:84%;opacity:1}90%,100%{left:50%;top:84%;opacity:0}}
/* KlikClean status follows the same timeline as the simulated cleaning lock. */
.clean-demo .family-menubar .family-status[title="KlikClean"] img{opacity:.35;animation:clean-status-active 18s infinite}
@keyframes clean-status-active{0%,32%{opacity:.35}34%,76%{opacity:1}79%,100%{opacity:.35}}
.static-demo.clean-demo .family-menubar .family-status[title="KlikClean"] img{opacity:1;animation:none!important}
/* KlikKeys: one continuous keyboard and mouse demonstration. */
.keys-sequence .keyboard-overlay{display:flex!important;opacity:1!important;animation:none!important;left:7%!important;right:7%!important;bottom:9%!important;gap:3%;height:auto!important;align-items:center}
.keys-sequence .keyboard-illustration{flex:1;min-width:0}
.keys-sequence .key{animation:none!important;background:transparent;color:#d5cbbf}
.keys-sequence .key.is-pressed{background:#ffb52a!important;color:#17110b!important;box-shadow:0 0 8px #ffb52a44}
.keys-sequence .mouse-illustration{flex:0 0 11%;width:11%;height:auto;aspect-ratio:62/94;max-width:70px;min-width:25px;border:1.5px solid #b4a99c;border-radius:40% 40% 43% 43%;overflow:hidden;background:#171614;position:relative;box-sizing:border-box}
.keys-sequence .mouse-illustration:after{display:none}.keys-sequence .mouse-button{position:absolute;top:0;height:48%;width:50%;background:transparent;border-bottom:1px solid #8d8177;box-sizing:border-box}.keys-sequence .mouse-left{left:0;border-right:1px solid #8d8177}.keys-sequence .mouse-right{right:0}.keys-sequence .mouse-wheel{position:absolute;top:16%;left:calc(50% - 2px);width:4px;height:16%;border-radius:4px;background:#b4a99c;box-shadow:0 0 0 2px #171614}.keys-sequence .left-pressed .mouse-left,.keys-sequence .right-pressed .mouse-right{background:#ffb52a;box-shadow:inset 0 0 10px #ffdb79}
.keys-sequence .copy-source,.keys-sequence .paste-result,.keys-sequence .flow-caption{animation:none!important;opacity:1!important}.keys-sequence .copy-source{background:transparent!important;color:#272421}.keys-sequence.text-selected .copy-source{background:#b3cde1!important}.keys-sequence .sequence-caption{bottom:3%;font-size:1.7cqw;white-space:normal;text-align:center;width:90%}.keys-sequence .keys-click-ring,.keys-sequence .keys-pointer{display:none}.keys-sequence .tutorial-document{height:42%!important}.keys-sequence .mouse-illustration,.keys-sequence .keyboard-illustration{z-index:2}
@media(max-width:800px){.keys-sequence .keyboard-overlay{left:4%!important;right:4%!important;bottom:12%!important;gap:3%}.keys-sequence .mouse-illustration{flex-basis:11%;min-width:25px}.keys-sequence .sequence-caption{font-size:2.7cqw;bottom:3%}.keys-sequence .tutorial-document{height:40%!important}}
.keys-sequence .tutorial-document{padding:3%!important}.keys-sequence .copy-source{margin:.8cqw 0;font-size:2cqw}.keys-sequence .document-divider{margin:1cqw 0}.keys-sequence .tutorial-document small{font-size:1.1cqw}.keys-sequence .paste-result{margin:.5cqw 0;font-size:2cqw}.keys-sequence .example-save{bottom:8%;font-size:1.6cqw}
@media(max-width:800px){.keys-sequence .tutorial-document .document-title{font-size:4cqw}.keys-sequence .copy-source,.keys-sequence .paste-result{font-size:2.6cqw}.keys-sequence .tutorial-document small{font-size:1.7cqw}.keys-sequence .example-save{font-size:2cqw}}
/* Final composition pass: shared thin bezel, compact pacing, readable control layouts. */
.macbook-frame{padding:6px 6px 7px;border:1px solid #52565b;border-radius:15px;background:#202326;box-shadow:0 12px 28px #0003;margin-bottom:10px}
.macbook-frame:before{top:5px}.macbook-frame:after{top:8px}.native-demo .macbook-screen{border-radius:9px}.native-demo:not(.bar-demo) .macbook-frame:after,.home-shot-preview .macbook-frame:after{top:1px}
.hero-grid{padding-bottom:26px}.demo-section,.awake-demos,.clean-demo-section,.keys-demo-section,.mirror-demo-section,.bar-demo-section{padding:40px 0}.recording-demos{padding-top:40px;padding-bottom:20px}.section-heading{margin-bottom:20px}.native-demo .demo-topbar{padding-bottom:8px}.native-demo figcaption{margin-top:7px;line-height:1.45!important}.benefits,.faq{padding-top:45px;padding-bottom:45px}.use-section{padding:45px 0}.related-products{padding-top:28px;padding-bottom:35px}.availability{padding:40px 0}.availability h2{margin:18px 0 22px}.awake-demo-row{padding:24px 0}.awake-demos>.wrap{gap:22px 28px}.awake-explanation h3{font-size:32px;margin:12px 0}.awake-explanation p{margin-bottom:10px}.eye-intro{margin-bottom:0}.eye-intro p{margin-bottom:12px}.exit-instruction{max-width:840px;margin:14px auto;font-size:16px;line-height:1.7}.clean-mode-picker,.keys-style-picker,.mirror-options{margin-top:14px}.demo-note{max-width:840px;margin:12px auto 0!important}.capture-tools{margin-top:25px;padding:16px 0}
/* Recorder panels: inline labels, grouped options, and an explicit footer within the display. */
.native-demo .macbook-screen.rec-stage .rec-panel{top:calc(30px + 3%);bottom:6%;left:7%;right:7%;padding:2cqw;display:flex;flex-direction:column;justify-content:center;gap:1.2cqw;box-sizing:border-box}
.native-demo .macbook-screen .rec-panel .panel-title{font-size:clamp(10px,3.3cqw,22px);line-height:1.15;margin:0;min-width:0}
.native-demo .macbook-screen .rec-panel .panel-title span{font-size:clamp(8px,2cqw,13px)}
.native-demo .macbook-screen .rec-panel .rec-field{display:grid;grid-template-columns:27% minmax(0,1fr);align-items:center;gap:2%;margin:0;padding:0;min-height:0}
.native-demo .macbook-screen .rec-panel .rec-field>span{font-size:clamp(8px,2.6cqw,15px);text-align:left;line-height:1.15}
.native-demo .macbook-screen .rec-panel .rec-field strong{font-size:clamp(8px,2.6cqw,15px);padding:.7cqw 1cqw;line-height:1.15;white-space:normal;min-height:0}
.native-demo .macbook-screen .rec-panel .rec-checks{display:flex;flex-wrap:wrap;gap:.7cqw 1.8cqw;margin:0;font-size:clamp(8px,2.4cqw,14px);line-height:1.15}
.native-demo .macbook-screen .rec-panel .rec-actions{margin:0;padding:1cqw 0 0;gap:3cqw;font-size:clamp(8px,2.7cqw,16px);line-height:1.1;flex-shrink:0}
.native-demo .macbook-screen .rec-panel .rec-actions strong{padding:1cqw 3cqw;font-size:inherit}
.native-demo .macbook-screen .rec-panel .audio-symbol{display:none}.native-demo .macbook-screen .rec-panel .echo-note{margin:0;font-size:clamp(8px,2.2cqw,13px);line-height:1.15}
.native-demo .macbook-screen .choice-menu{left:28%;right:3%;padding:1cqw;font-size:clamp(8px,2.5cqw,14px);line-height:1.2}
.native-demo .macbook-screen .choice-menu span{padding:.8cqw;white-space:normal}.native-demo .macbook-screen .target-menu{top:24%}.native-demo .macbook-screen .mic-menu{top:40%}.native-demo .macbook-screen .audio-mic-menu{top:28%}
.native-demo .macbook-screen .record-saved{inset:25% 10% 16%;gap:7%;padding:4%;box-sizing:border-box}.native-demo .macbook-screen .record-saved strong{font-size:clamp(13px,3.5cqw,24px)}.native-demo .macbook-screen .record-saved>span{font-size:clamp(10px,2.5cqw,18px);overflow-wrap:anywhere;text-align:center}.native-demo .macbook-screen .recorded-content,.native-demo .macbook-screen .audio-recording,.native-demo .macbook-screen .rec-countdown{top:30px}.native-demo .macbook-screen .audio-recording .stop-hint{font-size:clamp(9px,2.1cqw,15px)}.native-demo .macbook-screen .audio-sources{flex-wrap:wrap;justify-content:center}.recording-closeup{display:none}
/* KlikBar: the menu and secondary shelf are the subject, not a large document. */
.bar-demo .workspace-card{top:42%;bottom:20%;left:20%;right:20%;padding:3%;background:#edf0ef18;color:#c7d2db;box-shadow:none;border:1px solid #edf0ef12}.bar-demo .workspace-card h3{font-size:3.3cqw;margin:4% 0}.bar-demo .workspace-card p{font-size:1.8cqw;color:#becbd7}.bar-demo .workspace-card>span{font-size:1.2cqw;color:#b8c9d6}.bar-demo .workspace-lines{display:none}.bar-demo .family-menubar{height:38px;font-size:12px}.bar-demo .family-menubar img{width:21px;height:21px}.bar-demo .family-status{width:22px}.bar-demo .inline-apps{gap:13px}.bar-demo .family-menubar .bar-switch{width:30px;height:32px}.bar-demo .second-shelf{top:52px;padding:13px 20px;right:15px;gap:18px}.bar-demo .second-shelf .family-status,.bar-demo .second-shelf img{width:27px;height:27px}.bar-demo .bar-state{bottom:7%}.bar-view-picker{margin-top:12px}.bar-demo .bar-caption{margin-top:8px}
/* A compact real product preview immediately follows the opening. */
.home-page .home-hero-grid{padding:32px 0 25px}.home-page .home-baseline{margin-top:4px}.home-page .home-hero{padding-bottom:22px}.home-page .shot-feature{padding:30px max(6%,24px)}.home-page .shot-feature>div{max-width:1200px}.home-page .shot-feature h2{font-size:clamp(32px,3.5vw,48px);line-height:1.06;margin:12px 0 18px}.home-page .shot-feature p{font-size:17px;line-height:1.55;margin-bottom:18px}.home-page .home-shot-preview{max-width:430px}.home-page .portfolio{padding-top:45px;padding-bottom:45px}.home-page .section-heading>p{max-width:420px}.home-page .home-end{padding-top:38px;padding-bottom:38px}
@media(max-width:800px){.macbook-frame{padding:4px 4px 5px;border-radius:10px}.native-demo .macbook-screen{border-radius:6px}.macbook-frame:after{top:1px}.demo-section,.awake-demos,.clean-demo-section,.keys-demo-section,.mirror-demo-section,.bar-demo-section{padding:32px 0}.section-heading{gap:16px;margin-bottom:20px}.benefits,.faq{padding-top:34px;padding-bottom:34px}.use-section{padding:34px 0}.awake-demos>.wrap{display:block}.awake-demo-row.mode-card{margin-bottom:24px}.awake-demo-row.mode-card .awake-demo{width:100%}.awake-explanation h3{font-size:28px}.eye-intro h3{font-size:28px}.recording-grid{gap:24px}.native-demo .macbook-screen.rec-stage .rec-panel{top:calc(26px + 2%);bottom:5%;left:5%;right:5%;padding:1.8cqw;gap:1cqw}.native-demo .macbook-screen .rec-panel .panel-title{font-size:3.4cqw}.native-demo .macbook-screen .rec-panel .rec-field strong,.native-demo .macbook-screen .rec-panel .rec-field>span{font-size:2.8cqw}.native-demo .macbook-screen .rec-panel .rec-checks{font-size:2.6cqw}.native-demo .macbook-screen .rec-panel .rec-actions{font-size:2.9cqw}.native-demo .macbook-screen .rec-panel .echo-note{font-size:2.6cqw}.native-demo .macbook-screen .recorded-content,.native-demo .macbook-screen .audio-recording,.native-demo .macbook-screen .rec-countdown{top:26px}.recording-closeup{display:block;padding:14px 5px 3px;color:#d7e0dc;font:14px/1.4 Barlow,Arial,sans-serif}.recording-closeup>strong{font-size:13px;font-weight:500;color:#c0ccc5}.recording-closeup dl{margin:10px 0;display:grid;gap:7px}.recording-closeup dl>div{display:grid;grid-template-columns:100px 1fr;gap:10px}.recording-closeup dt{color:#aebfb4}.recording-closeup dd{margin:0;color:#edebe6}.recording-closeup>span{display:flex;align-items:center;justify-content:flex-end;gap:20px;font-size:13px}.recording-closeup b{display:inline-block;background:#0f6e68;color:white;border-radius:6px;padding:7px 18px;font-weight:500}.exit-instruction{font-size:15px;margin:14px 0}.bar-demo .family-menubar{height:26px;font-size:8px}.bar-demo .family-menubar img{width:11px;height:11px}.bar-demo .family-status{width:11px}.bar-demo .inline-apps{gap:4px}.bar-demo .family-menubar .bar-switch{width:24px;height:24px}.bar-demo .second-shelf{top:36px;padding:10px 12px;gap:10px}.bar-demo .second-shelf .family-status,.bar-demo .second-shelf img{width:19px;height:19px}.bar-demo .workspace-card{top:48%;bottom:23%;left:15%;right:15%;padding:3%}.bar-demo .workspace-card h3{font-size:4cqw;margin:4% 0}.bar-demo .workspace-card p,.bar-demo .workspace-card>span{display:none}.bar-demo .bar-state{bottom:5%}.bar-demo .bar-state strong{font-size:12px}.bar-demo .bar-state>span:last-child{font-size:9px}.bar-detail{padding-top:9px;min-height:100px}.home-page .shot-feature{padding:26px 6%;gap:25px}.home-page .shot-feature h2{font-size:36px}.home-page .home-shot-preview{max-width:430px}.home-page .home-hero-grid{padding:25px 0}.home-page .home-baseline{margin-top:0}.home-page .portfolio{padding-top:34px}.home-page .home-hero h1{font-size:clamp(58px,11vw,80px)}}
.native-demo .macbook-screen.awake-scene .awake-menu{top:18%;right:5%;width:80%;padding:2cqw;font-size:clamp(8px,2.3cqw,14px);line-height:1.15}.native-demo .macbook-screen.awake-scene .awake-menu>strong{font-size:clamp(10px,3cqw,17px);margin:0 0 1cqw}.native-demo .macbook-screen.awake-scene .awake-menu>span{padding:.7cqw;font-size:inherit;line-height:1.15}.native-demo .macbook-screen.awake-scene .awake-menu .menu-note{font-size:clamp(8px,2.1cqw,12px);line-height:1.15}
.native-demo .macbook-screen .audio-recording{padding:3%;gap:2%;box-sizing:border-box}.native-demo .macbook-screen .audio-recording .voice-icon{font-size:clamp(12px,3.5cqw,24px)}.native-demo .macbook-screen .audio-recording strong{font-size:clamp(12px,4cqw,24px);line-height:1.15}.native-demo .macbook-screen .audio-timer{font-size:clamp(20px,6cqw,40px);line-height:1.15}.native-demo .macbook-screen .audio-sources{margin:0;gap:1.6cqw}.native-demo .macbook-screen .audio-sources span{font-size:clamp(8px,2.5cqw,14px);padding:1cqw}.native-demo .macbook-screen .audio-recording .stop-hint{margin:0;font-size:clamp(8px,2.1cqw,13px);line-height:1.2;text-align:center}
.home-shot-preview .preview-canvas{aspect-ratio:auto;height:auto;min-height:0}
.native-demo .macbook-screen .presentation-slide{display:flex;flex-direction:column;justify-content:center;gap:2cqw}.native-demo .macbook-screen .presentation-slide h3{font-size:clamp(15px,4.8cqw,30px);line-height:1.1;margin:0}.native-demo .macbook-screen .presentation-slide>span{font-size:clamp(8px,1.8cqw,12px)}.native-demo .macbook-screen .presentation-slide small{font-size:clamp(7px,1.6cqw,11px)}.native-demo .macbook-screen .task-window h3{font-size:clamp(15px,4.8cqw,30px);line-height:1.1;margin:2cqw 0}.native-demo .macbook-screen .task-window p{font-size:clamp(9px,2.2cqw,14px);margin:1cqw 0}.native-demo .macbook-screen .trigger-setup>strong{margin-bottom:3%}.native-demo .macbook-screen .trigger-setup>div{margin-top:3%;padding-top:3%}
.bar-demo .workspace-card{top:55%;bottom:20%;left:7%;right:48%;padding:2.5%;background:#edf0ef0b;border-color:#edf0ef0a}.bar-demo .workspace-card h3{font-size:2.7cqw}.bar-demo .workspace-card p{font-size:1.5cqw}.bar-demo .workspace-card>span{font-size:1cqw}
@media(max-width:800px){.bar-demo .workspace-card{top:59%;bottom:22%;left:7%;right:36%;padding:3%}.bar-demo .workspace-card h3{font-size:3.3cqw;margin:0}}
/* One bezel and one camera treatment for every product, including KlikBar. */
.macbook-frame:before{display:none!important}.macbook-frame:after{top:1px!important}

/* Free launch offer is visible without suggesting the download is available. */
.free-badge{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid #a8c6b64d;border-radius:999px;background:#a8c6b612;color:#d4e7dd;font:500 13px/1.4 Barlow,Arial,sans-serif;white-space:nowrap}.card-status .free-badge{margin-right:8px}.product-status{align-items:center;flex-wrap:wrap}.product-status .free-badge{font-size:14px}

/* Commercial condition first, availability second, in the same slots across all products. */
.commercial-status{display:grid!important;grid-template-columns:1fr;gap:7px!important;align-items:start!important;min-height:60px;max-width:100%;margin-bottom:20px!important}.commercial-condition{min-height:28px;display:flex;align-items:center;font:500 14px/1.4 Barlow,Arial,sans-serif;color:#cbd1c8}.commercial-status .availability-label{display:flex;align-items:center;gap:8px;font:13px/1.5 Barlow,Arial,sans-serif;color:#c3cabe}.commercial-status .status-marker{width:6px;height:6px}.commercial-status .free-badge{border:0;border-radius:5px;background:#12433f;color:#e3f3ed;font:500 13px/1.4 Barlow,Arial,sans-serif;padding:4px 9px;cursor:default;box-shadow:none;margin:0}.commercial-status .paid-label{font-size:14px}.portfolio-app .commercial-status{margin-bottom:16px!important}.product-status.commercial-status{margin-top:0}
.pricing-inline-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:4px;color:#edebe6}