/* product mock-up of the cloud system (website + profile); every size in em so the whole piece scales from one font-size */
.dgm{position:relative;font-size:16px;padding:1.6em 2.2em 3.2em 1.4em;font-family:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;color:#14231c;text-align:start}
.dgm *{box-sizing:border-box}
.dgm .xw{position:relative;background:#fff;border-radius:1.1em;overflow:hidden;box-shadow:0 2.4em 5em -1.6em rgba(0,0,0,.6),0 0 0 .06em rgba(255,255,255,.2)}
.dgm .xbar{display:flex;align-items:center;gap:1em;height:2.5em;padding:0 1em;background:#eef2ef;border-bottom:.06em solid #e0e6e2}
.dgm .xdots{display:flex;gap:.4em}.dgm .xdots i{width:.7em;height:.7em;border-radius:50%;background:#e8a29a}.dgm .xdots i:nth-child(2){background:#e9cf7f}.dgm .xdots i:nth-child(3){background:#8fd5ae}
.dgm .xurl{flex:1;display:flex;align-items:center;gap:.5em;height:1.6em;padding:0 .8em;border-radius:1em;background:#fff;font-size:.72em;color:#5d6b64;max-width:22em;margin:0 auto}
.dgm .xurl svg{width:1.1em;height:1.1em;color:#007549;flex:none}
.dgm .xtyp b{color:#007549;font-weight:600}
.dgm .xtyp::after{content:"";display:inline-block;width:.08em;height:1em;margin-inline-start:.15em;vertical-align:-.15em;background:#007549;animation:mkblink 1s steps(1) infinite}
@keyframes mkblink{50%{opacity:0}}
.dgm .xbody{display:grid;grid-template-columns:9.2em 1fr;min-height:19em}
.dgm .xside{background:#0e2e22;padding:.9em .7em;display:flex;flex-direction:column;gap:.15em}
.dgm .xlogo{display:flex;align-items:center;gap:.45em;margin-bottom:.7em;padding-bottom:.7em;border-bottom:.06em solid rgba(255,255,255,.1)}
.dgm .xlogo img{width:1.6em;height:auto}.dgm .xlogo b{font-size:.72em;color:#fff;font-weight:600}
.dgm .xside i{font-style:normal;font-size:.66em;color:#a9c7b8;padding:.55em .7em;border-radius:.6em;white-space:nowrap}
.dgm .xside i.xon{background:rgba(127,224,178,.14);color:#fff;box-shadow:inset .25em 0 0 #e3c477}
html[dir=rtl] .dgm .xside i.xon,.dgm[dir=rtl] .xside i.xon{box-shadow:inset -.25em 0 0 #e3c477}
.dgm .xmain{padding:.9em 1em;display:flex;flex-direction:column;gap:.75em;background:#f7f9f8}
.dgm .xhd{display:flex;align-items:center;justify-content:space-between}.dgm .xhd b{font-size:.85em;color:#0e2e22}
.dgm .xav{width:1.5em;height:1.5em;border-radius:50%;background:linear-gradient(135deg,#e3c477,#b0842e)}
.dgm .xkpi{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.dgm .xkpi div{background:#fff;border-radius:.7em;padding:.6em .7em;border:.06em solid #e5ebe7}
.dgm .xkpi span{display:block;font-size:.58em;color:#7b8781;white-space:nowrap}
.dgm .xkpi b{display:block;font-size:.95em;color:#0e2e22;margin-top:.2em;white-space:nowrap;text-align:start}
.dgm .xkpi small{font-size:.6em;color:#7b8781;font-weight:500}
.dgm .xkpi div:nth-child(1) b{color:#007549}.dgm .xkpi div:nth-child(3) b{color:#b0842e}
.dgm .xchart{background:#fff;border-radius:.7em;padding:.6em .8em .5em;border:.06em solid #e5ebe7}
.dgm .xchart>span{font-size:.6em;color:#7b8781}
.dgm .xbars{display:flex;align-items:flex-end;gap:.45em;height:5.2em;margin-top:.4em;direction:ltr}
.dgm .xbars span{flex:1;height:var(--h);border-radius:.3em .3em 0 0;background:linear-gradient(180deg,#0a8a58,#007549);transform-origin:bottom;animation:mkbar 3.6s var(--d) cubic-bezier(.2,.7,.2,1) infinite}
.dgm .xbars span:nth-last-child(-n+2){background:linear-gradient(180deg,#f1d68a,#c99b3e)}
@keyframes mkbar{0%{transform:scaleY(.08)}30%,85%{transform:scaleY(1)}100%{transform:scaleY(.08)}}
.dgm .xrows{display:grid;gap:.35em}
.dgm .xr{display:grid;grid-template-columns:5.2em 1fr auto 4.6em;align-items:center;gap:.6em;background:#fff;border-radius:.55em;padding:.42em .7em;border:.06em solid #edf1ee;font-size:.62em}
.dgm .xr b{color:#0e2e22;font-weight:600}.dgm .xr span{color:#5d6b64;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dgm .xr em{font-style:normal;color:#0e2e22;font-weight:600}
.dgm .xr u{text-decoration:none;text-align:center;font-size:.9em;padding:.25em .4em;border-radius:1em;white-space:nowrap}
.dgm .xok{background:#e2f1e9;color:#007549}.dgm .xq{background:#eef0fb;color:#3f51a3}.dgm .xrc{background:#faf1dc;color:#8a6417}
.dgm .xinv{position:absolute;bottom:.4em;inset-inline-start:-.6em;width:12.5em;background:#fff;border-radius:.9em;padding:.9em;box-shadow:0 1.6em 3em -1em rgba(0,0,0,.55);display:grid;gap:.45em;animation:mkfloat 6s ease-in-out infinite}
.dgm .xih{display:flex;align-items:center;gap:.5em;padding-bottom:.45em;border-bottom:.12em solid #007549}
.dgm .xih img{width:1.6em;height:auto}.dgm .xih b{display:block;font-size:.8em;color:#0e2e22}.dgm .xih small{display:block;font-size:.58em;color:#7b8781}
.dgm .xinv .xl{display:block;height:.35em;border-radius:1em;background:#e5ebe7}.dgm .xinv .xl.xs{width:70%}
.dgm .xit{display:flex;justify-content:space-between;align-items:center;background:#007549;color:#fff;border-radius:.5em;padding:.4em .6em;font-size:.66em}
.dgm .xif{display:flex;align-items:center;justify-content:space-between}
.dgm .xqr{display:grid;grid-template-columns:repeat(7,.38em);grid-auto-rows:.38em;padding:.25em;background:#fff;border:.06em solid #dfe5e1;border-radius:.3em}
.dgm .xqr i{background:#0e2e22}.dgm .xqr s{text-decoration:none}
.dgm .xpaid{display:inline-flex;align-items:center;gap:.3em;font-size:.62em;font-weight:600;color:#007549;border:.14em solid #007549;border-radius:.5em;padding:.25em .55em;transform:rotate(-8deg)}
.dgm .xpaid svg{width:1.2em;height:1.2em}
.dgm .xchip{position:absolute;display:flex;align-items:center;gap:.5em;background:rgba(255,255,255,.96);color:#0e2e22;border-radius:2em;padding:.5em .9em;font-size:.72em;font-weight:600;white-space:nowrap;box-shadow:0 1em 2em -1em rgba(0,0,0,.5);animation:mkfloat 7s ease-in-out infinite}
.dgm .xchip svg{width:1.4em;height:1.4em;color:#007549}
.dgm .xchip.xc1{top:.2em;inset-inline-end:.6em;animation-delay:-2s}
.dgm .xchip.xc2{bottom:4.6em;inset-inline-end:-.4em;animation-delay:-4s}.dgm .xchip.xc2 svg{color:#b0842e}
@keyframes mkfloat{50%{transform:translateY(-.5em)}}
@media (prefers-reduced-motion:reduce){.dgm *{animation:none!important}}
.dgm em{font-style:normal}
.dgm .xqr i,.dgm .xqr s{display:block}
.dgm .xinv{inset-inline-start:auto;inset-inline-end:-.8em;bottom:-.2em}
.dgm .xchip.xc2{inset-inline-end:auto;inset-inline-start:-.6em;bottom:3.4em}
.dgm .xchip.xc1{inset-inline-end:auto;inset-inline-start:1.4em}
.dgm{padding:2em 1.6em 3.4em}