/* cg-mb v3: Meatball placements for cargado.com. v3: the wrapper is out of flow at 0,0 with a fixed box; mb-v3.js moves
   and sizes it with transform only, and the entrance is an opacity fade, so a figure never causes layout shift. Everything is scoped to .cg-mb. English pages only (the JS and the
   embeds' locale guard stop on /es-mx and /fr-ca). Image URLs were filled with their CDN URLs at upload. */
.cg-mb{--f-head:var(--_typography---font-styles--heading,"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif);--f-body:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;--mb-ink:#0F204B;--mb-sky:#38BDF8;position:absolute;left:0;top:0;transform-origin:0 0;z-index:6;margin:0;padding:0;pointer-events:none;box-sizing:border-box;line-height:0}
.cg-mb[hidden]{display:none}
.cg-mb .cg-mb-img{display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;object-fit:contain;object-position:bottom}
.cg-mb.is-on{animation:cgMbIn .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes cgMbIn{from{opacity:0}to{opacity:1}}

/* Speech bubble (home only; copy is the prototype's, verbatim). Tail points down at his head. */
.cg-mb .cg-mb-say{position:absolute;left:2px;bottom:calc(100% + 18px * var(--mb-inv,1));scale:var(--mb-inv,1);transform-origin:0 100%;box-sizing:border-box;width:158px;margin:0;padding:10px 12px 11px;display:grid;gap:3px;text-align:left;line-height:normal;background:#fff;border:3px solid var(--mb-ink);border-radius:20px;rotate:2deg;filter:drop-shadow(4px 4px 0 var(--mb-sky))}
.cg-mb .cg-mb-say b{font:600 15px/1.15 var(--f-head);letter-spacing:-.015em;color:var(--mb-ink)}
.cg-mb .cg-mb-say span{font:500 12px/1.35 var(--f-body);color:#3F4A66}
.cg-mb .cg-mb-tail{position:absolute;left:40px;top:calc(100% - 3px);width:30px;height:26px;overflow:visible}
.cg-mb.is-on .cg-mb-say{animation:cgMbPop .4s cubic-bezier(.3,1.5,.5,1) .35s both}
@keyframes cgMbPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* Inline (in-flow) figure: the 404 page. The number sits on his blank card. */
/* (v3: the inline figure is positioned like the others, over the target image's own box.) */
.cg-mb .cg-mb-card{position:absolute;left:var(--card-l,6%);top:var(--card-t,42.5%);width:var(--card-w,55%);height:var(--card-h,21.5%);display:flex;align-items:center;justify-content:center;rotate:var(--card-rot,0deg);font:600 clamp(26px,4vw,40px)/1 var(--f-head);letter-spacing:-.02em;color:var(--mb-ink)}
img.cg-mb-replaced{display:none!important}
img.cg-mb-covered{visibility:hidden!important}

/* Phones: only placements that carry a small phone version (data-p-w) may float; mb-v3.js sizes and checks them.
   The rest stay hidden; the inline 404 figure covers its image at every width. A small figure never carries the speech bubble. */
@media (max-width:767px){
  .cg-mb:not(.cg-mb--inline):not([data-p-w]){display:none!important}
}
.cg-mb.cg-mb--small .cg-mb-say{display:none}
/* Optional second pose for the small version: shown only while small; the main pose hides then. */
.cg-mb .cg-mb-img.cg-mb-img--p{display:none}
.cg-mb.cg-mb--small.cg-mb--has-p .cg-mb-img{display:none}
.cg-mb.cg-mb--small.cg-mb--has-p .cg-mb-img.cg-mb-img--p{display:block}
@media (prefers-reduced-motion:reduce){
  .cg-mb.is-on,.cg-mb.is-on .cg-mb-say{animation:none}
}

/* Form success (CSS-only): a thumbs-up Meatball above HubSpot's inline thank-you message on English pages. */
html[lang^="en"] #cg-bts-form .submitted-message::before,
html[lang^="en"] .bts-form .submitted-message::before,
html[lang^="en"] .bt-close .submitted-message::before,
html[lang^="en"] .submitted-message[class*="hs-form-"]::before,
html[lang^="en"] .hbspt-form .submitted-message::before{content:"";display:block;width:56px;height:130px;margin:0 auto 12px;background:url("https://cdn.prod.website-files.com/68f656dee991ae15a5cbb747/6ac72b97de59fb6449aab088_cg-mb-thumbs%401x.webp") center bottom/contain no-repeat;background-image:-webkit-image-set(url("https://cdn.prod.website-files.com/68f656dee991ae15a5cbb747/6ac72b97de59fb6449aab088_cg-mb-thumbs%401x.webp") 1x,url("https://cdn.prod.website-files.com/68f656dee991ae15a5cbb747/6ac72b983c984d02569cf0e9_cg-mb-thumbs%402x.webp") 2x);background-image:image-set(url("https://cdn.prod.website-files.com/68f656dee991ae15a5cbb747/6ac72b97de59fb6449aab088_cg-mb-thumbs%401x.webp") 1x,url("https://cdn.prod.website-files.com/68f656dee991ae15a5cbb747/6ac72b983c984d02569cf0e9_cg-mb-thumbs%402x.webp") 2x)}
