.live-demo-section{padding:4.5rem 0;background:#f1faf6;scroll-margin-top:1.5rem}
.bokki-demo{--demo-ink:#123d31;--demo-mint:#08af93;--demo-duration:24s;--demo-progress:0%;color:var(--demo-ink)}
.demo-heading{max-width:48rem;margin-bottom:2rem}.demo-heading h2{font-size:clamp(2rem,4vw,3rem);line-height:1.15;letter-spacing:-.045em;margin:.7rem 0 1rem}.demo-heading p:not(.eyebrow){font-size:1.0625rem;line-height:1.8;color:#52685f;max-width:43rem}
.hero-demo-button{display:flex;align-items:center;gap:.7rem;border:0;background:transparent;padding:.85rem 0;color:#007a66;font:inherit;font-weight:700;cursor:pointer;min-height:44px;text-decoration:underline;text-underline-offset:4px}.hero-demo-button span{font-size:.875rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.demo-product-picker{display:flex;gap:.65rem;flex-wrap:wrap;padding:0;margin:0 0 1.6rem;border:0}.demo-product-picker label{position:relative;cursor:pointer}.demo-product-picker input{position:absolute;opacity:0;width:1px;height:1px}.demo-product-picker label>span{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.6rem 1rem;border:1px solid #cfe1d7;border-radius:999px;background:white;font-size:.875rem;font-weight:700}.demo-product-picker img{width:24px;height:24px;border-radius:6px}.demo-product-picker input:checked+span{background:#123d31;border-color:#123d31;color:white}.demo-product-picker input:focus-visible+span{outline:3px solid #08af93;outline-offset:3px}
.demo-player{border:1px solid #d1e4d9;border-radius:1.25rem;background:white;overflow:hidden;box-shadow:0 20px 55px #143e3010}.demo-player-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid #e2ece6}.demo-player-bar>div{display:flex;align-items:center;gap:.65rem}.demo-player-bar img{width:32px;height:32px;border-radius:8px}.demo-player-bar strong{font-size:1rem}.demo-player-bar>span{font-size:.875rem;color:#61796d}
.demo-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:430px;background:#f6faf8;isolation:isolate}.demo-visual{display:flex;align-items:center;justify-content:center;padding:1.8rem;min-width:0;overflow:hidden;background:linear-gradient(145deg,#e8f6ed,#d8eee4)}
.demo-screen{position:relative;width:auto;max-width:100%;height:365px;border:5px solid #173c31;border-radius:17px;overflow:hidden;background:#18211e;box-shadow:0 15px 35px #123d311f}.demo-screen img{height:100%;width:auto;max-width:none;display:block}.demo-screen-studio{aspect-ratio:820/1180}.demo-screen-phone{aspect-ratio:314/680}.demo-screen-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.demo-shot{opacity:0}.demo-trip-settlement{opacity:0}
.demo-focus{position:absolute;top:11%;left:3%;width:53%;height:13%;border:2px solid #8af4c5;border-radius:7px;box-shadow:0 0 0 200vmax #102b2725;animation:demo-focus 24s linear both paused}.demo-focus>span{position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:#aafbd8;border:3px solid #123d31;border-radius:50%}
.demo-scenes{position:relative;display:grid;min-height:400px;overflow:hidden;background:#fff}.demo-scene{position:relative;grid-area:1/1;padding:2.2rem;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;animation-duration:var(--demo-duration);animation-timing-function:linear;animation-fill-mode:both;animation-play-state:paused}.demo-scene-1{animation-name:demo-scene-1}.demo-scene-2{animation-name:demo-scene-2}.demo-scene-3{animation-name:demo-scene-3}.demo-scene-4{animation-name:demo-scene-4}.demo-scene-count{font-size:.875rem;font-weight:700;letter-spacing:.12em;color:#00836d}.demo-scene h3{font-size:clamp(1.5rem,2.7vw,2rem);line-height:1.2;letter-spacing:-.04em;margin:1rem 0 1.5rem}.demo-scene-primary{font-size:1.125rem;line-height:1.5;font-weight:700;margin:0 0 .4rem}.demo-scene-secondary{font-size:.875rem;line-height:1.7;color:#62766b;margin:0}.demo-scene small{font-size:.875rem;color:#61796d;line-height:1.5;margin-top:.7rem}
.demo-type{font-size:1rem;font-weight:700;line-height:1.6;white-space:nowrap;overflow:hidden;max-width:0;border-left:3px solid #08af93;padding-left:.7rem;margin-top:1.5rem;animation:demo-type 24s linear both paused}
.demo-waveform{position:relative;display:flex;gap:4px;align-items:center;height:70px;margin-top:1.5rem;overflow:hidden}.demo-waveform>span{flex:1;height:var(--bar);background:#8ccdb9;border-radius:3px}.demo-waveform i{position:absolute;height:100%;width:2px;background:#006e59;left:0;animation:demo-playhead 24s linear both paused}
.demo-output-chips,.demo-context-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}.demo-output-chips>span,.demo-context-tags>span{font-size:.875rem;line-height:1.4;padding:.5rem .7rem;background:#eef8f2;border:1px solid #d5e9de;border-radius:8px}.demo-ready{font-size:.875rem;line-height:1.5;font-weight:700;padding:.7rem 1rem;border-radius:9px;background:#daf6e9;color:#066a53;margin-top:1.5rem;width:fit-content;animation:demo-ready 24s linear both paused}.demo-conversion{height:12px;border-radius:999px;background:#e9f4ed;margin-top:1.7rem;overflow:hidden}.demo-conversion>span{display:block;width:0;height:100%;background:#08af93;border-radius:inherit;animation:demo-convert 24s linear both paused}
.demo-camera{position:relative;width:100%;height:300px;border:7px solid #183c31;border-radius:16px;background:#d3eadf;overflow:hidden;box-shadow:0 15px 35px #123d311f}.demo-camera>img{width:100%;height:100%;object-fit:cover;object-position:center 61%;display:block}.demo-camera-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 33.1%,#ffffff75 33.1%,#ffffff75 33.5%,transparent 33.5%,transparent 66.3%,#ffffff75 66.3%,#ffffff75 66.7%,transparent 66.7%),linear-gradient(transparent 33.1%,#ffffff75 33.1%,#ffffff75 33.5%,transparent 33.5%,transparent 66.3%,#ffffff75 66.3%,#ffffff75 66.7%,transparent 66.7%)}.demo-camera-focus{position:absolute;width:52px;height:52px;left:43%;top:42%;border:2px solid #fff5b5;border-radius:6px;animation:demo-camera-focus 24s linear both paused}.demo-camera-label,.demo-camera-record{position:absolute;top:12px;left:12px;font-size:.875rem;font-weight:700;background:#143d31c9;color:white;padding:.4rem .6rem;border-radius:6px}.demo-camera-record{top:auto;left:auto;bottom:12px;right:12px;opacity:0;background:#b82d36;animation:demo-capture 24s linear both paused}.demo-camera-grade{position:absolute;inset:0;background:#d6a26b;mix-blend-mode:soft-light;opacity:0;animation:demo-grade 24s linear both paused}.demo-prompt{height:90px;overflow:hidden;background:#133d31;color:white;border-radius:10px;font-size:1rem;font-weight:700;line-height:1.9;margin-top:1.5rem;padding:.7rem 1rem}.demo-prompt>div{animation:demo-prompt 24s linear both paused}.demo-color-swatches{display:flex;gap:8px;margin-top:1.5rem}.demo-color-swatches span{height:34px;flex:1;border-radius:6px;background:#b2cfbc}.demo-color-swatches span:nth-child(2){background:#d3b790}.demo-color-swatches span:nth-child(3){background:#4c766a}.demo-color-swatches span:nth-child(4){background:#294e53}
.demo-route-map{position:relative;width:100%;max-width:440px;min-height:290px;background:#f8fcf9;border:1px solid #c8e2d2;border-radius:16px;overflow:hidden;box-shadow:0 15px 35px #123d3115}.demo-route-map svg{width:100%;height:auto;display:block}.demo-map-label{position:absolute;left:14px;top:14px;background:white;color:#526e5e;font-size:.875rem;font-weight:700;padding:.5rem .7rem;border-radius:7px}.demo-map-summary{position:absolute;bottom:12px;right:14px;font-size:.875rem;color:#294e3d;background:white;padding:.4rem .6rem;border-radius:6px}.demo-route-trace{stroke-dasharray:1;stroke-dashoffset:1;animation:demo-route 24s linear both paused}.demo-expense-row,.demo-balance-row{display:flex;justify-content:space-between;gap:1rem;font-size:.875rem;line-height:1.6;padding:.7rem 0;border-bottom:1px solid #e2eee7}.demo-balance-row strong{color:#00836d}
.demo-transport{display:flex;align-items:center;gap:.9rem;padding:1rem 1.5rem;border-top:1px solid #dbe9e0;background:white}.demo-play,.demo-restart{font:inherit;font-size:.875rem;font-weight:700;min-height:44px;border:1px solid #c9dfd3;border-radius:999px;padding:.6rem 1rem;cursor:pointer;white-space:nowrap}.demo-play{background:#123d31;border-color:#123d31;color:white;display:flex;align-items:center;gap:.5rem;min-width:117px;justify-content:center}.demo-restart{background:white;color:#123d31}.demo-play:disabled,.demo-restart:disabled{opacity:.5;cursor:default}.demo-play-symbol{font-size:.75rem}.demo-position{flex:1;min-width:40px;height:44px;cursor:pointer;accent-color:#008e75;margin:0}.demo-time{font-size:.875rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:#526e5e}
.demo-step-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}.demo-step-list li{min-width:0}.demo-step-list button{display:flex;gap:.55rem;align-items:flex-start;width:100%;min-height:62px;border:1px solid #d0e4d7;border-radius:10px;padding:.9rem;font:inherit;font-size:.875rem;line-height:1.4;text-align:left;background:white;color:#496653;cursor:pointer}.demo-step-list button>span{color:#7a9885;font-size:.875rem;font-weight:700}.demo-step-list button[aria-current="step"]{border-color:#007b64;background:#123d31;color:white}.demo-step-list button[aria-current="step"]>span{color:#8de1bd}.demo-step-list button:disabled{cursor:default}.demo-step-description{padding:1.2rem 0 .8rem;min-height:98px}.demo-step-description strong{font-size:1rem}.demo-step-description p{font-size:1rem;color:#526e5e;line-height:1.7;margin:.35rem 0 0}.demo-disclosure{font-size:.875rem;color:#637c6b;line-height:1.8;max-width:62rem;margin:0}.bokki-demo button:focus-visible,.demo-position:focus-visible{outline:3px solid #08af93;outline-offset:3px}
@keyframes demo-scene-1{0%,23.5%{opacity:1;visibility:visible;transform:none}25%,100%{opacity:0;visibility:hidden;transform:translateY(-12px)}}
@keyframes demo-scene-2{0%,24%{opacity:0;visibility:hidden;transform:translateY(12px)}25%,48.5%{opacity:1;visibility:visible;transform:none}50%,100%{opacity:0;visibility:hidden;transform:translateY(-12px)}}
@keyframes demo-scene-3{0%,49%{opacity:0;visibility:hidden;transform:translateY(12px)}50%,73.5%{opacity:1;visibility:visible;transform:none}75%,100%{opacity:0;visibility:hidden;transform:translateY(-12px)}}
@keyframes demo-scene-4{0%,74%{opacity:0;visibility:hidden;transform:translateY(12px)}75%,100%{opacity:1;visibility:visible;transform:none}}
@keyframes demo-focus{0%,23.5%{top:11%;left:3%;width:53%;height:13%}25%,48.5%{top:12%;left:60%;width:37%;height:27%}50%,73.5%{top:42%;left:4%;width:92%;height:18%}75%,100%{top:34%;left:4%;width:92%;height:9%}}
@keyframes demo-type{0%,27%{max-width:0}43%,100%{max-width:27ch}}
@keyframes demo-playhead{0%,51%{left:0}73%,100%{left:95%}}
@keyframes demo-ready{0%,88%{opacity:0;transform:translateY(6px)}93%,100%{opacity:1;transform:none}}
@keyframes demo-convert{0%,51%{width:0}72%,100%{width:100%}}
@keyframes demo-camera-focus{0%{opacity:0;transform:scale(1.25)}8%,22%{opacity:1;transform:scale(1)}28%,100%{opacity:0;transform:scale(1)}}
@keyframes demo-grade{0%,50%{opacity:0}65%,100%{opacity:.65}}
@keyframes demo-capture{0%,77%{opacity:0}80%,100%{opacity:1}}
@keyframes demo-prompt{0%,26%{transform:translateY(0)}49%,100%{transform:translateY(-36px)}}
@keyframes demo-route{0%,25%{stroke-dashoffset:1}49%,100%{stroke-dashoffset:0}}
.demo-shot-1{animation:demo-scene-1 24s linear both paused}.demo-shot-2{animation:demo-scene-2 24s linear both paused}.demo-shot-3{animation:demo-scene-3 24s linear both paused}.demo-shot-4{animation:demo-scene-4 24s linear both paused}.demo-trip-map{animation:demo-trip-map 24s linear both paused}.demo-trip-settlement{animation:demo-trip-settlement 24s linear both paused}
@keyframes demo-trip-map{0%,48%{opacity:1}51%,100%{opacity:0}}
@keyframes demo-trip-settlement{0%,48%{opacity:0}51%,100%{opacity:1}}
@media(max-width:760px){.live-demo-section{padding:3rem 0}.demo-heading h2{font-size:2rem}.demo-product-picker{gap:.5rem}.demo-product-picker label>span{padding:.6rem .7rem}.demo-stage{grid-template-columns:1fr;min-height:0}.demo-visual{padding:1.4rem;min-height:260px}.demo-screen{height:285px}.demo-camera{height:230px;max-width:440px}.demo-scenes{min-height:260px}.demo-scene{padding:1.5rem}.demo-scene h3{font-size:1.75rem;margin:.8rem 0 1rem}.demo-player-bar{padding:.9rem 1rem;flex-wrap:wrap}.demo-player-bar>span{font-size:.875rem}.demo-transport{padding:1rem;gap:.7rem;flex-wrap:wrap}.demo-position{order:3;flex-basis:calc(100% - 105px)}.demo-time{order:4}.demo-step-list{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-step-list button{padding:.8rem}.demo-map-label{font-size:.875rem}.demo-route-map{min-height:225px}.demo-route-map svg{min-height:225px}.demo-step-description{min-height:116px}}
.bokki-demo[data-static="true"] .demo-stage *{animation:none!important}.bokki-demo[data-static="true"] .demo-scene{opacity:0;visibility:hidden;transform:none}.bokki-demo[data-static="true"] .demo-stage[data-phase="1"] .demo-scene-1,.bokki-demo[data-static="true"] .demo-stage[data-phase="2"] .demo-scene-2,.bokki-demo[data-static="true"] .demo-stage[data-phase="3"] .demo-scene-3,.bokki-demo[data-static="true"] .demo-stage[data-phase="4"] .demo-scene-4{opacity:1;visibility:visible}.bokki-demo[data-static="true"] .demo-focus,.bokki-demo[data-static="true"] .demo-camera-focus{display:none}.bokki-demo[data-static="true"] .demo-type{max-width:none}.bokki-demo[data-static="true"] .demo-ready{opacity:1;transform:none}.bokki-demo[data-static="true"] .demo-route-trace{stroke-dashoffset:0}.bokki-demo[data-static="true"] .demo-conversion>span{width:100%}.bokki-demo[data-static="true"] .demo-shot{opacity:0;visibility:hidden}.bokki-demo[data-static="true"] .demo-stage[data-phase="1"] .demo-shot-1,.bokki-demo[data-static="true"] .demo-stage[data-phase="2"] .demo-shot-2,.bokki-demo[data-static="true"] .demo-stage[data-phase="3"] .demo-shot-3,.bokki-demo[data-static="true"] .demo-stage[data-phase="4"] .demo-shot-4{opacity:1;visibility:visible}.bokki-demo[data-static="true"] .demo-trip-map{opacity:1}.bokki-demo[data-static="true"] .demo-trip-settlement{opacity:0}.bokki-demo[data-static="true"] .demo-stage[data-phase="3"] .demo-trip-map,.bokki-demo[data-static="true"] .demo-stage[data-phase="4"] .demo-trip-map{opacity:0}.bokki-demo[data-static="true"] .demo-stage[data-phase="3"] .demo-trip-settlement,.bokki-demo[data-static="true"] .demo-stage[data-phase="4"] .demo-trip-settlement{opacity:1}
@media(prefers-reduced-motion:reduce){.demo-stage *{animation:none!important}.hero-demo-button{scroll-behavior:auto}}