/* Small editorial illustrations: each motion explains its capability. */
#capabilities .cap-row{grid-template-columns:32px 156px minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;padding:30px 0;transition:background .3s}
#capabilities .cap-row:hover{padding-left:0;background:transparent}
#capabilities .cap-num{align-self:start;padding-top:16px}
#capabilities .cap-row h3{font-size:25px;line-height:1.25}
#capabilities .cap-row p{font-size:15px;line-height:1.7;grid-column:auto;margin:0}
.cap-art{width:156px;aspect-ratio:10/7;background:#F7F5FC;transition:background .35s;overflow:hidden}
.cap-art svg{width:100%;height:100%;display:block;overflow:visible}
.cap-row:hover .cap-art{background:#F0EBFC}
.cap-art .motion-piece{animation-duration:4.5s;animation-timing-function:cubic-bezier(.45,0,.2,1);animation-iteration-count:1;animation-fill-mode:both;animation-play-state:paused;transform-box:fill-box;transform-origin:center}
#capabilities .cap-row[data-in-view="true"] .motion-piece{animation-play-state:running}
.brief-back{animation-name:briefBack}
.brief-front{animation-name:briefFront}
.brief-check{animation-name:briefCheck}
.app-content{animation-name:appContent;animation-delay:0s}
.app-phone{animation-name:appPhone;animation-delay:0s}
.workflow-path{animation-name:workflowPath;animation-timing-function:linear!important;animation-delay:0s}
.workflow-core{animation-name:workflowCore;animation-delay:0s}
.workflow-in{animation-name:workflowIn;animation-delay:0s}
.workflow-out{animation-name:workflowOut;animation-delay:0s}
.module-one{animation-name:moduleOne;animation-delay:0s}
.module-two{animation-name:moduleTwo;animation-delay:0s}
.module-three{animation-name:moduleThree;animation-delay:0s}
.module-four{animation-name:moduleFour;animation-delay:0s}
@keyframes briefBack{0%,100%{transform:translate(-7px,3px) rotate(-9deg)}40%,70%{transform:translate(0,0) rotate(-3deg)}}
@keyframes briefFront{0%,100%{transform:translate(3px,-2px) rotate(5deg)}40%,70%{transform:translate(0,0) rotate(0)}}
@keyframes briefCheck{0%,15%,100%{transform:scale(.85);opacity:.45}40%,80%{transform:scale(1);opacity:1}}
@keyframes appContent{0%,100%{transform:translateY(3px);opacity:.6}35%,75%{transform:translateY(0);opacity:1}}
@keyframes appPhone{0%,100%{transform:translate(6px,2px)}40%,70%{transform:translate(-3px,-6px)}}
@keyframes workflowPath{0%{stroke-dashoffset:20}70%,100%{stroke-dashoffset:-140}}
@keyframes workflowCore{0%,20%{transform:rotate(0)}65%,100%{transform:rotate(90deg)}}
@keyframes workflowIn{0%,100%{transform:translateX(-3px)}40%,70%{transform:translateX(3px)}}
@keyframes workflowOut{0%,20%,100%{opacity:.45;transform:translateX(-3px)}60%,85%{opacity:1;transform:translateX(2px)}}
@keyframes moduleOne{0%,100%{transform:translate(-7px,-4px) rotate(-8deg)}40%,70%{transform:none}}
@keyframes moduleTwo{0%,100%{transform:translate(6px,-6px) rotate(6deg)}45%,70%{transform:none}}
@keyframes moduleThree{0%,100%{transform:translate(-5px,7px) rotate(5deg)}50%,70%{transform:none}}
@keyframes moduleFour{0%,100%{transform:translate(7px,5px) rotate(-5deg)}55%,70%{transform:none}}
@media(min-width:1500px){#capabilities .cap-row{grid-template-columns:36px 184px minmax(0,1fr) minmax(0,1fr);gap:36px}.cap-art{width:184px}}
@media(max-width:1000px){#capabilities .cap-row{grid-template-columns:24px 124px minmax(0,1fr);gap:18px}#capabilities .cap-art{width:124px;grid-column:2;grid-row:1/3}#capabilities .cap-row h3{grid-column:3;font-size:24px}#capabilities .cap-row p{grid-column:3}#capabilities .cap-num{grid-row:1/3}#capabilities .cap-row{row-gap:10px}}
@media(max-width:620px){#capabilities .cap-motion-toolbar{margin:-22px 0 10px}#capabilities .cap-row{grid-template-columns:22px minmax(0,1fr) 94px;column-gap:12px;row-gap:16px;padding:25px 0}#capabilities .cap-num{grid-row:1;padding-top:5px}#capabilities .cap-art{grid-column:3;grid-row:1;width:94px;align-self:center}#capabilities .cap-row h3{grid-column:2;grid-row:1;font-size:21px}#capabilities .cap-row p{grid-column:2/4;font-size:15px}}
@media(max-width:380px){#capabilities .cap-row{grid-template-columns:20px minmax(0,1fr) 72px;column-gap:10px}#capabilities .cap-art{width:72px}#capabilities .cap-row h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){#capabilities .motion-piece{animation:none!important}#capabilities .cap-motion-toggle{display:none}.cap-art{transition:none}}