/* A calm thought cloud: room for the words, a clear path to the hero. */
.demo-bubble,.result-bubble.cloud237{background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 140' preserveAspectRatio='none'%3E%3Cpath fill='%23efe2ff' d='M45 22C25 13 8 29 15 46C-1 60 8 82 26 84C13 106 36 124 60 118C83 139 110 128 127 120C149 140 179 132 195 119C223 134 253 123 255 105C288 109 305 89 288 71C308 53 285 31 263 34C252 13 223 10 201 19C180 0 153 8 138 19C114 5 89 11 77 22C64 15 55 17 45 22Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(0 9px 13px #30203b20);border-radius:0;top:8%;left:4%;right:auto;width:max-content;max-width:64%;min-width:150px;padding:23px 28px 25px;line-height:1.4;font-size:clamp(12px,1.2vw,16px);font-weight:400;animation:cloud237-drift 6.5s ease-in-out infinite;overflow-wrap:anywhere;text-wrap:pretty;color:#45305b}
.demo-bubble:before,.demo-bubble:after,.cloud237:before,.cloud237:after{content:'';position:absolute;background:#efe2ff;border-radius:50%;clip-path:none;box-shadow:none;transform:none;top:auto;left:auto}
.demo-bubble:after,.cloud237:after{width:11px;height:9px;right:13px;bottom:-8px}
.demo-bubble:before,.cloud237:before{width:5px;height:5px;right:1px;bottom:-20px}
.mask-demo .demo-bubble{font-size:clamp(12px,1.2vw,16px);padding:23px 28px 25px}
.mask-demo-interactive .demo-bubble{max-width:64%}
.mask-demo>label{padding:23px 18px 17px;z-index:3}
.mask-demo input{min-height:44px;line-height:1.35;margin-bottom:0}
.split-grid .lead+.button{margin-top:26px}
.button.outline237{color:#4e3668;background:transparent;border:1px solid #9b82b35c;box-shadow:none}
.button.outline237:hover{background:#eee7f8;border-color:#9478b5}
.magic-hero>.actions{justify-content:center;gap:18px}
.magic-workflow237{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,70px);align-items:start;max-width:1080px;margin:42px auto 0}
.magic-workflow237 .phone{width:100%;max-width:300px;margin-inline:auto}
.magic-workflow237 .phone:nth-child(2){margin-top:35px}
.magic-workflow237 .phone figcaption{font-size:12px;line-height:1.5;color:#71677b;margin-top:20px}
.magic-hero .playground-controls{gap:12px}
.magic-hero .scene-button{min-height:52px}
.magic-hero .scene-button.selected{background:#6e439d;color:#fff;box-shadow:0 5px 16px #4b2c6a12}
.video-audio-note{font-size:12px;color:#bdb0cc;text-align:center;margin:0 20px 20px}
.result-bubble.cloud237{font-size:clamp(11px,1vw,15px);max-width:62%;min-width:135px;z-index:2}
@keyframes cloud237-drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(.5deg)}}
@media(max-width:800px){.magic-workflow237{gap:26px}.magic-workflow237 .phone figcaption{font-size:10px}.magic-hero .scene-button{flex:1 1 40%}.magic-hero .playground-controls>.small{display:none}}
@media(max-width:560px){.magic-workflow237{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding:8px 8px 25px;gap:25px;margin:30px -8px 0;scrollbar-width:none}.magic-workflow237 .phone{flex:0 0 78%;max-width:285px;scroll-snap-align:center;margin:0}.magic-workflow237 .phone:nth-child(2){margin-top:0}.magic-workflow237 .phone figcaption{font-size:11px}.mask-demo .demo-bubble{padding:20px 22px 22px;min-width:130px;max-width:64%;font-size:12px}.demo-bubble:after,.cloud237:after{right:10px;width:9px;height:8px;bottom:-7px}.demo-bubble:before,.cloud237:before{right:0;bottom:-17px}.magic-hero .actions{gap:14px}.magic-hero .actions>.button{font-size:12px;min-height:46px}.magic-hero .playground-controls{gap:9px}.magic-hero .scene-button{padding:11px 10px;font-size:10px}.magic-source,.magic-live-result{height:310px}.result-bubble.cloud237{padding:18px 19px;min-width:0;font-size:10px;max-width:80%;left:2%;top:5%}.business-hero>.actions>.button{width:auto;min-height:46px}.split-grid .lead+.button{margin-top:23px}}
@media(prefers-reduced-motion:reduce){.demo-bubble,.result-bubble.cloud237{animation:none}}

/* Keep the face clear even when a longer thought wraps onto four lines. */
.mask-demo .demo-bubble{top:2.5%;left:3%;max-width:58%;min-width:145px;padding:22px 25px 24px;font-size:13px;z-index:2}
.mask-demo .demo-bubble:before,.mask-demo .demo-bubble:after{display:none}
.thought-trail237{position:absolute;inset:0;width:100%;height:100%;fill:#efe2ff;pointer-events:none;z-index:1;animation:cloud237-drift 6.5s ease-in-out infinite}
@media(max-width:560px){.mask-demo .demo-bubble{max-width:59%;min-width:128px;font-size:12px;padding:20px 22px 22px}}
@media(prefers-reduced-motion:reduce){.thought-trail237{animation:none}}

.magic-source img{object-position:68% 50%}
@media(max-width:560px){.magic-source,.magic-live-result{height:260px}.magic-hero .scene-button{flex:1 1 28%;font-size:11px}.magic-hero .scene-button .icon{width:14px;height:14px}}