/* Three quiet, playful stories. All artwork is illustrated without mascots. */
.benefit-motion{position:relative;isolation:isolate;container-type:inline-size;background:#eef7f5;aspect-ratio:3/2;overflow:hidden;flex:none}
.benefit-motion .bm-canvas{position:absolute;inset:0;overflow:hidden}
.benefit-motion .bm-pause{position:absolute;z-index:8;right:9px;top:9px;display:grid;place-items:center;padding:0;width:28px;height:28px;min-height:28px;border:1px solid #cfe0db99;border-radius:50%;color:#457d7b;background:#ffffffdb;opacity:.72;transition:opacity .2s,background .2s}
.benefit-motion .bm-pause:hover,.benefit-motion .bm-pause:focus-visible{opacity:1;background:white}
.bm-play-icon{display:none}.benefit-motion[data-paused=true] .bm-play-icon{display:block}.benefit-motion[data-paused=true] .bm-pause-icon{display:none}
.bm-library{position:absolute;width:84%;height:94.5%;left:8%;top:2.75%;background:white;border:1px solid #e2eee9;border-radius:8px;box-shadow:0 4px 12px #18463706;overflow:hidden}
.benefit-motion .bm-library>img{width:100%;height:100%;object-fit:fill;max-width:none;padding:0}
.bm-lens{position:absolute;left:44.489%;top:22%;width:22cqw;height:22cqw;transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.45,0,.2,1),top .9s cubic-bezier(.45,0,.2,1),transform .9s cubic-bezier(.34,1.2,.64,1);z-index:3;filter:drop-shadow(1px 4px 3px #14585c17)}
.bm-lens-glass{position:absolute;inset:0;border:3px solid #278f94;border-radius:50%;background:#fff;overflow:hidden;z-index:2;box-shadow:inset 0 0 0 3px white}
.bm-lens-glass::after{content:'';position:absolute;inset:3px;border-radius:50%;border:1px solid #d7ebe8;box-shadow:inset 2px 2px 7px #2593940b;pointer-events:none}
.benefit-motion .bm-lens-glass>img{position:absolute;width:168cqw;height:126cqw;max-width:none;object-fit:fill;left:calc(50% - 72.978cqw);top:calc(50% - 9.398cqw);transition:left .9s cubic-bezier(.45,0,.2,1),top .9s cubic-bezier(.45,0,.2,1);transform:none}
.bm-lens-handle{position:absolute;width:10cqw;height:3.9cqw;left:81%;top:81%;background:#1f797f;border-radius:9px;transform:rotate(46deg);transform-origin:left center;box-shadow:inset 0 -3px 0 #0b545826;z-index:0}
.bm-lens-spark{position:absolute;right:-18%;top:-17%;color:#159ba2;font-size:6.48cqw;transform:scale(0) rotate(-30deg);opacity:0;transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1);z-index:3}
.bm-found{position:absolute;right:8%;bottom:5%;display:flex;align-items:center;gap:6px;border:1px solid #c0ded3;background:white;border-radius:24px;padding:6px 14px;font-size:clamp(14px,4.4cqw,20px);line-height:1.5;font-weight:750;color:#197b7c;box-shadow:0 3px 8px #194d3906;opacity:0;transform:translateY(6px) scale(.9);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1);z-index:4}
.bm-found i{font-style:normal;color:#178e8d}
.bm-search.is-found .bm-found{opacity:1;transform:translateY(0) scale(1)}
.bm-search.is-found .bm-lens-spark{opacity:1;transform:scale(1) rotate(0)}
.bm-input{position:absolute;top:auto;bottom:4%;left:4%;width:92%;height:13%;border:1px solid #d2e6df;background:#ffffffed;border-radius:7px;box-shadow:0 4px 9px #27685a05;display:flex;align-items:center;gap:2cqw;padding:0 3cqw;font-size:clamp(13px,3.65cqw,16px);font-weight:700;line-height:1.3;color:#214d58;z-index:2}
.bm-input-icon{font-size:4.1cqw;color:#269aa0;flex-shrink:0}.bm-input-enter{margin-left:auto;font-size:4.32cqw;color:#55a5a4}
.bm-typed{white-space:nowrap;letter-spacing:-.02em;min-width:0}.bm-caret{width:1px;height:3.5cqw;background:#288e90;flex-shrink:0;margin-left:-1.5cqw;animation:bm-caret-blink 1s steps(1) infinite}
.bm-create-output{position:absolute;top:18%;bottom:0;left:3%;width:94%;overflow:hidden}
.bm-scene{position:absolute;inset:0;width:100%;height:100%;container-type:size;overflow:hidden;opacity:0;transform:translateY(12px) scale(.88);transition:opacity .45s,transform .7s cubic-bezier(.2,1.35,.4,1);transform-origin:50% 85%;mix-blend-mode:multiply}
.bm-scene.is-current{opacity:1;transform:translateY(0) scale(1)}
.bm-create.is-typing .bm-scene.is-current{opacity:.24;transform:translateY(4px) scale(.95)}
.bm-create.is-generating .bm-scene.is-current{opacity:.12;transform:translateY(4px) scale(.95)}
.bm-generating{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;gap:6px;opacity:0;transition:opacity .2s}
.bm-generating i{width:5px;height:5px;border-radius:50%;background:#369e9f;animation:bm-dot .8s ease-in-out infinite alternate}
.bm-generating i:nth-child(2){animation-delay:.15s}.bm-generating i:nth-child(3){animation-delay:.3s}
.bm-create.is-generating .bm-generating{opacity:1}
.bm-pop-spark{position:absolute;color:#46a5a3;opacity:0;font-size:5.4cqw;transform:scale(.3) rotate(-15deg);transition:opacity .3s,transform .6s cubic-bezier(.3,1.65,.45,1)}
.bm-pop-spark-a{top:22%;left:12%}.bm-pop-spark-b{bottom:24%;right:12%;font-size:3.67cqw;transition-delay:.1s}
.bm-create.is-revealed .bm-pop-spark{opacity:1;transform:scale(1) rotate(0)}
.bm-sprite{display:block;position:absolute;width:calc(var(--crop-scale,2.2) * 300cqh);height:calc(var(--crop-scale,2.2) * 100cqh);left:calc(50% - var(--focus-x) * var(--crop-scale,2.2) * 100cqh);top:calc(var(--crop-top) * var(--crop-scale,2.2) * -100cqh);background-repeat:no-repeat;background-size:100% 100%;background-position:0 0}
.bm-scene{--crop-scale:2.05}
.bm-sprite-flat{background-image:url('assets/motion-flat-scenes.png')}.bm-sprite-3d{background-image:url('assets/motion-3d-scenes.png')}.bm-sprite-watercolor{background-image:url('assets/motion-watercolor-scenes.png')}
.bm-scene-choices,.bm-style-choices{position:absolute;top:3%;bottom:auto;left:4%;right:4%;display:flex;justify-content:center;gap:5px;z-index:5}
.benefit-motion .bm-scene-choices>button,.benefit-motion .bm-style-choices>button{font-size:clamp(14px,4cqw,17px);line-height:1.4;min-height:32px;padding:4px 12px;border:1px solid transparent;border-radius:20px;background:transparent;color:#527675;font-weight:700;white-space:nowrap}
.benefit-motion .bm-scene-choices>button[aria-pressed=true],.benefit-motion .bm-style-choices>button[aria-pressed=true]{background:#fff;color:#08767c;border-color:#cce3dc;box-shadow:0 2px 4px #134c3d04}
.benefit-motion .bm-scene-choices>button:hover,.benefit-motion .bm-style-choices>button:hover{background:#ffffff90;color:#08767c}
.bm-trios{position:absolute;top:19%;height:78%;left:4%;right:4%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw;pointer-events:none}
.bm-style-card{background:#fff;border:1px solid #dce9e3;border-radius:7px;padding:0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 5px 10px #104b3305}
.bm-style-art{position:absolute;inset:0;opacity:0;transition:opacity .55s ease}
.bm-style-art.is-current{opacity:1}
.bm-style-card>div{position:relative;flex:1;min-height:0;width:100%;container-type:size;overflow:hidden}
.bm-style-card>span{display:block;text-align:center;font-size:clamp(13px,3.6cqw,16px);font-weight:700;line-height:1.5;margin:0;padding:5px 2px 6px;color:#426765;background:#fff}
.benefit-motion[data-running=false] *{animation-play-state:paused!important}
@keyframes bm-caret-blink{50%{opacity:0}}
@keyframes bm-dot{to{transform:translateY(-4px);opacity:.4}}
@media(max-width:1050px) and (min-width:761px){.benefit-motion .bm-pause{width:24px;height:24px;min-height:24px;top:6px;right:6px}.benefit-motion .bm-scene-choices>button,.benefit-motion .bm-style-choices>button{padding-inline:10px;min-height:32px}}
@media(max-width:760px){.benefit-motion .bm-pause{width:30px;height:30px;right:10px;top:10px}.benefit-motion .bm-scene-choices>button,.benefit-motion .bm-style-choices>button{min-height:32px;padding-inline:12px}.bm-style-card{border-radius:8px}.bm-input{border-radius:8px}}
@media(min-width:761px) and (max-width:1050px){
 .benefits{grid-template-columns:1fr;gap:40px}
 .benefits article{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;column-gap:28px;align-content:center}
 .benefits .benefit-art{grid-column:1;grid-row:1/5;align-self:center;margin-bottom:0}
 .benefits article>:not(.benefit-art){grid-column:2}
 .benefits .text-link{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.benefit-motion *{animation:none!important;transition:none!important}.bm-caret{display:none}}

/* Separate portrait scenes keep faces, documents and lunch visible together. */
.bm-worklife{position:absolute;display:block;width:150cqh;height:100cqh;top:0;left:calc(50% - (var(--worklife-panel) + .5) * 75cqh);background-size:100% 100%;background-repeat:no-repeat;clip-path:inset(0 calc((1 - var(--worklife-panel)) * 50%) 0 calc(var(--worklife-panel) * 50%))}
.bm-worklife-3d{background-image:url('assets/motion-3d-worklife-v1.png')}
.bm-worklife-flat{background-image:url('assets/motion-flat-worklife-v1.png')}
.bm-worklife-watercolor{background-image:url('assets/motion-watercolor-worklife-v1.png')}
.bm-style-card .bm-worklife{width:175.5cqh;height:117cqh;top:-1.5cqh;left:calc(50% - (var(--worklife-panel) + .5) * 87.75cqh)}