#mf-navigation{font-family: Arial, Helvetica, sans-serif; color: rgb(20, 36, 44); background: rgb(255, 255, 255); letter-spacing: 0px; --blue: #247db6; --coral: #df5948; --green: #227366;}
#mf-navigation *{box-sizing: border-box;}
#mf-navigation{margin: 0px;}
#mf-navigation button,#mf-navigation a{-webkit-tap-highlight-color: transparent;}
#mf-navigation a{color: inherit; text-decoration: none;}
#mf-navigation button{font: inherit; cursor: pointer;}
#mf-navigation button:focus-visible,#mf-navigation a:focus-visible{outline: rgb(36, 125, 182) solid 3px; outline-offset: 4px;}
#mf-navigation button svg,#mf-navigation a svg{flex-shrink: 0;}
#mf-navigation svg{width: 20px; height: 20px;}
#mf-navigation button{color: inherit;}
#mf-navigation{position: sticky; top: 0px; z-index: 30; background: rgb(196, 228, 244); transition: background 0.18s;}
#mf-navigation.open,#mf-navigation.scrolled{background: white; box-shadow: rgb(220, 229, 230) 0px 1px 0px;}
#mf-navigation .bar{max-width: 1320px; margin: auto; height: 86px; padding: 0px 32px; display: flex; align-items: center; gap: 40px;}
#mf-navigation .logo{margin-right: auto; display: flex; align-items: center;}
#mf-navigation .logo img{width: 188px; height: auto; display: block;}
#mf-navigation nav{display: flex; align-items: center; gap: 28px;}
#mf-navigation nav > a,#mf-navigation nav > button{font-size: 15px; font-weight: 600; min-height: 48px; display: flex; align-items: center; gap: 7px;}
#mf-navigation nav > button{border: 0px; background: none; padding: 0px; position: relative;}
#mf-navigation nav > button svg{width: 15px; height: 15px; transition: transform 0.18s;}
#mf-navigation nav > button[aria-expanded="true"]{color: var(--blue);}
#mf-navigation nav > button[aria-expanded="true"] svg{transform: rotate(180deg);}
#mf-navigation nav > button[aria-expanded="true"]::after{content: ""; position: absolute; bottom: -19px; left: 0px; right: 0px; height: 3px; background: var(--blue);}
#mf-navigation .cta{background: var(--coral); color: white; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 5px; font-size: 15px; font-weight: 700; gap: 10px;}
#mf-navigation .cta:hover{background: rgb(201, 75, 61);}
#mf-navigation .mobile-toggle{display: none; border: 0px; background: none; width: 44px; height: 44px; align-items: center; justify-content: center;}
#mf-navigation .menu{position: absolute; top: 100%; left: 0px; width: 100%; background: rgb(255, 255, 255); border-top: 1px solid rgb(227, 234, 236); box-shadow: rgba(19, 44, 54, 0.14) 0px 24px 40px;}
#mf-navigation .menu[hidden]{display: none;}
#mf-navigation .menu-inner{max-width: 1320px; padding: 32px; margin: auto; display: grid; grid-template-columns: 1fr 1fr 0.85fr; gap: 28px;}
#mf-navigation .group-title{font-size: 12px; text-transform: uppercase; font-weight: 700; color: rgb(100, 118, 125); margin: 0px 0px 14px; line-height: 1.5;}
#mf-navigation .menu-list{display: grid; gap: 5px;}
#mf-navigation .item{display: flex; align-items: flex-start; gap: 15px; padding: 15px 12px; border-radius: 6px; min-height: 96px; transition: background 0.15s;}
#mf-navigation .item:hover,#mf-navigation .item:focus-visible{background: rgb(240, 246, 248);}
#mf-navigation .symbol{width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: 7px; flex: 0 0 auto; background: rgb(230, 243, 252); color: var(--blue);}
#mf-navigation .symbol svg{width: 23px; height: 23px;}
#mf-navigation .coral{background: rgb(255, 240, 236); color: rgb(197, 76, 60);}
#mf-navigation .green{background: rgb(230, 243, 236); color: var(--green);}
#mf-navigation .item strong{display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1.4; margin: 0px 0px 5px;}
#mf-navigation .item strong svg{width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity 0.15s, transform 0.15s;}
#mf-navigation .item:hover strong svg,#mf-navigation .item:focus-visible strong svg{opacity: 1; transform: none;}
#mf-navigation .item p{font-size: 14px; line-height: 1.55; color: rgb(91, 107, 114); margin: 0px; max-width: 270px;}
#mf-navigation .related{display: flex; align-items: center; gap: 9px; margin: 20px 12px 0px; padding-top: 20px; border-top: 1px solid rgb(226, 233, 233); font-size: 14px; color: var(--blue); font-weight: 700;}
#mf-navigation .aside{padding: 23px 25px; border-left: 1px solid rgb(223, 235, 234); background: rgb(240, 247, 245);}
#mf-navigation .aside .eyebrow{font-size: 12px; font-weight: 700; color: var(--green); margin: 0px 0px 17px;}
#mf-navigation .aside h2{font-size: 26px; line-height: 1.2; margin: 0px 0px 14px;}
#mf-navigation .aside p{font-size: 15px; line-height: 1.65; color: rgb(81, 102, 107); margin: 0px 0px 25px;}
#mf-navigation .aside a{display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 47px; border-top: 1px solid rgb(211, 229, 223); color: rgb(30, 96, 85); font-size: 14px; font-weight: 700;}
#mf-navigation .aside a:hover{text-decoration: underline;}
#mf-navigation .scrim{position: fixed; inset: 86px 0px 0px; background: rgba(23, 59, 74, 0.14); z-index: 20; border: 0px; width: 100%; cursor: default;}
#mf-navigation .scrim[hidden]{display: none;}
#mf-navigation .hero{background: rgb(196, 228, 244); overflow: hidden;}
#mf-navigation .hero-inner{max-width: 1320px; margin: auto; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; min-height: 610px; padding: 65px 32px 75px; gap: 40px;}
#mf-navigation .eyebrow{font-size: 13px; font-weight: 700; color: rgb(34, 101, 139); text-transform: uppercase; margin: 0px 0px 24px;}
#mf-navigation h1{font-size: 52px; line-height: 1.1; margin: 0px 0px 25px; max-width: 550px;}
#mf-navigation .intro{font-size: 19px; line-height: 1.65; color: rgb(69, 97, 111); margin-bottom: 28px; max-width: 510px;}
#mf-navigation .hero img{width: 150%; height: auto; max-width: none; display: block; transform: translateX(2%);}
#mf-navigation .following{max-width: 1256px; padding: 48px 32px 120px; margin: auto;}
#mf-navigation .following h2{font-size: 32px; margin: 0px 0px 20px;}
#mf-navigation .following p{font-size: 18px; color: rgb(82, 103, 109); line-height: 1.7; max-width: 720px;}
@media (max-width: 1050px) {#mf-navigation .bar{gap: 18px; padding: 0px 24px;}
#mf-navigation nav{gap: 17px;}
#mf-navigation .logo img{width: 165px;}
#mf-navigation .menu-inner{gap: 15px; padding: 25px 20px;}
#mf-navigation .aside{padding: 20px 18px;}
#mf-navigation .item{gap: 10px; padding: 12px 7px;}
#mf-navigation .item strong{font-size: 16px;}
#mf-navigation h1{font-size: 44px;}}
@media (max-width: 800px) {#mf-navigation .bar{height: 74px; padding: 0px 20px;}
#mf-navigation .logo img{width: 156px;}
#mf-navigation .bar > .cta{margin-left: auto; padding: 10px 13px; font-size: 13px; min-height: 40px;}
#mf-navigation .mobile-toggle{display: flex;}
#mf-navigation .bar nav{display: none; position: absolute; top: 74px; left: 0px; right: 0px; padding: 12px 20px 24px; background: white; max-height: calc(100dvh - 74px); overflow-y: auto; align-items: stretch; gap: 0px; box-shadow: rgba(19, 44, 54, 0.14) 0px 16px 24px;}
#mf-navigation .bar nav.mobile-open{display: flex; flex-direction: column;}
#mf-navigation .bar nav > a,#mf-navigation .bar nav > button{min-height: 52px; border-bottom: 1px solid rgb(229, 235, 237); justify-content: space-between;}
#mf-navigation .bar nav > button[aria-expanded="true"]::after{display: none;}
#mf-navigation .menu{position: static; border: 0px; box-shadow: none; width: auto;}
#mf-navigation .menu-inner{padding: 20px 0px; display: block;}
#mf-navigation .menu-group + .menu-group{margin-top: 24px;}
#mf-navigation .group-title{font-size: 11px; margin-bottom: 7px;}
#mf-navigation .item{min-height: 82px; padding: 12px 4px; gap: 14px;}
#mf-navigation .item p{max-width: none; font-size: 14px;}
#mf-navigation .item strong{font-size: 16px;}
#mf-navigation .aside{border-width: 1px 0px 0px; border-style: solid none none; border-color: rgb(220, 231, 228) currentcolor currentcolor; border-image: none; margin-top: 25px; padding: 20px;}
#mf-navigation .aside h2{font-size: 23px;}
#mf-navigation .aside p{margin-bottom: 15px;}
#mf-navigation .scrim{inset: 74px 0px 0px;}
#mf-navigation .hero-inner{display: flex; flex-direction: column-reverse; padding: 30px 20px 48px; gap: 25px; min-height: 0px;}
#mf-navigation .hero img{width: 100%; transform: none; max-width: 500px;}
#mf-navigation h1{font-size: 36px;}
#mf-navigation .intro{font-size: 17px;}
#mf-navigation .hero .cta{width: 100%;}
#mf-navigation .following{padding: 35px 20px 70px;}
#mf-navigation .following h2{font-size: 28px;}}
@media (min-width: 801px) {#mf-navigation .menu{top: calc(100% + 10px); left: 50%; width: calc(100% - 64px); max-width: 1180px; transform: translateX(-50%); border: 1px solid rgb(223, 231, 233); border-radius: 8px; box-shadow: rgba(19, 44, 54, 0.11) 0px 12px 32px;}
#mf-navigation .menu-inner{padding: 26px; gap: 24px; grid-template-columns: 1fr 1fr 0.85fr;}
#mf-navigation .scrim{display: none;}
#mf-navigation .aside{border-radius: 0px 5px 5px 0px;}}
#mf-navigation .integration-grid{grid-template-columns: repeat(3, minmax(0px, 1fr)); padding-bottom: 22px;}
#mf-navigation .integration-grid .item{min-height: 78px; align-items: center;}
#mf-navigation .brand{width: 48px; height: 44px; object-fit: contain; flex: 0 0 auto;}
#mf-navigation .integration-grid .item strong{font-size: 16px; margin-bottom: 2px;}
#mf-navigation .integration-grid .item p{font-size: 13px;}
#mf-navigation .integration-footer{display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 19px 28px; background: rgb(240, 247, 245); border-top: 1px solid rgb(221, 233, 229); border-radius: 0px 0px 8px 8px;}
#mf-navigation .integration-footer a{display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: rgb(30, 96, 85);}
#mf-navigation .integration-footer a:hover{text-decoration: underline;}
#mf-navigation .integration-footer .api-link{color: var(--blue);}
#mf-navigation .integration-grid .menu-group{display: grid; grid-template-rows: auto 1fr auto; min-width: 0px;}
#mf-navigation .integration-grid .menu-list{grid-template-rows: repeat(3, 1fr);}
#mf-navigation .integration-grid .item{display: grid; grid-template-columns: 56px minmax(0px, 1fr); gap: 14px; align-items: start; padding: 14px 10px; min-height: 94px;}
#mf-navigation .brand-slot{width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgb(245, 248, 249); border: 1px solid rgb(228, 235, 237); border-radius: 7px;}
#mf-navigation .brand-slot .brand{width: 42px; height: 40px; object-fit: contain;}
#mf-navigation .integration-grid .item strong{min-height: 23px; line-height: 23px; margin: 1px 0px 4px;}
#mf-navigation .integration-grid .item p{min-height: 40px; line-height: 20px;}
#mf-navigation .integration-grid .related{margin: 16px 10px 0px; min-height: 47px; padding-top: 18px;}
#mf-navigation .integration-footer{display: grid; grid-template-columns: 1fr 1fr;}
#mf-navigation .integration-footer .api-link{justify-self: end;}
@media (max-width: 800px) {#mf-navigation .integration-grid{display: block;}
#mf-navigation .integration-footer{display: flex; align-items: flex-start; flex-direction: column; padding: 20px 16px;}
#mf-navigation .integration-grid .menu-group + .menu-group{margin-top: 22px;}}
#mf-navigation .bar > .cta{background: transparent; color: rgb(20, 36, 44); border: 1px solid;}
#mf-navigation .bar > .cta:hover{background: rgb(20, 36, 44); color: rgb(255, 255, 255); border-color: rgb(20, 36, 44);}
#mf-navigation.hovering{background: white; box-shadow: rgb(220, 229, 230) 0px 1px 0px;}
#mf-navigation nav > a{position: relative;}
#mf-navigation nav > a:hover,#mf-navigation nav > a:focus-visible{color: var(--blue);}
@media (min-width: 801px) {#mf-navigation nav > a:hover::after,#mf-navigation nav > a:focus-visible::after{content: ""; position: absolute; bottom: -19px; left: 0px; right: 0px; height: 3px; background: var(--blue);}}
@media (prefers-reduced-motion: reduce) {#mf-navigation *{transition: none !important;}}
#mf-navigation{font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5;color:#14242c;position:relative;top:0;z-index:80;background:#fff;margin:0;width:100%;}
#mf-navigation button,#mf-navigation a{letter-spacing:0;text-transform:none;box-shadow:none;}
#mf-navigation p{margin-top:0;}
#mf-navigation .scrim{display:none;}
#mf-navigation .logo{width:188px;height:48px;flex-shrink:0;}
#mf-navigation .logo img{width:100%;height:100%;object-fit:contain;}
@media(max-width:800px){#mf-navigation .logo{width:140px;max-width:36vw;height:40px;}}
#mf-navigation[data-hero]{margin-bottom:calc(-1 * var(--mf-nav-height));background:transparent;}
body.mf-navigation-active main .entry-content>.mf-hero-block:first-child{padding-top:var(--mf-nav-height);}
#mf-navigation.open,#mf-navigation.scrolled,#mf-navigation.hovering{background:#fff;}
#mf-navigation[data-dark]:not(.open):not(.scrolled):not(.hovering) .logo img{filter:brightness(0) invert(1);}
#mf-navigation[data-dark]:not(.open):not(.scrolled):not(.hovering) nav>a,#mf-navigation[data-dark]:not(.open):not(.scrolled):not(.hovering) nav>button,#mf-navigation[data-dark]:not(.open):not(.scrolled):not(.hovering) .bar>.cta,#mf-navigation[data-dark]:not(.open):not(.scrolled):not(.hovering) .mobile-toggle{color:white;}
#mf-navigation .menu{top:calc(100% + 10px);max-height:calc(100dvh - var(--mf-nav-top,0px) - var(--mf-nav-height) - 20px);overflow-y:auto;}
@media(max-width:800px){#mf-navigation .bar{gap:16px;}#mf-navigation .logo img{max-width:36vw;}#mf-navigation .bar nav{max-height:calc(100dvh - 74px - var(--mf-nav-top,0px));}#mf-navigation .menu{max-height:none;overflow:visible;}#mf-navigation[data-dark].open .bar>.cta{color:#14242c;}}