1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1075],{43045:function(a,b,c){(window.__NEXT_P=window.__NEXT_P||[]).push(["/case-studies/mt-bank",function(){return c(15766)}])},65436:function(a,b,c){"use strict";var d=c(85893),e=c(35736),f=c(71819),g=c(57344);function h(){var a,b,c=(a=["\n position: relative;\n padding-top: 63px;\n overflow: hidden;\n\n .cta-accent-top {\n position: absolute;\n left: calc(50% - -348px);\n top: -11px;\n z-index: 2;\n @media (max-width: 950px) {\n left: calc(50%);\n }\n }\n .cta-accent-bottom {\n position: absolute;\n left: calc(50% - 925px);\n bottom: 13px;\n z-index: 2;\n\n @media (max-width: 950px) {\n display: none;\n }\n }\n\n .inner {\n .block-graphic {\n position: absolute;\n top: -20px;\n left: calc(50% + 219px);\n @media (max-width: 950px) {\n display: none;\n }\n }\n .bg-graphic {\n position: absolute;\n top: 0;\n left: calc(50% + -750px);\n height: 100%;\n }\n\n background: black;\n max-width: 100%;\n position: relative;\n display: grid;\n place-items: center;\n padding: 75px 30px;\n\n h2 {\n font-size: 38px;\n font-style: normal;\n font-weight: 700;\n line-height: 1.25;\n color: white;\n width: 460px;\n max-width: 100%;\n @media (max-width: 500px) {\n width: 300px;\n }\n }\n\n .inner-inner {\n width: 745px;\n max-width: 100%;\n position: relative;\n z-index: 2;\n @media (max-width: 800px) {\n width: unset;\n }\n\n p {\n font-size: 18px;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5;\n color: white;\n margin: 20px 0;\n }\n }\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return h=function(){return c},c}var i=c(19521).default.section(h());b.Z=function(a){var b=a.header,c=a.paragraph,h=a.btnText,j=a.btnHref,k=a.blueButton,l=a.className;return(0,d.jsxs)(i,{className:"cta-2023".concat(l?" ".concat(l):""),children:[(0,d.jsx)(f.Z,{className:"cta-accent-top",url:"https://assets.mx.com/images/accent-graphics/cta-accent-top.svg"}),(0,d.jsx)(f.Z,{className:"cta-accent-bottom",url:"https://assets.mx.com/images/accent-graphics/cta-accent-bottom.svg"}),(0,d.jsxs)("div",{className:"inner",children:[(0,d.jsx)("img",{className:"block-graphic",src:"https://assets.mx.com/images/resources/2023/bg-block.svg",alt:"bg block"}),(0,d.jsx)("img",{className:"bg-graphic",src:"https://assets.mx.com/images/resources/2023/cta-bg.jpg",alt:"cta bg"}),(0,d.jsxs)("div",{className:"inner-inner",children:[(0,d.jsx)("h2",{children:b}),!c&&(0,d.jsx)(g.Z,{size:33}),c&&(0,d.jsx)("p",{children:c}),k?(0,d.jsx)(e.Z,{href:j,text:h}):(0,d.jsx)(e.Z,{href:j,text:h,darkOutlined:!0})]})]})]})}},14996:function(a,b,c){"use strict";var d=c(85893);function e(){var a,b,c=(a=["\n display: inline-flex;\n align-items: center;\n svg {\n transition: rotate ease 0.3s;\n }\n &.down svg {\n rotate: 90deg;\n }\n &.left svg {\n rotate: 180deg;\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return e=function(){return c},c}var f=c(19521).default.div(e());b.Z=function(a){var b=a.color,c=a.direction,e=a.down,g=a.onClick;return(0,d.jsx)(f,{onClick:g,className:"arrow ".concat(c||""," ").concat(e?"down":""),children:(0,d.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"7",height:"12",viewBox:"0 0 7 12",fill:"none",children:(0,d.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L6.70711 5.29289C7.09763 5.68342 7.09763 6.31658 6.70711 6.70711L1.70711 11.7071C1.31658 12.0976 0.683417 12.0976 0.292893 11.7071C-0.0976311 11.3166 -0.0976311 10.6834 0.292893 10.2929L4.58579 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z",fill:b||"#2C64EF"})})})}},2498:function(a,b,c){"use strict";var d=c(85893),e=c(67294),f=c(11405);b.Z=function(a){var b=a.children,c=a.onlyOnce,g=(0,e.useState)(""),h=g[0],i=g[1],j=(0,e.useRef)();return(0,e.useEffect)(function(){var a=function(){if(!h||!c){var a=f.Z.isHalfInViewport(j.current,300);a!=h&&i(a)}};return window.addEventListener("scroll",a),a(),function(){window.removeEventListener("scroll",a)}}
1,[h]),(0,d.jsx)("div",{ref:j,className:h?"on-screen":"",children:b})}},29624:function(a,b,c){"use strict";var d=c(85893);c(67294);var e=c(19521);function f(){var a,b,c=(a=["\n background: #000;\n position: relative;\n overflow: hidden;\n width: 1191px;\n max-width: 100%;\n margin: 0 auto;\n border-radius: 200px;\n margin-bottom: 50px;\n padding: 80px 20px;\n box-sizing: content-box;\n\n @media only screen and (max-width: 1100px) {\n max-width: 90%;\n }\n\n @media only screen and (max-width: 600px) {\n max-width: 100%;\n border-radius: 20px;\n }\n\n &:after {\n filter: blur(100px);\n position: absolute;\n width: 100%;\n height: 80%;\n z-index: 1;\n content: \"\";\n top: 0;\n left: 0;\n background: linear-gradient(\n 212deg,\n rgba(0, 188, 248, 100) 18.9%,\n rgba(0, 117, 255, 100) 42.9%,\n rgba(155, 63, 223, 100) 74.43%\n );\n }\n\n @media only screen and (max-width: 1200px) {\n box-sizing: border-box;\n }\n\n .text {\n position: relative;\n z-index: 2;\n padding: 0 100px;\n\n @media only screen and (max-width: 1100px) {\n padding: 0 50px;\n }\n @media only screen and (max-width: 600px) {\n padding: 0 20px;\n }\n\n blockquote {\n }\n\n p {\n color: #fff;\n font-size: 24px;\n font-weight: 300;\n line-height: 1.6;\n margin: 0;\n\n @media only screen and (max-width: 1100px) {\n font-size: 18px;\n }\n }\n .name {\n color: #fff;\n font-weight: 700;\n font-size: 18px;\n margin: 20px 0 0 0;\n\n @media only screen and (max-width: 1100px) {\n font-size: 16px;\n }\n }\n .title {\n color: #fff;\n font-weight: 300;\n font-size: 18px;\n @media only screen and (max-width: 1100px) {\n font-size: 16px;\n }\n }\n }\n\n .quote-logo {\n position: absolute;\n right: 100px;\n bottom: 0;\n\n @media only screen and (max-width: 800px) {\n right: unset;\n position: relative;\n display: block;\n text-align: center;\n width: fit-content;\n margin: 0 auto;\n margin-top: 20px;\n }\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return f=function(){return c},c}c(71819),c(35736);var g=e.default.div.withConfig({componentId:"sc-d98df5f9-0"})(f());b.Z=function(a){var b=a.quoteText,c=a.quoteeName,e=a.quoteeTitle,f=a.clientLogo;return(0,d.jsx)(d.Fragment,{children:(0,d.jsx)(g,{className:"quote",children:(0,d.jsxs)("div",{className:"text",children:[(0,d.jsx)("blockquote",{children:b}),(0,d.jsx)("p",{className:"name",children:c}),(0,d.jsx)("p",{className:"title",children:e}),f&&(0,d.jsx)("img",{className:"quote-logo",src:f,alt:"logo"})]})})})}},71819:function(a,b,c){"use strict";c.d(b,{Z:function(){return m}});var d=c(85893),e=c(34051),f=c.n(e),g=c(67294);function h(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(j){c(j);return}h.done?b(i):Promise.resolve(i).then(d,e)}var i=function(a){var b=a.url;a.animateClass;var c=(0,g.useRef)(null);return(0,g.useEffect)(function(){var a,d;(a=f().mark(function a(){var d,e,g,h,i,j;return f().wrap(function(a){for(;;)switch(a.prev=a.next){case 0:return a.prev=2,a.next=5,fetch(b);case 5:return d=a.sent,a.next=8,d.text();case 8:e=a.sent,a.next=13;break;case 11:a.prev=11,a.t0=a.catch(2);case 13:if(d){a.next=15;break}return a.abrupt("return");case 15:(i=(h=(g=new DOMParser()).parseFromString(e,"image/svg+xml")).documentElement).setAttribute("xmlns","http://www.w3.org/2000/svg"),(j=Array.from(i.children)).forEach(function(a,b){a.classList.contains("dont-animate")||(a.classList.add("loadified"),a.style.animationDelay="".concat(.2*b,"s"))}),c&&c.current&&c.current.replaceWith(i);case 22:case"end":return a.stop()}},a,null,[[2,11]])}),d=function(){var b=this,c=arguments;return new Promise(function(d,e){var f=a.apply(b,c);function g(a){h(f,d,e,g,i,"next",a)}function i(a){h(f,d,e,g,i,"throw",a)}g(void 0)})},function(){return d.apply(this,arguments)})()},[b]),(0,d.jsx)(d.Fragment,{children:(0,d.jsx)("div",{ref:c})})},j=c(2498);function k(){var a,b,c=(a=["\n position: absolute;\n z-index: -1;\n\n svg {\n overflow: visible;\n }\n\n @keyframes loadified-left-in {\n 0% {\n translate: 100px;\n opacity: 0;\n }\n 100% {\n translate: 0px;\n opacity: 1;\n }\n }\n\n @keyframes loadified-right-in {\n 0% {\n translate: -100px;\n opacity: 0;\n }\n 100% {\n translate: 0px;\n opacity: 1;\n }\n }\n\n .loadified {\n animation-duration: 2s;\n animation-fill-mode: forwards;\n animation-timing-function: ease;\n opacity: 0;\n }\n\n .on-screen {\n .loadified:nth-child(odd) {\n animation-name: loadified-left-in;\n }\n\n .loadified:nth-child(even) {\n animation-name: loadified-right-in;\n }\n }\n"],b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}})));return k=function(){return c},c}var l=c(19521).default.div(k()),m=function(a){var b=a.className,c=a.url;return(0,d.jsx)(l,{className:"fade-accent ".concat(b),children:(0,d.jsx)(j.Z,{children:(0,d.jsx)(i,{url:c})})})}},99057:function(a,b,c){"use strict";var d=c(47902);b.Z=d.Z},69170:function(a,b,c){"use strict";var d=c(31672);b.Z=d.Z},15766:function(a,b,c){"use strict";c.r(b);var d=c(85893);c(67294);var e=c(63189),f=c(19521),g=c(69170),h=c(99057),i=c(39994),j=c(71819),k=c(65436),l=c(14996),m=c(35736),n=c(57344),o=c(29624);function p(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}function q(){var a=p(["\n overflow: hidden;\n position: relative;\n\n @media only screen and (max-width: 1100px) {\n overflow: hidden;\n }\n\n .quote {\n border-radius: 316px;\n @media only screen and (max-width: 600px) {\n border-radius: 0;\n }\n }\n .quote-logo {\n width: 92px !important;\n }\n\n h2 {\n font-size: 32px;\n font-weight: bold;\n margin-bottom: 20px;\n\n @media only screen and (max-width: 1100px) {\n text-align: center;\n }\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n }\n\n .popup-video {\n top: 30px;\n background-color: #000;\n padding: 0;\n\n @media only screen and (max-width: 900px) {\n top: 50px;\n }\n\n #close-x {\n top: -25px;\n right: -35px;\n filter: invert(1);\n\n @media only screen and (max-width: 900px) {\n top: -40px;\n right: 0;\n margin: auto;\n }\n }\n }\n\n .hero-accent-1 {\n @media only screen and (max-width: 1100px) {\n display: none;\n }\n }\n\n #hero-bottom-wrap {\n width: 100%;\n position: relative;\n z-index: -1;\n .accent-hero-bottom {\n position: absolute;\n bottom: -31px;\n left: calc(50% - 1595px);\n z-index: 5;\n @media only screen and (max-width: 1100px) {\n display: none;\n }\n }\n }\n\n #manage-finances-mobile-device {\n top: -23px;\n position: relative;\n width: 471px;\n justify-self: center;\n max-width: 100%;\n }
1\n\n .average-graph {\n width: 1012px;\n max-width: 100%;\n display: block;\n margin: auto;\n }\n"]);return q=function(){return a},a}function r(){var a=p(["\n width: 1191px;\n max-width: calc(100% - 60px);\n margin: 50px auto;\n position: relative;\n box-sizing: content-box;\n padding: 0 20px;\n\n @media only screen and (max-width: 1250px) {\n }\n\n @media only screen and (max-width: 1100px) {\n margin: 50px auto;\n text-align: center;\n width: 663px;\n max-width: 100%;\n }\n\n @media only screen and (max-width: 950px) {\n box-sizing: border-box;\n text-align: center;\n padding: 0 20px;\n }\n\n h2 {\n margin-bottom: 30px;\n @media only screen and (max-width: 950px) {\n width: 100%;\n }\n }\n p {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5;\n }\n\n #mobile-user-right {\n position: relative;\n left: 50px;\n @media only screen and (max-width: 1100px) {\n margin-top: 50px;\n }\n @media only screen and (max-width: 600px) {\n left: unset;\n }\n img {\n width: 583px;\n max-width: 100%;\n }\n .cash-top-right {\n position: absolute;\n top: -84px;\n right: -68px;\n @media only screen and (max-width: 1100px) {\n display: none;\n }\n }\n .cash-bottom {\n position: absolute;\n bottom: 126px;\n left: 0;\n z-index: 2;\n @media only screen and (max-width: 1100px) {\n bottom: -13px;\n }\n }\n }\n"]);return r=function(){return a},a}function s(){var a=p(["\n position: relative;\n z-index: 1;\n padding: 0;\n background: #000;\n margin-bottom: 20px;\n\n #bg-wrap {\n position: absolute;\n height: 100%;\n width: 100%;\n overflow: hidden;\n top: 0;\n right: 0;\n }\n #hero-bg-gradient {\n position: absolute;\n top: -237px;\n right: calc(50% - 868px);\n z-index: -1;\n width: 1200px;\n pointer-events: none;\n @media only screen and (max-width: 1100px) {\n top: unset;\n bottom: -307px;\n right: calc(50% - 466px);\n }\n }\n\n #hero-black-overlay {\n position: absolute;\n height: 100px;\n background: linear-gradient(0deg, #000 20%, transparent 100%);\n left: 0;\n right: 0;\n width: 100%;\n bottom: 0;\n z-index: 1;\n }\n\n .back-arrow {\n font-style: normal !important;\n font-weight: 600 !important;\n font-size: 16px !important;\n line-height: 1 !important;\n color: #0075ff !important;\n cursor: pointer !important;\n margin-top: 15px !important;\n margin-bottom: 50px;\n display: block;\n\n .arrow {\n margin-right: 10px;\n /* transition: transform 0.3s ease; */\n }\n\n &:hover {\n .arrow {\n /* transform: translateX(-10px); */\n }\n }\n }\n\n .case-featured-logo {\n border-radius: 30px;\n line-height: 1;\n margin: 0;\n width: fit-content;\n display: flex;\n margin-bottom: 30px;\n border: 1px solid #fff;\n max-height: 70px;\n overflow: hidden;\n\n @media only screen and (max-width: 1100px) {\n margin: 0 auto 30px auto;\n ",";\n }\n }\n\n .partner-logo-wrap {\n border-radius: 0 30px 30px 0;\n padding: 15px 30px 15px 5px;\n background: #fff;\n width: 100%;\n margin-left: -2px;\n\n .partner-logo {\n height: 20px;\n }\n }\n\n .mx-logo-wrap {\n display: flex;\n align-items: center;\n padding-right: 20px;\n background: linear-gradient(-70deg, #fff 0%, #fff 25px, transparent 10px);\n width: 90px;\n\n .mx-logo {\n padding: 0 0 0 20px;\n margin-right: 10px;\n box-sizing: content-box;\n width: 40px;\n height: auto;\n }\n }\n\n .wrapper {\n position: relative;\n width: 1191px;\n max-width: 100%;\n margin: 0 auto;\n padding: 0 20px;\n box-sizing: content-box;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n\n @media only screen and (max-width: 1250px) {\n box-sizing: border-box;\n }\n @media only screen and (max-width: 1100px) {\n padding: 0;\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n @media only screen and (max-width: 600px) {\n box-sizing: border-box;\n }\n\n .hero-cta-btns {\n display: flex;\n width: 100%;\n align-items: center;\n margin-top: 50px;\n position: relative;\n z-index: 5;\n\n @media only screen and (max-width: 1100px) {\n margin: 30px auto 0 auto;\n justify-content: space-between;\n width: 600px;\n justify-content: center;\n }\n @media only screen and (max-width: 700px) {\n width: 100%;\n flex-direction: column;\n }\n\n .primary-button {\n }\n }\n .hero-img-wrap {\n position: relative;\n top: 48px;\n width: 450px;\n max-width: 100%;\n z-index: 2;\n margin-left: 40px;\n align-self: center;\n\n @media only screen and (max-width: 1200px) {\n margin-left: 0;\n padding-left: 20px;\n }\n\n @media only screen and (max-width: 1100px) {\n padding-left: 0;\n margin: 0 auto;\n width: 100%;\n }\n\n .hero-tall-img {\n transform-origin: left;\n pointer-events: none;\n width: 617px;\n top: 29px;\n left: -11px;\n position: relative;\n z-index: 2;\n\n @media only screen and (max-width: 1200px) {\n transform: scale(1);\n }\n\n @media only screen and (max-width: 1100px) {\n padding: 0 20px;\n left: 0px;\n }\n\n @media only screen and (max-width: 600px) {\n width: 100%;\n }\n }\n\n .hero-user-bottom {\n position: absolute;\n bottom: -94px;\n left: 130px;\n z-index: 3;\n @media only screen and (max-width: 1100px) {\n left: calc(50% - 181px);\n }\n }\n }\n\n .content {\n z-index: 1;\n max-width: 100%;\n padding: 40px 0 50px 0;\n display: flex;\n justify-content: space-between;\n height: 495px;\n\n @media only screen and (max-width: 1100px) {\n height: auto;\n width: 100%;\n padding: 40px 0 0 0;\n flex-direction: column;\n box-sizing: border-box;\n }\n\n #hero-logo {\n width: 256px;\n max-width: 90%;\n }\n\n h1 {\n color: #fff;\n font-size: 48px;\n font-weight: 600;\n line-height: 1.2;\n margin-bottom: 20px;\n @media only screen and (max-width: 1100px) {\n margin-top: 20px;\n }\n\n @media only screen and (max-width: 600px) {\n font-size: 30px;\n }\n }\n & > div > p {\n color: #fff;\n font-size: 21px;\n font-weight: 300;\n line-height: 1.4;\n margin-bottom: 30px;\n\n @media only screen and (max-width: 1100px) {\n margin: 0 auto;\n }\n @media only screen and (max-width: 600px) {\n font-size: 18px;\n }\n }\n }\n }\n .accent-hero-top {\n top: 33px;\n right: 503px;\n z-index: 3;\n @media only screen and (max-width: 1100px) {\n right: calc(50% - 551px);\n top: 33px;\n }\n }\n"]);return s=function(){return a},a}function t(){var a=p(["\n width: 1191px;\n max-width: 100%;\n margin: 0 auto;\n position: relative;\n padding: 0 20px;\n box-sizing: content-box;\n\n @media only screen and (max-width: 1100px) {\n flex-direction: column;\n padding: 0 20px;\n box-sizing: border-box;\n }\n\n .hero-accent-1 {\n z-index: 2;\n top: 120px;\n right: -10px;\n\n @media only screen and (max-width: 1100px) {\n top: 135px;\n right: -150px;\n }\n @media only screen and (max-width: 900px) {\n display: none;\n }\n }\n\n p {\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n line-height: 1.5;\n }\n\n #challenge-solution {\n display: flex;\n justify-content: space-between;\n flex-direction: column;\n margin: 0 auto 50px;\n\n @media only screen and (max-width: 1100px) {\n flex-direction: column;\n }\n\n p {\n margin: 10px 0;\n }\n\n .col-2 {\n max-width: calc(100% - 30px);\n\n @media only screen and (max-width: 1100px) {\n width: 663px;\n flex-direction: column;\n align-items: center;\n margin: 0 auto;\n text-align: center;\n }\n\n & > div {\n @media only screen and (max-width: 1100px) {\n width: 663px;\n max-width: 100%;\n }\n\n &:first-child {\n margin-right: 40px;\n\n @media only screen and (max-width: 1100px) {\n margin-right: 0;\n }\n }\n }\n }\n\n h2 {\n color: #0075ff;\n font-size: 32px;\n font-weight: bold;\n margin-bottom: 20px;\n\n @media only screen and (max-width: 1100px) {\n text-align: center;\n }\n }\n\n ul {\n padding-left: 20px;\n list-style: disc;\n margin-top: 20px;\n\n li {\n margin: 10px 0;\n line-height: 1.6;\n }\n }\n\n #solution {\n h3 {\n color: #0075ff;\n font-size: 20px;\n font-style: normal;\n font-weight: 400;\n line-height: 1.2;\n }\n i {\n color: #000;\n font-size: 16px;\n font-style: italic;\n font-weight: 400;\n line-height: 1.5;\n }\n @media only screen and (max-width: 1100px) {\n width: 663px;\n max-width: 100%;\n margin: 0 auto;\n }\n }\n }\n"]);return t=function(){return a},a}function u(){var a=p(["\n background: #000;\n padding: 50px 0 70px;\n text-align: center;\n position: relative;\n\n .accent-benefits-left {\n left: 232px;\n top: -30px;\n z-index: 2;\n }\n\n h2 {\n color: #fff;\n font-size: 32px;\n font-weight: 600;\n margin-bottom: 50px;\n }\n\n .accent-benefits-mid {\n left: calc(50% - -277px);\n bottom: -30px;\n z-index: 2;\n @media only screen and (max-width: 950px) {\n left: unset;\n right: -46px;\n }\n }\n\n .wrapper {\n width: 945px;\n max-width: 100%;\n margin: 0 auto;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n\n .benefit {\n text-align: center;\n margin: 10px 0;\n box-sizing: content-box;\n width: 229px;\n\n @media only screen and (max-width: 950px) {\n width: ",";\n }\n\n @media only screen and (max-width: 950px) {\n width: 100%;\n padding: 20px;\n margin: 0;\n }\n\n img {\n margin-bottom: 20px;\n height: 70px;\n }\n p {\n color: #fff;\n font-size: 14px;\n font-weight: 300;\n line-height: 1.6;\n\n @media only screen and (max-width: 950px) {\n width: 200px;\n max-width: 100%;\n margin: 0 auto;\n }\n }\n }\n }\n"]);return u=function(){return a},a}function v(){var a=p(["\n position: relative;\n padding: 50px 20px;\n box-sizing: content-box;\n\n #product-image {\n position: relative;\n top: 38px;\n @media only screen and (max-width: 1100px) {\n top: unset;\n margin-bottom: 50px;\n }\n }\n\n .accent-feature-1 {\n position: absolute;\n right: 300px;\n bottom: -8px;\n z-index: -1;\n height: 100px;\n\n @media only screen and (max-width: 1100px) {\n display: none;\n }\n }\n .accent-feature-bottom {\n left: -300px;\n bottom: -100px;\n\n @media only screen and (max-width: 600px) {\n display: none;\n }\n }\n\n .wrapper {\n width: 1191px;\n max-width: 100%;\n margin: 0 auto;\n }\n .feature {\n display: flex;\n position: relative;\n\n @media only screen and (max-width: 1100px) {\n flex-direction: column-reverse;\n padding: 0 20px;\n margin-top: 20px;\n }\n\n &.v-center {\n align-items: center;\n }\n\n .link-line {\n margin-top: 20px;\n }\n\n .text {\n width: 596px;\n max-width: 100%;\n margin-right: 30px;\n margin-top: 70px;\n\n @media only screen and (max-width: 1100px) {\n margin: 20px auto !important;\n }\n\n h2 {\n font-size: 32px;\n margin-bottom: 30px;\n }\n }\n img {\n width: 600px;\n max-width: 100%;\n }\n &.reverse {\n flex-direction: row-reverse;\n\n @media only screen and (max-width: 1100px) {\n flex-direction: column-reverse;\n }\n\n .text {\n margin-left: 30px;\n margin-right: 0;\n }\n }\n }\n"]);return v=function(){return a},a}function w(){var a=p(["\n z-index: 1;\n position: absolute;\n ",";\n ","\n ","\n ","\n width: ",";\n background: #000;\n height: ",";\n"]);return w=function(){return a},a}function x(){var a=p(["\n box-sizing: content-box;\n .wrap {\n width: 1191px;\n max-width: calc(100% - 30px);\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: 29px;\n @media only screen and (max-width: 1100px) {\n display: block;\n margin: auto;\n }\n }\n\n p {\n color: #000;\n font-size: 16px;\n font-weight: 400;\n line-height: 1.5;\n @media only screen and (max-width: 700px) {\n margin-bottom: 20px;\n }\n }\n"]);return x=function(){return a},a}var y=f.default.div.withConfig({componentId:"sc-5f00d568-0"})(q()),z=f.default.section.withConfig({componentId:"sc-5f00d568-1"})(r()),A=f.default.div.withConfig({componentId:"sc-5f00d568-2"})(s(),function(a){return"".concat(a.noHeaderImage&&"margin: 30px auto")}),B=f.default.div.withConfig({componentId:"sc-5f00d568-3"})(t()),C=f.default.div.withConfig({componentId:"sc-5f00d568-4"}
1)(u(),function(a){return a.benefits?"".concat(100/(a.benefits/2),"%"):"0"}),D=f.default.div.withConfig({componentId:"sc-5f00d568-5"})(v()),E=f.default.div.withConfig({componentId:"sc-5f00d568-6"})(w(),function(a){return a.top&&"top: ".concat(a.top,";")},function(a){return a.bottom&&"bottom: ".concat(a.bottom,";")},function(a){return a.left&&"left: ".concat(a.left,";")},function(a){return a.right&&"right: ".concat(a.right,";")},function(a){return a.width?a.width:"100%"},function(a){return a.height?a.height:"50px"}),F=f.default.div.withConfig({componentId:"sc-5f00d568-7"})(x());b.default=function(a){var a=null!==a?a:function(a){throw a}(new TypeError("Cannot destructure undefined"));return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(e.Z,{title:"M&T Bank Empowers Consumers with MX PFM Tools",meta:"Powered by MX, M&T's Money Smart allows customers to view all financial accounts in one place and track spending, set financial goals, and pay off debt.",metaImage:"https://assets.mx.com/images/case-studies/mt-bank/meta.jpg"}),(0,d.jsx)(g.Z,{}),(0,d.jsxs)(y,{children:[(0,d.jsxs)(A,{className:"hero",children:[(0,d.jsx)("div",{id:"bg-wrap",children:(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/cure-for-lost-deposits/bg-gradient.svg",alt:"background gradient",id:"hero-bg-gradient"})}),(0,d.jsx)("div",{className:"wrapper",children:(0,d.jsxs)("div",{className:"content",children:[(0,d.jsxs)("div",{children:[(0,d.jsxs)("a",{className:"back-arrow",href:"/case-studies/",children:[(0,d.jsx)(l.Z,{color:"#0075FF",direction:"left"}),"View All Case Studies"]}),(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/mt-bank/mx-mt-logo.png",alt:"evansville logo",id:"hero-logo"}),(0,d.jsx)(n.Z,{size:12}),(0,d.jsx)("h1",{children:"M&T Empowers Customers"}),(0,d.jsx)("p",{children:"During Times of Financial Instability"}),(0,d.jsx)("div",{className:"hero-cta-btns",children:(0,d.jsx)(m.Z,{text:"Download the PDF",href:"https://assets.mx.com/images/case-studies/mt-bank/mt-bank.pdf"})})]}),(0,d.jsxs)("div",{className:"hero-img-wrap",children:[(0,d.jsx)("img",{className:"hero-tall-img",src:"https://assets.mx.com/images/case-studies/mt-bank/hero-user.png",alt:"product image"}),(0,d.jsx)(j.Z,{className:"hero-user-bottom",url:"https://assets.mx.com/images/accent-graphics/case-studies/mt-bank/hero-user-bottom.svg"})]}),(0,d.jsx)(j.Z,{className:"accent-hero-top",url:"https://assets.mx.com/images/accent-graphics/case-studies/affinity-based-marketing/hero-top.svg"})]})})]}),(0,d.jsx)("div",{id:"hero-bottom-wrap",children:(0,d.jsx)(j.Z,{className:"accent-hero-bottom",url:"https://assets.mx.com/images/accent-graphics/case-studies/afcu/hero-bottom.svg"})}),(0,d.jsx)(n.Z,{size:80}),(0,d.jsx)(z,{children:(0,d.jsx)("p",{children:"M&T Bank is a regional bank that provides banking, insurance, investments, mortgage and commercial financial services throughout the northeastern part of the United States. Itâs deeply committed to understanding whatâs important to its customers and finding ways to help them improve their financial health."})}),(0,d.jsxs)(B,{children:[(0,d.jsx)(n.Z,{size:1}),(0,d.jsxs)("div",{id:"challenge-solution",children:[(0,d.jsxs)("div",{id:"challenge",className:"col-2",children:[(0,d.jsx)("h2",{children:"The Challenge"}),(0,d.jsx)(F,{children:(0,d.jsxs)("div",{className:"wrap",children:[(0,d.jsx)("p",{children:"With the outbreak of a global pandemic in March 2020, many of M&T Bankâs customers were impacted financially. Amid much uncertainty, customers needed a way to stay on top of how much cash they had available to manage their day-to-day lives, and M&T sought to find a way it could help."}),(0,d.jsxs)("p",{children:["\"","When COVID-19 hit, we heard from our customers that they needed a more intuitive way to forecast upcoming financial obligations,","\""," said Ryan Lee, a member of the digital team that led the Money Smart implementation. ","\"","They wanted visibility into how much money would be in their bank account after accounting for anticipated payments.","\""]})]})})]}),(0,d.jsx)(n.Z,{size:50}),(0,d.jsxs)("div",{id:"solution",className:"col-2",children:[(0,d.jsx)("h2",{children:"The Solution"}),(0,d.jsx)("p",{children:"M&T implemented a forward-looking, predictive solution powered by MX, which uses transaction history data to forecast future cash balances, allowing customers to easily identify potential negative cash balances and take action accordingly."})]})]})]}),(0,d.jsx)(n.Z,{size:50,mobile:1100,mSize:10}),(0,d.jsx)(z,{children:(0,d.jsx)(F,{children:(0,d.jsxs)("div",{className:"wrap",children:[(0,d.jsx)("img",{id:"manage-finances-mobile-device",src:"https://assets.mx.com/images/case-studies/mt-bank/manage-finances-mobile-device.png",alt:"mx mobile device"}),(0,d.jsxs)("div",{children:[(0,d.jsx)(n.Z,{size:0,mobile:1100,mSize:20}),(0,d.jsx)("h2",{children:"An Easier Way to Manage Finances"}),(0,d.jsxs)("p",{children:["In July 2019, M&T partnered with MX to launch M&T Money Smart, a tool for its online and mobile banking platforms that helps users manage their finances and make smart financial decisions. Powered by MX, Money Smart allows M&Tâs customers to view all of their accountsâfrom M&T and other institutionsâ in one dashboard and creates budgeting and spending visualizations to help users track spending, set financial goals, and pay off debt. With a user interface focused on simplicity and ease of use, this tool provides M&T customers with a positive user experience that helps them improve their financial wellness.",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"âWhat weâve seen with our customers is that the demand for digital banking solutions is evolving,â said Mary Kate Loftus, M&Tâs senior vice president and director of digital banking. âConsumers today expect convenience and real-time access and are looking for ways to make managing their finances easier. Introducing a tool like Money Smart helps us differentiate our digital experience and improve our users","'"," financial strength.â",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"Today, customers that are using Money Smart to view all of their accounts in one place are connecting, on average, five external accounts from other institutions. The more a customer engages with Money Smart and links their external accounts, the more M&T is able to understand their full financial picture. By understanding whatâs important to its customers, M&T is better equipped to provide products and services that are relevant and personalized to a particular customerâs financial situation."]})]})]})})}),(0,d.jsx)(z,{children:(0,d.jsxs)("p",{children:["For example, Money Smart has a feature that lets customers set financial goals. Not only does this tool help customers work toward their goals, it also gives M&T meaningful insights that enable it to provide its customers with better personalized services that will help them on their journey.",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"âPerhaps theyâre trying to set aside money for an emergency fund, or maybe theyâre saving for home improvements or a new car,â said Barbara Walsh, M&Tâs digital product manager overseeing the Money Smart tool. âWhether itâs saving for key milestones such as their wedding or the arrival of a new baby, we can recommend products and services that will help them achieve their goals. This allows us to be a better bank for our customers and understand when we can provide relevant services that would benefit them.â"]})}),(0,d.jsx)(n.Z,{size:50,mobile:1100,mSize:30}),(0,d.jsx)(z,{children:(0,d.jsx)(F,{children:(0,d.jsxs)("div",{className:"wrap",children:[(0,d.jsxs)("div",{children:[(0,d.jsx)("h2",{children:"Managing Future Cash Flow"}),(0,d.jsxs)("p",{children:["Enter MX, which offers a better way for users to visualize how money moves in and out of their account throughout the month. MX solutions allows users to easily see any upcoming deficitsâand then to plan accordingly. The tool simplifies a complex element of financial planning through advanced analytics driven by past transactions.",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"Luckily for M&T, with Money Smart it has already put in place the infrastru
1cture needed to support MX tools, having planned to launch this as a new feature in Money Smart later that year. âWhen we realized this tool could substantially help our customers, we came together and reprioritized our roadmap so we could meet our customersâ needs quickly during this time of uncertainty,â Lee added."]}),(0,d.jsx)(n.Z,{size:60,mobile:1100,mSize:120}),(0,d.jsx)("h2",{children:"Understanding Whatâs Important to Customers"}),(0,d.jsxs)("p",{children:["One of M&Tâs core values is understanding whatâs important to its customers. By proactively listening to them, M&T is able to provide customers with the financial guidance they need when they need it most. Recently, this meant finding a way to help its customers manage the anxiety and financial stress associated with the coronavirus pandemic.",(0,d.jsx)("br",{}),(0,d.jsx)("br",{}),"With the increasing uncertainty its clients were feeling, M&T needed something that could project future financial standing and serve as a call to action toward financial stability."]})]}),(0,d.jsxs)("div",{id:"mobile-user-right",children:[(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/mt-bank/mobile-user.png",alt:"mx mobile device"}),(0,d.jsx)(j.Z,{className:"cash-top-right",url:"https://assets.mx.com/images/accent-graphics/case-studies/mt-bank/cash-top-right.svg"}),(0,d.jsx)(j.Z,{className:"cash-bottom",url:"https://assets.mx.com/images/accent-graphics/case-studies/mt-bank/cash-bottom.svg"})]})]})})}),(0,d.jsx)(n.Z,{size:50}),(0,d.jsxs)(z,{children:[(0,d.jsx)("h2",{children:"Increasing Customer Engagement"}),(0,d.jsx)("p",{children:"Just four months after releasing this new feature, M&T found that the MX tool dramatically increased engagement and interaction with Money Smart. Customers utilizing the MX tool logged into Money Smart 50% more often than other users and spent three times longer in the tool managing their finances."}),(0,d.jsx)(n.Z,{size:50,mobile:1100,mSize:100}),(0,d.jsx)("img",{className:"average-graph",src:"https://assets.mx.com/images/case-studies/mt-bank/average-graph.png",alt:"mx graph"})]}),(0,d.jsx)(n.Z,{size:20}),(0,d.jsx)(z,{children:(0,d.jsx)("p",{children:"In addition to increased engagement, M&T noticed a 4% increase in profitability of Money Smart users. It also saw a 2% decline in NSF and overdraft transaction fee growth rate for those using Money Smart. This is a significant contrast from the overall rise it saw in overdraft and insufficient funds transactions that have occurred as a result of the global pandemic."})}),(0,d.jsx)(n.Z,{size:50}),(0,d.jsx)(o.Z,{quoteText:(0,d.jsx)(d.Fragment,{children:(0,d.jsxs)("p",{children:[(0,d.jsx)("b",{children:"I think the work that M&T and MX have done together is really tremendous. This project was not just about providing a new product or service, but it has really helped our clients when they needed it most"})," ","â especially during this pandemic. The MX feature helps customers visualize the predicted daily balance in their account based on recurring ins and outs like paychecks or rent. This helps customers plan accordingly."," ",(0,d.jsx)("b",{children:"Itâs been a game changer."})]})}),quoteeName:"Mary Kate Loftus",quoteeTitle:"Senior Vice President and Director of Digital Banking, M&T Bank",clientLogo:"https://assets.mx.com/images/case-studies/mt-bank/mt-bank-logo.png"}),(0,d.jsx)(n.Z,{size:50}),(0,d.jsx)(z,{children:(0,d.jsxs)("p",{children:["By providing its customers with insights on future cash balances, M&T is simplifying financial planning and furthering its mission of making a difference in people","'","s lives."]})}),(0,d.jsx)(n.Z,{size:100}),(0,d.jsxs)(C,{benefits:4,children:[(0,d.jsx)(E,{top:"-10px",right:"0",left:"0",width:"80%",style:{borderRadius:"50px 50px 0 0",margin:"0 auto"}}),(0,d.jsx)("h2",{children:"Key Benefits"}),(0,d.jsxs)("div",{className:"wrapper",children:[(0,d.jsx)(j.Z,{className:"accent-benefits-left",url:"https://assets.mx.com/images/accent-graphics/resources/case-studies/indv/dots-benefits-left.svg"}),(0,d.jsx)(j.Z,{className:"accent-benefits-mid",url:"https://assets.mx.com/images/accent-graphics/resources/case-studies/indv/dots-benefits-mid.svg"}),(0,d.jsxs)("div",{className:"benefit",children:[(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/mt-bank/benefit-icon-1.svg",alt:"icon"}),(0,d.jsx)("p",{children:"more logins"})]}),(0,d.jsxs)("div",{className:"benefit",children:[(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/mt-bank/benefit-icon-2.svg",alt:"icon"}),(0,d.jsx)("p",{children:"increase in monthly profitability"})]}),(0,d.jsxs)("div",{className:"benefit",children:[(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/mt-bank/benefit-icon-3.svg",alt:"icon"}),(0,d.jsx)("p",{children:"more time managing finances"})]}),(0,d.jsxs)("div",{className:"benefit",children:[(0,d.jsx)("img",{src:"https://assets.mx.com/images/case-studies/mt-bank/benefit-icon-3.svg",alt:"icon"}),(0,d.jsx)("p",{children:"decline in overdrafts"})]})]})]}),(0,d.jsx)(n.Z,{size:30}),(0,d.jsx)(D,{children:(0,d.jsx)("div",{className:"wrapper",children:(0,d.jsxs)("div",{className:"feature v-center",children:[(0,d.jsxs)("div",{className:"text",children:[(0,d.jsx)("h2",{children:"About MX Insights"}),(0,d.jsx)("p",{children:"MX Insights delivers a combination of personal financial management, predictive financial guidance, and financial wellness capabilities that helps organizations to translate data into actionable insights. It enables organizations to gain more value from their data, power the best experiences, and improve engagement so their consumers can become financially strong."}),(0,d.jsx)(i.Z,{href:"/products/financial-insights/",children:"Learn More"})]}),(0,d.jsx)("img",{className:"accent-feature-1",src:"https://assets.mx.com/images/news/blog-quote-accent.svg",alt:"accent"}),(0,d.jsx)("img",{id:"product-image",src:"https://assets.mx.com/images/resources/case-study/mercantile/feature-1.png",alt:"product image"})]})})}),(0,d.jsx)(k.Z,{header:"Ready to Get Started?",paragraph:"Explore how MX can help you get the most from financial data and build better money experiences for consumers.",btnText:"Request Demo",btnHref:"/request-demo/",blueButton:!0})]}),(0,d.jsx)(h.Z,{})]})}},11405:function(a,b){"use strict";b.Z={isDivVerticallyCentered:function(a,b){var c=a.getBoundingClientRect(),d=window.innerHeight/2;return c.top<=d+b&&c.bottom>=d-b},isHalfInViewport:function(a){var b=a.getBoundingClientRect();return b.top+b.height/2>=0&&b.bottom-b.height/2<=window.innerHeight}}},11163:function(a,b,c){a.exports=c(90387)},4298:function(a,b,c){a.exports=c(20699)}},function(a){a.O(0,[7080,31672,49774,92888,40179],function(){return a(a.s=43045)}),_N_E=a.O()}])
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.