.connect-motion{color:#17353c;background:#f7f6f0;border:1px solid #dce2db;border-radius:20px;margin:32px 0 0;overflow:hidden}.cm-steps{border-bottom:1px solid #dce2db;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:24px 30px;list-style:none;display:grid}.cm-steps li{font-size:13px;font-weight:600;line-height:1.5}.cm-steps li>span{color:#078c99;margin-bottom:4px;font:11px monospace;display:block}.cm-browser{background:#f0f1e9;border:1px solid #bdceca;border-radius:14px;margin:32px;overflow:hidden;box-shadow:0 18px 35px -30px #163b3e77}.cm-toolbar{color:#527270;background:#fffefa;border-bottom:1px solid #d5dfd9;align-items:center;gap:20px;height:45px;padding:0 20px;display:flex}.cm-dots{letter-spacing:4px;color:#9db8af;font-size:9px}.cm-address{background:#edf1e9;border-radius:6px;flex:1;padding:6px 12px;font-size:11px}.cm-toolbar>svg{color:#078c99}.cm-workspace{grid-template-columns:minmax(0,1fr) 65px 310px;align-items:center;gap:0;padding:30px;display:grid}.cm-record{min-width:0;padding-right:20px}.cm-eyebrow{letter-spacing:.06em;color:#527270;font:10px monospace}.cm-record h3{margin:12px 0;font-size:27px;font-weight:600}.cm-record p{color:#536b6e;max-width:320px;font-size:13px;line-height:1.7}.cm-customer{align-items:center;gap:12px;margin-top:27px;display:flex}.cm-avatar{color:#245d57;background:#dcece4;border-radius:50%;place-items:center;width:40px;height:40px;font-size:12px;display:grid}.cm-customer strong{font-size:14px}.cm-customer small{color:#536b6e;margin-top:3px;font-size:11px;display:block}.cm-number{color:#245d57;background:#fffefa;border:1px solid #bfd3cd;border-radius:7px;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding:12px;font:13px monospace;display:flex}.cm-order{border-bottom:1px solid #d7dfd5;justify-content:space-between;align-items:center;gap:14px;padding:17px 0;font-size:12px;line-height:1.6;display:flex}.cm-order b{font:12px monospace}.cm-skeleton{gap:10px;padding-top:20px;display:grid}.cm-skeleton i{background:#dde3d9;border-radius:4px;width:85%;height:6px}.cm-skeleton i:nth-child(2){width:65%}.cm-skeleton i:nth-child(3){width:45%}.cm-bridge{background:#a2c3b9;height:1px;position:relative}.cm-bridge>span{color:#fff;opacity:0;background:#17353c;border-radius:9px;place-items:center;width:32px;height:32px;display:grid;position:absolute;top:-16px;left:0}.cm-extension{background:#fffefa;border:1px solid #b6ccc6;border-radius:12px;position:relative;overflow:hidden;box-shadow:0 14px 32px -20px #163b3e55}.cm-brand{border-bottom:1px solid #e0e7de;align-items:center;gap:8px;padding:18px 16px;display:flex}.cm-brand>span{color:#fff;background:#078c99;border-radius:7px;padding:6px;display:flex}.cm-brand strong{font-size:12px}.cm-brand>svg{color:#078c99;margin-left:auto}.cm-tabs{color:#657975;border-bottom:1px solid #e0e7de;gap:22px;padding:14px 18px;font-size:11px;display:flex}.cm-tabs b{color:#078c99;border-bottom:2px solid #078c99;padding-bottom:6px}.cm-compose{padding:16px 18px 8px}.cm-compose label{margin-bottom:7px;font-size:11px;font-weight:600;display:block}.cm-field{border:1px solid #cad8ce;border-radius:7px;min-height:38px;margin-bottom:17px;font-size:12px;display:flex;overflow:hidden}.cm-field>span{background:#eef3eb;border-right:1px solid #cad8ce;padding:10px}.cm-field b{color:#0000;padding:10px;font-weight:400}.cm-message{border:1px solid #cad8ce;border-radius:7px;min-height:95px;padding:10px;font-size:12px;line-height:1.7}.cm-message>span{opacity:0}.cm-send{color:#fff;background:#078c99;border-radius:7px;justify-content:center;align-items:center;gap:6px;margin-top:14px;padding:12px;font-size:12px;font-weight:600;display:flex}.cm-accepted{color:#23724c;opacity:0;justify-content:center;align-items:center;gap:5px;min-height:18px;margin-top:12px;font-size:11px;display:flex}.cm-history{opacity:0;background:#fffefa;padding:25px 18px;position:absolute;inset:101px 0 0}.cm-history>div{border-block:1px solid #dce4da;gap:12px;margin-top:20px;padding:14px 0;font-size:11px;display:grid}.cm-history b{color:#23724c;align-items:center;gap:5px;font-size:11px;display:flex}.cm-history p{color:#536b6e;margin-top:16px;font-size:12px;line-height:1.7}.connect-motion figcaption{color:#536b6e;border-top:1px solid #dce2db;padding:17px 30px;font-size:12px;line-height:1.7}.connect-motion[data-running=true] .cm-number{animation:18s infinite cm-copy}.connect-motion[data-running=true] .cm-bridge>span{animation:18s infinite cm-envelope}.connect-motion[data-running=true] .cm-to{animation:18s infinite cm-destination}.connect-motion[data-running=true] .cm-message>span{animation:18s infinite cm-message}.connect-motion[data-running=true] .cm-accepted{animation:18s infinite cm-accepted}.connect-motion[data-running=true] .cm-history{animation:18s infinite cm-history}@keyframes cm-copy{0%,5%,25%,to{background:#fffefa}10%,20%{background:#d8f0e8}}@keyframes cm-envelope{0%,10%{opacity:0;left:0}15%{opacity:1}26%{opacity:1;left:calc(100% - 32px)}30%,to{opacity:0;left:calc(100% - 32px)}}@keyframes cm-destination{0%,23%,to{color:#0000}28%,94%{color:#17353c}}@keyframes cm-message{0%,30%,to{opacity:0}40%,94%{opacity:1}}@keyframes cm-accepted{0%,55%,to{opacity:0}61%,94%{opacity:1}}@keyframes cm-history{0%,73%,to{opacity:0}79%,94%{opacity:1}}@media (max-width:900px){.cm-workspace{grid-template-columns:minmax(0,1fr) 35px 280px;padding:22px}.cm-record{padding-right:10px}.cm-browser{margin:22px}}@media (max-width:650px){.cm-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px}.cm-browser{margin:16px}.cm-toolbar{gap:10px;padding:0 12px}.cm-dots{display:none}.cm-workspace{grid-template-columns:minmax(0,1fr);padding:18px}.cm-record{padding:0}.cm-record h3{font-size:23px}.cm-skeleton{display:none}.cm-extension{justify-self:center;width:100%;max-width:310px}.cm-bridge{justify-self:center;width:1px;height:45px}.cm-bridge>span{top:0;left:-15px}.connect-motion[data-running=true] .cm-bridge>span{animation:18s infinite cm-envelope-mobile}.connect-motion figcaption{padding:16px 20px}.cm-brand{padding:14px 12px}.cm-brand strong{font-size:11px}.cm-tabs{gap:16px}.cm-number{font-size:11px}}@keyframes cm-envelope-mobile{0%,10%{opacity:0;top:0}15%{opacity:1}26%{opacity:1;top:13px}30%,to{opacity:0;top:13px}}@media (prefers-reduced-motion:reduce){.connect-motion *{animation:none!important}.cm-to{color:#17353c}.cm-message>span,.cm-accepted{opacity:1}}
