/* real-estate-crm bespoke card illustrations */
.crm-w{display:flex;align-items:center;justify-content:center;gap:14px;font-size:11.5px;font-weight:600;line-height:1.2;color:#0F172A;white-space:nowrap}
.mv .crm-w b,.mv .crm-w i,.mv .crm-w em,.mv .crm-w u,.mv .crm-cal b,.mv .crm-cal i,.mv .crm-cal u{font-style:normal;font-weight:600;text-decoration:none}
.crm-s{background:#fff;border-radius:10px;box-shadow:0 0 0 1px #E7E2D8,0 4px 12px rgba(15,23,42,.06)}
/* 1 conveyor */
.crm-belt{position:relative;width:196px;height:44px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%);mask-image:linear-gradient(90deg,transparent,#000 16%)}
.crm-bl{position:absolute;left:0;right:0;bottom:3px;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--sx-b) 0 6px,transparent 6px 12px);opacity:.7;animation:crmk-march 2.6s linear infinite}
.crm-ch{position:absolute;left:0;top:3px;display:flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 9px;border-radius:9px;animation:crmk-belt 4.5s linear infinite}
.crm-ch u{width:8px;height:8px;border-radius:50%}
.crm-c2{animation-delay:-1.5s}.crm-c3{animation-delay:-3s}
.crm-tray{position:relative;width:62px;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px;animation:crmk-bump 1.5s ease-in-out infinite}
.crm-bd{position:absolute;top:-7px;right:-8px;padding:2px 6px;border-radius:99px;background:var(--sx-a);color:#fff;font-size:10.5px;animation:crmk-bdg 1.5s ease-out infinite}
@keyframes crmk-march{to{background-position-x:48px}}
@keyframes crmk-belt{0%{transform:translateX(-84px);opacity:0}14%{opacity:1}84%{transform:translateX(112px) scale(1);opacity:1}100%{transform:translateX(158px) scale(.6);opacity:0}}
@keyframes crmk-bump{0%,80%,100%{transform:scale(1)}92%{transform:scale(1.07)}}
@keyframes crmk-bdg{0%,58%{opacity:0;transform:translateY(5px) scale(.7)}78%{opacity:1;transform:none}96%{opacity:1}100%{opacity:0}}
/* 2 typewriter + stamp */
.crm-cv{flex-direction:column;align-items:stretch;gap:6px;width:218px}
.crm-bb{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:12px;width:max-content;max-width:100%}
.crm-bi{border-bottom-left-radius:4px;animation:crmk-bin 6.4s ease-out infinite}
.crm-bo{align-self:flex-end;background:var(--sx-a);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 12px rgba(79,70,229,.25);animation:crmk-bout 6.4s ease-out infinite}
.crm-ai{padding:1px 5px;border-radius:5px;background:rgba(255,255,255,.22);font-size:10.5px}
.crm-ty{display:inline-block;animation:crmk-type 6.4s linear infinite}
.crm-bk{align-self:center;padding:4px 10px;border-radius:8px;background:#DCFCE7;color:#166534;box-shadow:0 0 0 1.5px #166534;transform:rotate(-4deg);animation:crmk-stamp 6.4s ease-out infinite}
@keyframes crmk-bin{0%{opacity:0;transform:translateY(6px)}6%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes crmk-bout{0%,12%{opacity:0;transform:translateY(6px)}18%,94%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes crmk-type{0%,19%{clip-path:inset(0 100% 0 0)}19.1%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(15,end)}48%,100%{clip-path:inset(0 0 0 0)}}
@keyframes crmk-stamp{0%,58%{opacity:0;transform:rotate(-12deg) scale(2.2)}64%{opacity:1;transform:rotate(-4deg) scale(.9)}70%{transform:rotate(-4deg) scale(1.07)}76%,94%{opacity:1;transform:rotate(-4deg) scale(1)}99%,100%{opacity:0;transform:rotate(-4deg) scale(1)}}
/* 3 odometer */
.crm-sc{gap:8px;animation:crmk-fade 6s ease-in-out infinite}
.crm-ld{padding:9px 11px;display:flex;flex-direction:column;gap:8px}
.crm-lh{display:flex;align-items:center;gap:7px}
.crm-av{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--sx-t);color:var(--sx-a);font-size:10.5px}
.crm-sr{display:flex;align-items:center;gap:2px}
.crm-od{width:15px;height:24px;overflow:hidden;border-radius:4px;background:var(--sx-t)}
.crm-dg{display:flex;flex-direction:column;transform:translateY(-198px);animation:crmk-r1 6s infinite}
.crm-d2{transform:translateY(-288px);animation-name:crmk-r2}
.crm-dg u{height:24px;line-height:24px;text-align:center;font-size:18px;font-weight:700;color:var(--sx-a);text-decoration:none}
.crm-hot{margin-left:6px;padding:3px 8px;border-radius:99px;background:#FEE2E2;color:#991B1B;font-size:10.5px;animation:crmk-hot 6s infinite}
.crm-cn{position:relative;width:34px;height:2px;background:repeating-linear-gradient(90deg,#C9A45C 0 4px,transparent 4px 8px)}
.crm-tv{position:absolute;left:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--sx-a);transform:translateX(32px);animation:crmk-tv 6s infinite}
.crm-ags{display:flex;flex-direction:column;gap:6px}
.crm-ag{position:relative;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1px #E7E2D8;color:#475569;font-size:10.5px}
.crm-pk{color:var(--sx-a)}
.crm-pk em{position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 2px var(--sx-a);animation:crmk-ring 6s infinite}
.crm-pk b{position:absolute;right:-5px;bottom:-4px;width:13px;height:13px;border-radius:50%;background:#166534;color:#fff;font-size:8px;display:grid;place-items:center;animation:crmk-hot 6s infinite}
@keyframes crmk-fade{0%{opacity:0}5%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes crmk-r1{0%,8%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,.7,.2,1)}44%,98%{transform:translateY(-198px)}100%{transform:translateY(0)}}
@keyframes crmk-r2{0%,8%{transform:translateY(0);animation-timing-function:cubic-bezier(.3,.7,.2,1)}52%,98%{transform:translateY(-288px)}100%{transform:translateY(0)}}
@keyframes crmk-hot{0%,52%{opacity:0;transform:scale(.4)}58%{opacity:1;transform:scale(1.2)}64%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes crmk-tv{0%,60%{opacity:0;transform:translateX(-3px)}64%{opacity:1}74%{opacity:1;transform:translateX(32px)}78%,100%{opacity:0;transform:translateX(32px)}}
@keyframes crmk-ring{0%,74%{opacity:0;transform:scale(.7)}82%{opacity:1;transform:scale(1.1)}88%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
/* 4 now line */
.crm-cal{padding:8px 8px 8px;display:flex;flex-direction:column;gap:6px}
.crm-hr{display:flex;width:240px}
.crm-hr i{width:48px;font-size:10.5px;color:#64748B;font-weight:600}
.crm-tl{position:relative;width:240px;height:82px;background:repeating-linear-gradient(90deg,#E7E2D8 0 1px,transparent 1px 48px)}
.crm-vb{position:absolute;width:64px;height:24px;border-radius:7px;background:var(--sx-t);box-shadow:0 0 0 1px #C7D2FE;overflow:hidden;font-size:10.5px;display:flex;align-items:center;padding-left:7px}
.crm-k1{left:10px;top:2px}.crm-k2{left:90px;top:30px}.crm-k3{left:168px;top:56px}
.crm-fl{position:absolute;inset:0;background:#DCFCE7;transform-origin:left;animation:crmk-fill 7s ease-in-out infinite;animation-delay:.53s}
.crm-vb span{position:relative}
.crm-ck{position:absolute;right:5px;color:#166534;font-size:11px;animation:crmk-ck 7s infinite;animation-delay:.53s}
.crm-k2 .crm-fl,.crm-k2 .crm-ck{animation-delay:2.53s}.crm-k3 .crm-fl,.crm-k3 .crm-ck{animation-delay:4.49s}
.crm-nl{position:absolute;left:0;top:-3px;bottom:0;width:2px;background:var(--sx-a);opacity:0;animation:crmk-now 7s linear infinite}
.crm-nl::before{content:"";position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--sx-a)}
@keyframes crmk-now{0%{transform:translateX(0);opacity:0}4%{transform:translateX(0);opacity:1}90%{transform:translateX(238px);opacity:1}96%,100%{transform:translateX(238px);opacity:0}}
@keyframes crmk-fill{0%{transform:scaleX(0)}23%,94%{transform:scaleX(1);opacity:1}99%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes crmk-ck{0%,21%{opacity:0;transform:scale(.4)}28%{opacity:1;transform:scale(1.25)}33%,94%{opacity:1;transform:scale(1)}99%,100%{opacity:0}}
/* 5 path draw + sonar */
.crm-ls{width:106px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;position:relative;z-index:1}
.crm-hp{stroke-dasharray:1;animation:crmk-draw 6s ease-in-out infinite}
.crm-q{padding:2px 8px;border-radius:99px;background:#DCFCE7;color:#166534;font-size:10.5px;animation:crmk-qp 6s infinite}
.crm-rd{position:relative;width:30px;height:30px;display:grid;place-items:center}
.crm-rg{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--sx-a);opacity:.3;transform:scale(1.5);animation:crmk-sonar 3.2s ease-out infinite}
.crm-r2{animation-delay:-1.07s}.crm-r3{animation-delay:-2.13s}
.crm-nd{width:9px;height:9px;border-radius:50%;background:var(--sx-a);box-shadow:0 0 0 3px var(--sx-t)}
.crm-pt{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
.crm-pc{display:flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:9px;font-size:11px}
.crm-lv{width:7px;height:7px;border-radius:50%;background:#16A34A;animation:crmk-live 3.2s ease-in-out infinite;animation-delay:.5s}
.crm-v2{animation-delay:1.2s}.crm-v3{animation-delay:1.9s}
@keyframes crmk-draw{0%{stroke-dashoffset:1;opacity:1}32%,92%{stroke-dashoffset:0;opacity:1}98%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes crmk-qp{0%,32%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.1)}46%,92%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes crmk-sonar{0%{transform:scale(.3);opacity:.8}100%{transform:scale(2.5);opacity:0}}
@keyframes crmk-live{0%,100%{opacity:.35;transform:scale(.85)}30%{opacity:1;transform:scale(1.35)}}
/* 6 snapping stages + liquid */
.crm-dl{gap:20px}
.crm-st{display:flex;flex-direction:column;gap:9px}
.crm-sh{font-size:11px;color:#475569}
.crm-ns{position:relative;display:flex}
.crm-tk{position:absolute;left:21px;right:21px;top:5px;height:3px;border-radius:2px;background:#E7E2D8;overflow:hidden}
.crm-pg{position:absolute;inset:0;background:var(--sx-a);transform-origin:left;animation:crmk-prog 6.5s infinite}
.crm-sn{position:relative;width:42px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;color:#475569}
.crm-no{width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #C7D2FE}
.crm-no u{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background:var(--sx-a)}
.crm-n2{animation:crmk-n2 6.5s infinite}.crm-n3{animation:crmk-n3 6.5s infinite}.crm-n4{animation:crmk-n4 6.5s infinite}
.crm-jc{display:flex;flex-direction:column;align-items:center;gap:6px}
.crm-jar{position:relative;width:62px;height:62px;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.crm-lq{position:absolute;inset:0;transform:translateY(22%);animation:crmk-lvl 6.5s infinite}
.crm-wv{position:absolute;left:-35%;top:0;width:170%;height:170%;border-radius:40%;background:rgba(129,140,248,.5);animation:crmk-spin 5s linear infinite}
.crm-w2{background:rgba(79,70,229,.28);animation-duration:7s;animation-direction:reverse}
.crm-jar b{position:relative;font-size:12.5px}
.crm-cl{font-size:10.5px;color:#64748B}
@keyframes crmk-prog{0%,12%{transform:scaleX(0)}20%,34%{transform:scaleX(.333)}42%,56%{transform:scaleX(.667)}64%,92%{transform:scaleX(1);opacity:1}99%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes crmk-n2{0%,18%{transform:scale(0)}24%{transform:scale(1.4)}28%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes crmk-n3{0%,40%{transform:scale(0)}46%{transform:scale(1.4)}50%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes crmk-n4{0%,62%{transform:scale(0)}68%{transform:scale(1.4)}72%,92%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes crmk-lvl{0%,12%{transform:translateY(90%)}22%,34%{transform:translateY(62%)}44%,56%{transform:translateY(42%)}66%,92%{transform:translateY(22%)}100%{transform:translateY(90%)}}
@keyframes crmk-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
.crm-bl,.crm-ch,.crm-tray,.crm-bd,.crm-bi,.crm-bo,.crm-ty,.crm-bk,.crm-sc,.crm-dg,.crm-hot,.crm-tv,.crm-pk em,.crm-pk b,.crm-fl,.crm-ck,.crm-nl,.crm-hp,.crm-q,.crm-rg,.crm-lv,.crm-pg,.crm-no u,.crm-lq,.crm-wv{animation:none!important}
.crm-c1{transform:translateX(100px)}.crm-c2{transform:translateX(8px)}.crm-c3{display:none}
.crm-bd,.crm-tv,.crm-nl{opacity:0}.crm-d1{transform:translateY(-198px)}.crm-d2{transform:translateY(-288px)}
.crm-hp{stroke-dashoffset:0}.crm-rg{opacity:.25;transform:scale(1.5)}
}