/* 084 — small product demonstrations, not decorative entrance effects. Scoped below the locked hero. */
.marketing-page{--benefit-ready:084}
.marketing-page .feature-strip.benefit-examples{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:40px;padding-bottom:38px;align-items:stretch}
.marketing-page .benefit-examples>.feature-chip{grid-template-columns:38px minmax(0,1fr);grid-template-rows:minmax(70px,auto) auto;column-gap:12px;row-gap:15px;padding:6px 17px;min-width:0;border-right:1px solid #e8e5dd;border-bottom:0}
.marketing-page .benefit-examples>.feature-chip:first-child{padding-left:0}.marketing-page .benefit-examples>.feature-chip:last-child{padding-right:0;border-right:0}
.marketing-page .benefit-examples>.feature-chip:before{display:none!important}.marketing-page .benefit-examples .feature-icon{width:36px;height:36px;background:#f1eee7!important;box-shadow:none!important;transform:none!important;rotate:none!important;translate:none!important}
.marketing-page .benefit-examples .feature-copy b{font-size:14px}.marketing-page .benefit-examples .feature-copy span{font-size:12px;line-height:1.65;max-width:none}
.benefit-demo{grid-column:1/-1;min-width:0;align-self:end;position:relative}.benefit-demo-stage{height:188px;position:relative;background:#f4f3ed;border:1px solid #e6e6dc;border-radius:12px;overflow:hidden}
.benefit-art{width:240px;height:164px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:400 11px/1.4 "Plus Jakarta Sans",sans-serif;color:#334337}
.benefit-art *{box-sizing:border-box}.benefit-art :is(span,b,i,em){font:inherit;color:inherit;line-height:1.35;max-width:none;white-space:normal;margin:0;padding:0;letter-spacing:0}.benefit-art b{font-weight:600}.benefit-art i,.benefit-art em{font-style:normal}.benefit-art img{display:block;object-fit:cover;max-width:none;filter:saturate(.75)}
.benefit-art .demo-window{background:#fffefa;border:1px solid #d7dcd0;border-radius:8px;position:absolute;overflow:hidden;box-shadow:0 8px 18px #26382b0b}
.benefit-art .demo-browserbar{height:23px;border-bottom:1px solid #e6e7de;display:flex;align-items:center;gap:3px;padding:0 9px}.benefit-art .demo-browserbar i{width:3px;height:3px;border-radius:50%;background:#c8cabb;display:block}.benefit-art .demo-browserbar span{font-size:8px;margin-left:auto;color:#7c8475}
.benefit-art .demo-pointer{position:absolute;left:0;top:0;width:21px;height:27px;opacity:0;filter:drop-shadow(1px 2px 1px #1d312320);transform-origin:0 0;pointer-events:none}
.benefit-art .demo-publish-window{left:10px;top:10px;width:220px;height:142px}.benefit-art .demo-publish-page{height:76px;display:grid;grid-template-columns:1fr 76px;gap:8px;padding:10px}.benefit-art .demo-publish-page img{width:68px;height:55px;border-radius:2px}.benefit-art .demo-publish-page b{font-size:16px;line-height:1.2;margin:1px 0 5px;display:block;letter-spacing:-.5px}.benefit-art .demo-publish-page span{font-size:8px;display:block;color:#7c8273}
.benefit-art .demo-text-line{display:block;height:2px;width:64px;background:#dddcd0;margin-top:6px;border-radius:1px}.benefit-art .demo-text-line.short{width:43px;margin-top:4px}
.benefit-art .demo-publish-toolbar{height:40px;border-top:1px solid #eeeeE4;position:relative;font-size:9px}.benefit-art .demo-draft,.benefit-art .demo-online{position:absolute;left:10px;top:12px;display:flex;gap:4px;align-items:center;font-size:9px}.benefit-art .demo-draft{opacity:0;color:#858a7e}.benefit-art .demo-online i{color:#5e8060;font-size:12px;line-height:1}
.benefit-art .demo-publish-button,.benefit-art .demo-published-button{position:absolute;right:9px;top:7px;padding:5px 11px;font-size:9px;line-height:1.4;border-radius:4px;background:#344e3a;color:#fffef6;display:block}.benefit-art .demo-publish-button{opacity:0}.benefit-art .demo-published-button{background:#e5ecdf;color:#36503b}.benefit-art .demo-publish-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#719368;opacity:0;transform-origin:left}
.benefit-art .demo-builder{left:10px;top:10px;width:220px;height:142px}.benefit-art .demo-block{position:absolute;left:9px;right:9px;height:40px;border:1px solid #deded4;border-radius:5px;background:#fffefa;display:flex;gap:9px;align-items:center;padding:5px 7px}.benefit-art .demo-block-a{top:78px;z-index:2}.benefit-art .demo-block-b{top:32px;z-index:1}.benefit-art .demo-block img{width:28px;height:28px;border-radius:2px}.benefit-art .demo-block span{font-size:10px;font-weight:500;display:block;flex:1;line-height:1.4;min-width:0}.benefit-art .demo-block span i{display:block;font-size:7px;color:#838779;font-weight:400;margin-top:2px}.benefit-art .demo-block b{font-size:13px;color:#728167;display:block;margin:0;width:15px;text-align:center}
.benefit-art .demo-arranged{position:absolute;bottom:6px;left:9px;font-size:8px;color:#6d8567}
.benefit-art .demo-device{left:50%;top:1px;transform:translateX(-50%);width:102px;height:148px;border-radius:13px;overflow:hidden}
.benefit-art .demo-device-bar{height:22px;border-bottom:1px solid #eeece3;display:flex;align-items:center;gap:5px;padding:0 10px;font-size:8px}.benefit-art .demo-device-bar i{width:3px;height:3px;border-radius:50%;background:#afbda2}.benefit-art .demo-device-bar span{font:italic 10px Georgia,serif}.benefit-art .demo-device-bar em{margin-left:auto;font-size:9px}
.benefit-art .demo-device-copy{position:absolute;left:12px;top:27px;width:78px}.benefit-art .demo-device-copy b{font:400 12px/13px Georgia,serif;display:block}.benefit-art .demo-device-copy i{display:block;width:56px;height:2px;margin-top:5px;background:#dadccd;opacity:0}.benefit-art .demo-device-copy i+i{display:none}.benefit-art .demo-device-copy span{display:block;margin-top:6px;font-size:6px;line-height:1.3;color:#fffefa;background:#426148;padding:3px 5px;border-radius:2px;width:max-content}
.benefit-art .demo-device-photo{position:absolute;left:10px;top:88px;width:80px;height:43px;border-radius:3px}.benefit-art .demo-device-home{position:absolute;bottom:5px;left:35%;width:30%;height:2px;border-radius:2px;background:#52634b}.benefit-art .demo-desktop-label,.benefit-art .demo-mobile-label{position:absolute;bottom:-5px;left:0;width:100%;text-align:center;color:#798270;font-size:9px}.benefit-art .demo-desktop-label{opacity:0}
.benefit-art .demo-style-stack{left:10px;top:7px;width:220px;height:139px}.benefit-art .demo-style{position:absolute;inset:0;overflow:hidden}.benefit-art .demo-style b{font-size:12px;line-height:1;display:block;margin:0}.benefit-art .demo-style-one{background:#fbf8ee;opacity:0}.benefit-art .demo-style-one b{position:absolute;left:11px;top:12px;font:italic 16px Georgia,serif}.benefit-art .demo-style-one span{position:absolute;left:11px;top:53px;font:400 20px/1.1 Georgia,serif;letter-spacing:-.7px}.benefit-art .demo-style-one img{position:absolute;right:0;top:35px;width:96px;height:103px}.benefit-art .demo-style-one i{position:absolute;left:11px;bottom:12px;font-size:6px}
.benefit-art .demo-style-two{background:#f3ece2;opacity:0}.benefit-art .demo-style-two b{position:absolute;left:0;right:0;top:12px;text-align:center;font:400 14px Georgia,serif}.benefit-art .demo-style-two img{position:absolute;left:11px;top:38px;width:84px;height:88px;border-radius:2px}.benefit-art .demo-style-two span{position:absolute;left:107px;top:58px;font:400 13px/1.25 Georgia,serif}.benefit-art .demo-style-two i{position:absolute;left:107px;bottom:15px;font-size:7px;color:#877965}
.benefit-art .demo-style-three{background:#284539;color:#fffef0}.benefit-art .demo-style-three b{position:absolute;left:11px;top:13px;font-weight:500;font-size:12px;color:inherit}.benefit-art .demo-style-three span{position:absolute;left:11px;top:50px;font-size:13px;font-weight:500;line-height:1.2;color:inherit;letter-spacing:-.45px}.benefit-art .demo-style-three img{position:absolute;right:11px;top:44px;width:83px;height:82px;border-radius:5px;filter:saturate(.6)}.benefit-art .demo-style-three i{position:absolute;left:11px;bottom:13px;font-size:7px;color:#d4dfc9}
.benefit-art .demo-style-choices{position:absolute;left:0;right:0;bottom:1px;display:flex;justify-content:center;gap:10px;align-items:center}.benefit-art .demo-style-choices i{width:9px;height:9px;border-radius:50%;border:1px solid #959c89;display:block;opacity:.38;background:#f3eee1}.benefit-art .demo-style-choices .choice-two{background:#cabcaa}.benefit-art .demo-style-choices .choice-three{background:#34573f;opacity:1;transform:scale(1.35)}
.feature-chip .benefit-demo-footer{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:9px;min-height:30px}.feature-chip .benefit-demo-footer>span{font:400 9px/1.5 "Plus Jakarta Sans",sans-serif;color:#7e8578;max-width:none;flex:1;min-width:0;display:block}
.feature-chip .benefit-demo-replay{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;padding:6px 4px;border:0;border-bottom:1px solid #cdd4c5;background:transparent;color:#52694b;border-radius:0;cursor:pointer;min-height:30px;transition:color .2s,border-color .2s}.feature-chip .benefit-demo-replay svg{height:12px;width:12px}.feature-chip .benefit-demo-replay span{font:500 9px/1 "Plus Jakarta Sans",sans-serif;color:inherit;display:block;margin:0;max-width:none}
.feature-chip .benefit-demo-replay:hover{color:#203c29;border-color:#728869}.feature-chip .benefit-demo-replay:focus-visible{outline:2px solid #73866b;outline-offset:3px;border-radius:3px}
.feature-chip .benefit-accessible{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;padding:0!important;border:0!important;margin:-1px!important}
@media(max-width:1150px){.marketing-page .feature-strip.benefit-examples{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0;padding-block:32px}.marketing-page .benefit-examples>.feature-chip{padding:7px 22px;grid-template-rows:62px auto}.marketing-page .benefit-examples>.feature-chip:nth-child(odd){padding-left:0}.marketing-page .benefit-examples>.feature-chip:nth-child(even){border-right:0;padding-right:0}.marketing-page .benefit-examples .feature-copy b{font-size:14px}.marketing-page .benefit-examples .feature-copy span{font-size:12px;max-width:280px}.benefit-demo-stage{height:196px}.benefit-art{transform:translate(-50%,-50%) scale(1.04)}}
@media(max-width:600px){.marketing-page .feature-strip.benefit-examples{grid-template-columns:1fr;gap:26px;padding:32px 22px}.marketing-page .benefit-examples>.feature-chip{padding:0!important;border:0;grid-template-rows:auto auto;gap:9px 12px}.marketing-page .benefit-examples .feature-copy b{font-size:15px;margin-bottom:4px}.marketing-page .benefit-examples .feature-copy span{font-size:12px;max-width:none}.benefit-demo-stage{height:198px;margin-top:4px}.feature-chip .benefit-demo-footer{margin-top:5px}.feature-chip .benefit-demo-replay{min-height:40px;padding-inline:8px}.feature-chip .benefit-demo-footer>span,.feature-chip .benefit-demo-replay span{font-size:10px}}
@media(prefers-reduced-motion:reduce){.benefit-demo-replay{display:none!important}.benefit-demo [class^="demo-"]{animation:none!important;transition:none!important}.benefit-demo .demo-pointer{display:none!important}}
@media print{.benefit-demo-replay{display:none!important}.benefit-demo{break-inside:avoid}.marketing-page .feature-strip.benefit-examples{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 086 — cursor paints above both moving blocks throughout the Intuitif example. */
.benefit-demo[data-demo="reorder"] .demo-builder{z-index:0}
.benefit-demo[data-demo="reorder"] .demo-pointer{z-index:20;pointer-events:none}