/* ---- Modix Use Cases: scoped base (safe inside WordPress / GeneratePress / Elementor) ---- */
#mxc{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;color:#151922;background:#fff;line-height:1.5;-webkit-font-smoothing:antialiased;width:100%;overflow-x:hidden;text-align:left}
#mxc, #mxc *, #mxc *::before, #mxc *::after{box-sizing:border-box}
#mxc *{font-family:inherit!important}
#mxc h1,#mxc h2,#mxc h3,#mxc h4,#mxc p,#mxc ul,#mxc li,#mxc figure,#mxc table{margin:0;padding:0;font-family:inherit!important;text-transform:none;letter-spacing:normal}
#mxc ul{list-style:none}
#mxc a{text-decoration:none}
#mxc a:hover,#mxc a:focus{text-decoration:none}
#mxc button{cursor:pointer;line-height:normal;text-transform:none;letter-spacing:normal;text-shadow:none;box-shadow:none;background-image:none}
#mxc .button,#mxc a.button,#mxc .case-link,#mxc .contact-button,#mxc .quote-submit{text-transform:none!important;letter-spacing:normal!important;text-decoration:none!important;background-image:none}
#mxc img,#mxc video{max-width:100%;border:0;height:auto}
#mxc .quote-form select{background:#fff;border:1px solid #dedfe3;border-radius:6px;color:#151922;font:inherit;font-size:15px;padding:13px 14px;width:100%;-webkit-appearance:menulist;appearance:menulist}
#mxc .quote-form input{background:#fff;border:1px solid #dedfe3;border-radius:6px;color:#151922;font:inherit;font-size:15px;padding:13px 14px;width:100%}
body.mxc-modal-open{overflow:hidden}
/* ---- break out of the Elementor + GeneratePress containers so the section runs edge to edge ---- */
.elementor-section:has(#mxc)>.elementor-container{max-width:none!important;width:100%!important}
.elementor-column:has(#mxc)>.elementor-widget-wrap{padding:0!important}
.elementor-widget:has(#mxc){margin:0!important;width:100%!important}
.e-con:has(#mxc),.e-con:has(#mxc)>.e-con-inner{padding:0!important;max-width:none!important;width:100%!important;--content-width:100%;--width:100%;--padding-left:0;--padding-right:0;--padding-top:0;--padding-bottom:0}
.site.grid-container:has(#mxc),.site-content:has(#mxc),.content-area:has(#mxc),.inside-article:has(#mxc),.entry-content:has(#mxc){max-width:none!important;padding:0!important;margin-left:0!important;margin-right:0!important}
#mxc{--red: #c90812; --red-dark: #a9040d; --ink: #151922; --muted: #69707a; --line: #dedfe3; --soft: #f6f6f7; --page: #fbfbfa; --white: #ffffff; --shadow: 0 14px 36px rgba(15, 20, 30, 0.08);}
#mxc, #mxc *, #mxc *::before, #mxc *::after{box-sizing: border-box;}
#mxc{margin: 0; background: var(--page); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;}
#mxc a{color: inherit; text-decoration: none;}
#mxc .page-shell{margin: 0 auto; max-width: 1400px; padding: 22px 34px 0;}
#mxc .hero{align-items: center; display: flex; justify-content: space-between; gap: 24px;}
#mxc .hero h1{font-size: clamp(30px, 3vw, 40px); letter-spacing: 0; line-height: 1.02; margin: 0; white-space: nowrap;}
#mxc .hero-actions{display: flex; gap: 18px;}
#mxc .button{align-items: center; border: 0; border-radius: 6px; cursor: pointer; display: inline-flex; font-size: 16px; font-weight: 800; justify-content: center; min-height: 56px; padding: 0 34px; white-space: nowrap;}
#mxc .button.primary{background: var(--red); color: var(--white);}
#mxc .button.secondary{background: var(--white); border: 1.5px solid var(--red); color: var(--red);}
#mxc .explore{margin-top: 14px; min-height: 58px; position: relative;}
#mxc .section-heading{align-items: center; display: grid; gap: 14px; grid-template-columns: auto auto 1fr; min-height: 58px;}
#mxc .section-heading::after{background: var(--line); content: ""; height: 1px;}
#mxc .section-heading::before{border: solid var(--red); border-width: 0 2px 2px 0; content: ""; height: 8px; justify-self: center; order: 2; transform: rotate(45deg) translateY(-2px); transition: transform 180ms ease; width: 8px;}
#mxc .section-heading h2, #mxc .cases h2{font-size: 20px; margin: 0;}
#mxc .section-heading p{background: #fff3f4; border: 1px solid rgba(201, 8, 18, 0.18); border-radius: 999px; color: var(--red); font-size: 12px; font-weight: 850; margin: 0; order: 1; padding: 7px 11px;}
#mxc .section-heading::after{order: 3;}
#mxc .filter-panel{max-height: 0; opacity: 0; overflow: hidden; transform: translateY(-6px); transition: max-height 260ms ease, opacity 180ms ease, transform 220ms ease;}
#mxc .explore:hover .filter-panel, #mxc .explore:focus-within .filter-panel{max-height: 210px; opacity: 1; transform: translateY(0);}
#mxc .explore:hover .section-heading::before, #mxc .explore:focus-within .section-heading::before{transform: rotate(225deg) translate(-2px, -2px);}
#mxc .filter-row{align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 14px; grid-template-columns: 104px 1fr; padding: 6px 0;}
#mxc .application-row{padding: 6px 0 8px;}
#mxc .filter-label{color: #313740; font-size: 14px; font-weight: 750;}
#mxc .icon-grid{display: grid; gap: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden;}
#mxc .icon-filter{align-items: center; background: transparent; border: 0; border-right: 1px solid var(--line); border-radius: 0; color: var(--ink); cursor: pointer; display: grid; gap: 4px; grid-template-rows: 44px auto; justify-content: center; min-height: 78px; padding: 5px 8px 7px; position: relative; transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;}
#mxc .icon-filter:last-child{border-right: 0;}
#mxc .icon-filter:hover{background: #fff3f4; box-shadow: inset 0 0 0 1px rgba(201, 8, 18, 0.18), 0 8px 18px rgba(201, 8, 18, 0.08); color: var(--red); transform: translateY(-1px);}
#mxc .icon-filter.active{color: var(--red);}
#mxc .icon-filter.active::after{background: var(--red); border-radius: 999px; bottom: 0; content: ""; height: 4px; left: 18%; position: absolute; right: 18%;}
#mxc .icon-filter span:last-child{font-size: 11px; font-weight: 850; line-height: 1.15; text-align: center;}
#mxc .icon{align-self: end; display: grid; height: 44px; place-items: center; width: 100%;}
#mxc .icon svg{display: block; fill: none; height: 40px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; width: 40px;}
#mxc .status-bar{align-items: center; background: #f0f0f1; border-radius: 4px; display: flex; gap: 30px; margin-top: 12px; min-height: 42px; padding: 0 18px;}
#mxc .status-bar span{color: #303640; font-size: 14px; font-weight: 700;}
#mxc .status-bar strong{color: var(--red);}
#mxc .status-bar button{background: transparent; border: 0; color: #252a31; cursor: pointer; font: inherit; font-size: 14px; font-weight: 750; padding: 0; text-decoration: underline;}
#mxc .cases{margin-top: 16px;}
#mxc .cases h2{font-size: 27px; margin-bottom: 12px;}
#mxc .case-grid{display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr));}
#mxc .case-card{background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 5px 20px rgba(20, 24, 32, 0.05); min-height: 330px; overflow: hidden; transition: opacity 180ms ease, transform 180ms ease;}
#mxc .case-card.is-hidden{display: none;}
#mxc .case-open{background: #ececec; border: 0; cursor: pointer; display: block; aspect-ratio: 1.08 / 1; height: auto; overflow: hidden; padding: 0; position: relative; text-align: left; width: 100%;}
#mxc .case-open::before{background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.12)); content: ""; inset: 0; position: absolute; z-index: 1;}
#mxc .case-image{border: 0; display: block; height: 100%; object-fit: cover; object-position: center; transition: transform 240ms ease; width: 100%;}
#mxc .case-youtube{pointer-events: none;}
#mxc .case-card:hover .case-image{transform: scale(1.04);}
#mxc .case-image-fallback{align-items: center; background: linear-gradient(135deg, #f0f0f1, #d9dcdf); color: #5f6670; display: none; font-size: 18px; font-weight: 800; inset: 0; justify-content: center; padding: 22px; position: absolute; text-align: center; z-index: 2;}
#mxc .media-badge{background: rgba(201, 8, 18, 0.92); border-radius: 999px; bottom: 12px; color: #ffffff; font-size: 11px; font-weight: 900; left: 12px; padding: 6px 9px; position: absolute; text-transform: uppercase; z-index: 3;}
#mxc .case-body{display: grid; gap: 14px; padding: 16px 18px 18px;}
#mxc .case-body h3{font-size: 20px; line-height: 1.1; margin: 0;}
#mxc .case-footer{align-items: center; display: flex; gap: 14px; justify-content: space-between;}
#mxc .case-tag{border: 1px solid rgba(201, 8, 18, 0.35); border-radius: 4px; color: var(--red); font-size: 12px; font-weight: 850; padding: 7px 10px;}
#mxc .case-footer a{color: var(--red); font-size: 13px; font-weight: 900; white-space: nowrap;}
#mxc .case-link{background: transparent; border: 0; color: var(--red); cursor: pointer; font: inherit; font-size: 13px; font-weight: 900; padding: 0; white-space: nowrap;}
#mxc .case-link::after{content: " →"; font-size: 18px; line-height: 0;}
body.mxc-modal-open{overflow: hidden;}
#mxc .modal{display: none; inset: 0; position: fixed; z-index: 80;}
#mxc .modal.is-open{display: block;}
#mxc .modal-backdrop{background: rgba(16, 18, 23, 0.62); border: 0; cursor: pointer; inset: 0; position: absolute; width: 100%;}
#mxc .modal-panel{background: var(--white); border-radius: 10px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(280px, 58vh) auto; max-height: calc(100vh - 32px); left: 50%; max-width: min(920px, calc(100vw - 48px)); overflow: hidden; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%;}
#mxc .modal-close{align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; display: flex; font-size: 30px; height: 42px; justify-content: center; line-height: 1; position: absolute; right: 16px; top: 16px; width: 42px; z-index: 4;}
#mxc .modal-media{background: #171a1f; display: grid; grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 0; place-items: center; position: relative;}
#mxc .modal-media img, #mxc .modal-media iframe, #mxc .modal-media video{border: 0; display: block; height: 100%; min-height: 0; object-fit: contain; object-position: center; width: 100%;}
#mxc .modal-media iframe{aspect-ratio: auto; height: 100%; max-height: 100%;}
#mxc .modal-media img{background: #111318;}
#mxc .video-fallback{background: rgba(255, 255, 255, 0.94); border-radius: 999px; bottom: 16px; color: var(--red); font-size: 13px; font-weight: 900; left: 50%; padding: 9px 14px; position: absolute; transform: translateX(-50%); z-index: 3;}
#mxc .video-fallback-large{align-items: center; background: var(--red); border-radius: 6px; color: var(--white); display: inline-flex; font-size: 15px; justify-content: center; min-width: 220px; padding: 14px 20px;}
#mxc .modal-placeholder{align-items: center; color: #ffffff; display: grid; font-size: 28px; font-weight: 850; height: 100%; min-height: 280px; padding: 40px; text-align: center;}
#mxc .modal-content{min-height: 0; max-height: 100%; overflow-y: auto; padding: 28px 34px 30px; scrollbar-gutter: stable;}
#mxc .modal-eyebrow{color: var(--red); font-size: 13px; font-weight: 900; letter-spacing: 0.02em; margin: 0 0 14px; text-transform: uppercase;}
#mxc .modal-content h2{font-size: 30px; letter-spacing: 0; line-height: 1.05; margin: 0 0 12px;}
#mxc .modal-content p:not(.modal-eyebrow){color: #3a4049; font-size: 17px; font-weight: 520; line-height: 1.55; margin: 0 0 20px;}
#mxc .modal-details{border: 1px solid var(--line); border-radius: 8px; margin: 0 0 24px; overflow: hidden;}
#mxc .modal-details:empty{display: none;}
#mxc .detail-row{display: grid; gap: 12px; grid-template-columns: 112px 1fr; padding: 14px 16px;}
#mxc .detail-row + .detail-row{border-top: 1px solid var(--line);}
#mxc .detail-row span{color: var(--red); font-size: 12px; font-weight: 900; text-transform: uppercase;}
#mxc .detail-row p{color: #242a32; font-size: 14px; font-weight: 620; line-height: 1.35; margin: 0;}
#mxc .modal-link{background: var(--red); border-radius: 6px; color: var(--white); display: inline-flex; font-size: 15px; font-weight: 900; justify-content: center; padding: 14px 22px; width: auto;}
#mxc .contact-band{background: var(--red); margin-top: 28px;}
#mxc .quote-panel{background: var(--white); border-radius: 10px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); display: grid; gap: 26px; grid-template-columns: minmax(260px, 0.75fr) minmax(320px, 1fr); left: 50%; max-height: calc(100vh - 32px); max-width: min(920px, calc(100vw - 48px)); overflow-y: auto; padding: 42px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 100%;}
#mxc .quote-panel.is-thanks{grid-template-columns: 1fr; max-width: min(560px, calc(100vw - 48px));}
#mxc .quote-panel.is-thanks .quote-copy, #mxc .quote-panel.is-thanks .quote-form{display: none;}
#mxc .quote-copy h2{font-size: 34px; line-height: 1.05; margin: 0 0 14px;}
#mxc .quote-copy p:not(.modal-eyebrow){color: #3a4049; font-size: 17px; line-height: 1.55; margin: 0;}
#mxc .quote-form{display: grid; gap: 14px;}
#mxc .quote-form label{display: grid; gap: 7px;}
#mxc .quote-form span{color: #242a32; font-size: 13px; font-weight: 850;}
#mxc .quote-form em{color: var(--muted); font-style: normal; font-weight: 650;}
#mxc .quote-form input, #mxc .quote-form textarea{background: #ffffff; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: inherit; font-size: 15px; padding: 13px 14px; width: 100%;}
#mxc .quote-form input:focus, #mxc .quote-form textarea:focus{border-color: var(--red); box-shadow: 0 0 0 3px rgba(201, 8, 18, 0.12); outline: 0;}
#mxc .quote-message{grid-column: 1 / -1;}
#mxc .quote-submit{background: var(--red); border: 0; border-radius: 6px; color: var(--white); cursor: pointer; font: inherit; font-size: 15px; font-weight: 900; padding: 15px 20px;}
#mxc .quote-note{color: var(--red); font-size: 13px; font-weight: 750; margin: 0;}
#mxc .quote-thanks{align-content: center; display: grid; gap: 14px; justify-items: start; min-height: 260px;}
#mxc .quote-thanks[hidden]{display: none;}
#mxc .quote-thanks h2{color: var(--red); font-size: 40px; line-height: 1.08; margin: 0;}
#mxc .quote-thanks-main{color: var(--ink); font-size: 24px; font-weight: 850; line-height: 1.25; margin: 0;}
#mxc .quote-thanks-sub{color: #3a4049; font-size: 17px; line-height: 1.55; margin: 0 0 12px;}
#mxc .contact-inner{align-items: center; color: var(--white); display: grid; gap: 18px; grid-template-columns: 1fr auto; margin: 0 auto; max-width: 1400px; min-height: 70px; padding: 10px 34px;}
#mxc .floating-help{align-items: center; background: var(--red); border: 0; border-radius: 999px; bottom: 24px; box-shadow: 0 14px 36px rgba(15, 20, 30, 0.24); color: var(--white); cursor: pointer; display: inline-flex; font: inherit; font-weight: 900; gap: 10px; height: 54px; justify-content: flex-start; overflow: hidden; padding: 0 0 0 54px; position: fixed; right: 24px; transition: width 180ms ease, background-color 180ms ease, box-shadow 180ms ease, opacity 160ms ease, transform 160ms ease; width: 54px; z-index: 30;}
#mxc .floating-help::before{background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-8 8H7l-4 3v-6a8 8 0 1 1 18-5Z'/%3E%3Cpath d='M8 11h8'/%3E%3Cpath d='M8 15h5'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 28px 28px; content: ""; height: 54px; left: 0; position: absolute; top: 0; width: 54px;}
#mxc .floating-help.is-hidden{opacity: 0; pointer-events: none; transform: translateY(12px);}
#mxc .floating-help:hover, #mxc .floating-help:focus-visible{background: var(--red-dark); box-shadow: 0 18px 44px rgba(15, 20, 30, 0.28); outline: 0; width: 176px;}
#mxc .help-label{font-size: 15px; opacity: 0; padding-right: 18px; transform: translateX(-8px); transition: opacity 140ms ease, transform 160ms ease; white-space: nowrap;}
#mxc .floating-help:hover .help-label, #mxc .floating-help:focus-visible .help-label{opacity: 1; transform: translateX(0);}
#mxc .contact-inner h2{font-size: 22px; line-height: 1; margin: 0 0 4px;}
#mxc .contact-inner p{font-size: 14px; font-weight: 550; margin: 0;}
#mxc .contact-button{background: var(--white); border: 0; border-radius: 6px; color: var(--red); cursor: pointer; font: inherit; font-size: 15px; font-weight: 900; padding: 14px 42px;}
@media (max-width: 980px){#mxc .hero, #mxc .contact-inner{align-items: flex-start; grid-template-columns: 1fr;}
#mxc .hero{flex-direction: column;}
#mxc .hero h1{font-size: 28px; white-space: normal;}
#mxc .hero-actions, #mxc .contact-inner{width: 100%;}
#mxc .hero-actions{flex-direction: column; gap: 10px;}
#mxc .hero-actions .button{width: 100%;}
#mxc .section-heading{grid-template-columns: auto auto 1fr;}
#mxc .section-heading p{font-size: 11px; padding: 6px 9px;}
#mxc .filter-panel, #mxc .explore:hover .filter-panel, #mxc .explore:focus-within .filter-panel{max-height: 320px; opacity: 1; transform: translateY(0);}
#mxc .filter-row{grid-template-columns: 1fr;}
#mxc .icon-grid{grid-template-columns: repeat(5, 96px); overflow-x: auto; overflow-y: hidden;}
#mxc .case-grid{grid-template-columns: 1fr;}
#mxc .contact-inner{align-items: center; display: grid; grid-template-columns: 1fr auto; padding: 10px 18px;}
#mxc .contact-button{padding: 13px 18px; text-align: center; width: auto;}
#mxc .modal-panel{grid-template-rows: minmax(240px, 42vh) auto; height: calc(100vh - 32px); max-height: calc(100vh - 32px); overflow: auto;}
#mxc .modal-media, #mxc .modal-media img, #mxc .modal-media iframe, #mxc .modal-media video{min-height: 0;}
#mxc .modal-content{overflow: visible; padding: 32px 24px 28px;}
#mxc .detail-row{grid-template-columns: 1fr;}
#mxc .quote-panel{grid-template-columns: 1fr; padding: 34px 24px 26px;}
#mxc .floating-help{bottom: 18px; right: 18px;}}
/* ---- overrides that must win over the scoped prototype rules (placed last on purpose) ---- */
#mxc .modal{z-index:100000!important}
#mxc .floating-help{z-index:99990!important;left:24px!important;right:auto!important} /* Zoho SalesIQ chat bubble owns the bottom-right corner */
@media (max-width: 980px){ #mxc .floating-help{left:18px!important} }