/* Flutter Service OS adaptation. Scoped so all existing service pages retain their CSS. */
body.mxso-home #bottomNav{display:none!important}
body.mxso-home .topbar{display:none!important}
body.mxso-home #page{padding:0!important;max-width:none!important}
body.mxso-home .page{background:#02060d!important}
body.mxso-home:not([data-mx-route="home"]) #bottomNav{display:revert!important}
.mxso-page{min-height:100vh;max-width:740px;margin:auto;padding:14px 16px 26px;background:#02060d;color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
.mxso-header{display:flex;align-items:center;gap:10px;margin:4px 0 9px}.mxso-header img{width:48px;height:48px;object-fit:contain}.mxso-header div{flex:1}.mxso-header strong{display:block;font-size:16px}.mxso-header small{display:block;color:#b9cbe0;font-size:11px}.mxso-header>a{display:grid;place-items:center;color:#fff;font-size:26px;text-decoration:none;width:40px;height:40px}
.mxso-page h1{text-align:center;font-size:clamp(19px,5vw,22px);margin:7px 0 2px;font-weight:900}.mxso-subtitle{text-align:center;color:#b9cbe0;font-size:11.5px;margin:0 0 13px}.mxso-page h2{font-size:17px;margin:16px 0 9px;font-weight:850}
.mxso-hero{height:151px;border-radius:15px;overflow:hidden;background-size:cover;background-position:center right;display:flex;flex-direction:column;justify-content:center;padding:14px;color:#fff;text-decoration:none;gap:3px}.mxso-hero strong{font-size:21px;font-weight:900}.mxso-hero span{font-size:12px}.mxso-hero b{font-size:14px;color:#ff4c89;margin-top:7px}
.mxso-dots{display:flex;justify-content:center;gap:8px;margin:6px auto 13px}.mxso-dots button{background:#6d7782;border:0;border-radius:50%;width:7px;height:7px;padding:0;cursor:pointer}.mxso-dots button.active{background:#ff0b5f;width:10px;height:10px}
.mxso-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.mxso-tile{border:1px solid #dde4ec;border-radius:13px;min-height:92px;padding:5px 3px;background:#f5f7fa;color:#17212b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-decoration:none;text-align:center;font-size:10.5px;font-weight:800;line-height:1.1}.mxso-tile .mxso-tile-icon{font-size:27px;line-height:29px}.mxso-tile-top{background:#111e2b;border-color:#2b3b4e;color:#fff}.mxso-promo{min-height:99px;display:flex;position:relative;flex-direction:column;justify-content:center;border-radius:14px;background-size:cover;background-position:center right;padding:14px;color:#fff;text-decoration:none}.mxso-promo strong{font-size:16px}.mxso-promo small{color:#dae5f2}.mxso-promo b{position:absolute;right:12px;top:35px;font-size:25px}
.mxso-launch{position:fixed;inset:0;z-index:2147482000;background:#030813;display:flex;flex-direction:column;color:#fff;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow-y:auto}.mxso-launching{overflow:hidden}.mxso-splash{position:relative;flex:1;display:grid;place-items:center;min-height:100dvh;background:#030813}.mxso-splash img{width:100%;height:100%;object-fit:contain;max-width:650px}.mxso-splash span{position:absolute;bottom:8%;font-size:13px;color:#ced8e9}.mxso-intro{position:relative;flex:1;min-height:0;background-position:center top;background-repeat:no-repeat;background-size:cover}.mxso-top-skip{position:absolute;right:20px;top:max(20px,env(safe-area-inset-top));color:#fff;background:none;border:0;font-size:14px;padding:12px;cursor:pointer}.mxso-intro-message{position:absolute;bottom:24px;left:15px;right:15px;text-align:center}.mxso-intro-message h1{font-size:clamp(25px,6vw,31px);font-weight:900;margin:0 0 8px}.mxso-intro-message p{font-size:15px;color:#ced8e9;line-height:1.35;max-width:290px;margin:auto}.mxso-intro-footer{padding:5px 18px max(22px,env(safe-area-inset-bottom));background:#030813}.mxso-launch-dots{display:flex;gap:8px;justify-content:center;margin:6px 0 20px}.mxso-launch-dots i{width:8px;height:8px;border-radius:8px;background:#66758b}.mxso-launch-dots i.active{width:17px;background:#ff0062}.mxso-launch-actions{display:flex;gap:12px;align-items:center}.mxso-launch-actions>button:first-child{color:#fff;background:transparent;border:0;padding:12px;font-size:14px;cursor:pointer}.mxso-primary{background:#ff0062;color:#fff;border:0;border-radius:28px;height:50px;padding:0 25px;flex:1;font-weight:850;font-size:15px;cursor:pointer}
@media(max-width:375px){.mxso-page{padding-inline:12px}.mxso-grid{gap:7px}.mxso-tile{min-height:78px}.mxso-hero{height:132px}.mxso-intro-message p{font-size:13px}}
@media(min-width:800px){.mxso-launch{align-items:center}.mxso-intro,.mxso-intro-footer{width:min(100%,460px)}.mxso-intro{min-height:calc(100dvh - 114px)}.mxso-page{border-left:1px solid #182336;border-right:1px solid #182336}}

/* Service OS responsive layout / nav parity correction (2026-11-09).
   Scoped to Home; media players, API pages and service route CSS are unchanged. */
body.mxso-home #bottomNav{display:grid!important}
body.mxso-home .app-shell{padding-bottom:110px!important}
body.mxso-home #page{width:100%!important;margin:0!important}
body.mxso-home .topbar{display:grid!important}
.mxso-page{max-width:1320px;width:100%;background:#02060d;margin-inline:auto;padding:clamp(12px,2vw,26px) clamp(14px,2.6vw,32px) 38px}
.mxso-layout{width:100%;max-width:100%}
.mxso-header{margin:4px 0 18px}
.mxso-header img{width:56px;height:56px}
.mxso-page h1{font-size:clamp(21px,2.3vw,30px)}
.mxso-subtitle{font-size:13px}
.mxso-hero{height:clamp(178px,20vw,275px);padding:clamp(18px,3vw,42px);background-position:center}
.mxso-hero strong{font-size:clamp(25px,3vw,42px)}
.mxso-hero span{font-size:clamp(12px,1.3vw,16px)}
.mxso-page h2{font-size:clamp(18px,2vw,24px);margin-top:25px}
.mxso-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}
.mxso-tile{min-height:128px;gap:11px;font-size:13px;border:1px solid #263447;background:#101c2c;color:#fff}
.mxso-tile:hover,.mxso-tile:focus-visible{background:#1b2b3f;border-color:#ff0757;outline:none}
.mxso-tile-top{background:#142335}
.mxso-tile .mxso-tile-icon{display:grid;place-items:center;line-height:1}
.mxso-tile .mxso-tile-icon svg{width:32px;height:32px}
.mxso-promo{min-height:170px;padding:25px}
@media(max-width:980px){.mxso-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.mxso-tile{min-height:108px}}
@media(max-width:620px){
 body.mxso-home .topbar{display:none!important}
 body.mxso-home .app-shell{padding-left:0!important;padding-right:0!important}
 .mxso-page{padding:14px 12px 26px;border:0!important}
 .mxso-header img{width:48px;height:48px}
 .mxso-page h1{font-size:21px}
 .mxso-hero{height:151px;padding:14px}
 .mxso-hero strong{font-size:21px}
 .mxso-grid{gap:8px}
 .mxso-tile{min-height:84px;padding:7px 3px;gap:7px;font-size:10px}
 .mxso-tile .mxso-tile-icon svg{width:26px;height:26px}
 .mxso-page h2{font-size:17px;margin-top:18px}
 .mxso-promo{min-height:104px;padding:14px}
 body.mxso-home #bottomNav{display:grid!important}
}

/* Screen-reference alignment — web Home only. Preserve all service routes, media elements, PiP, APIs. */
@media (min-width: 621px) {
  body.mxso-home #page { padding: 0 16px 120px !important; }
  .mxso-page { max-width: 920px; padding: 20px 22px 45px; border: 0 !important; }
  .mxso-hero { height: clamp(175px, 19vw, 215px); padding: 22px 30px; }
  .mxso-hero strong { font-size: clamp(24px, 2.7vw, 32px); }
  .mxso-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .mxso-tile { min-height: 132px; font-size: 15px; gap: 12px; border-radius: 20px; }
  .mxso-tile .mxso-tile-icon svg { width: 38px; height: 38px; }
  .mxso-page h2 { font-size: 23px; margin: 28px 0 16px; }
  .mxso-promo { min-height: 145px; }
}
/* The Flutter catalogue is light on dark; earlier CSS inverted it on desktop. */
body.mxso-home .mxso-tile:not(.mxso-tile-top) {
  background: #f5f6fa;
  color: #101821;
  border-color: #dfe4eb;
}
body.mxso-home .mxso-tile-top {
  background: #122231;
  border-color: #2c3e50;
  color: #fff;
}
body.mxso-home .mxso-tile:not(.mxso-tile-top):hover,
body.mxso-home .mxso-tile:not(.mxso-tile-top):focus-visible {
  background: #e9eef7;
  border-color: #ff0757;
}
body.mxso-home .mxso-hero { flex-shrink: 0; background-repeat: no-repeat; }
body.mxso-home .mxso-hero strong,
body.mxso-home .mxso-hero span,
body.mxso-home .mxso-hero b { position: relative; z-index: 1; }
/* Prevent squeezed and overlapping text in a four-across grid. */
body.mxso-home .mxso-tile { min-width: 0; overflow-wrap: anywhere; box-sizing: border-box; }
body.mxso-home .mxso-page h1,
body.mxso-home .mxso-page h2 { line-height: 1.22; }
@media (max-width: 620px) {
  body.mxso-home #page { width: 100% !important; padding: 0 0 110px !important; }
  .mxso-page { max-width: none; padding: 12px 14px 30px; }
  .mxso-hero { height: clamp(143px, 40vw, 185px); background-position: center right; }
  .mxso-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .mxso-tile { min-height: clamp(88px, 23vw, 118px); border-radius: 17px; font-size: clamp(10px, 2.7vw, 13px); }
  .mxso-tile .mxso-tile-icon svg { width: 29px; height: 29px; }
  .mxso-page h2 { margin-top: 21px; }
}
@media (max-width: 350px) {
 .mxso-page { padding-inline: 9px; }
 .mxso-grid { gap: 6px; }
 .mxso-tile { font-size: 9.5px; }
}

/* WhatsApp Flutter reference: preserve exactly four visible service columns
   and white All Services tiles across device sizes. */
body.mxso-home .mxso-grid { grid-template-columns:repeat(4,minmax(0,1fr))!important; }
body.mxso-home .mxso-grid:not(.mxso-top) .mxso-tile {background:#f5f6fa!important;color:#101821!important;border-color:#dfe4eb!important;}
body.mxso-home .mxso-grid.mxso-top .mxso-tile {background:#122231!important;color:#fff!important;border-color:#2c3e50!important;}
body.mxso-home .mxso-hero {isolation:isolate;}
body.mxso-home .mxso-hero strong,body.mxso-home .mxso-hero span,body.mxso-home .mxso-hero b {max-width:62%;text-wrap:pretty;}
@media(max-width:620px){
 body.mxso-home .mxso-page{width:100%!important;box-sizing:border-box!important;}
 body.mxso-home .mxso-grid{gap:8px!important;}
 body.mxso-home .mxso-tile{min-width:0!important;}
}

/* Chromium verified: prevent Home content from exceeding desktop viewport
   when the existing #page has both width:100% and horizontal padding. */
body.mxso-home #page { box-sizing:border-box!important; }

/* Dart ServiceSelectionScreen: only one header, no legacy bottom bar. */
body.mxso-home .topbar {display:none!important}
body.mxso-home #bottomNav {display:none!important}
body.mxso-home .mxso-page {max-width:740px!important;margin-inline:auto!important}
body.mxso-home .mxso-header {height:62px;display:flex;align-items:center;gap:9px;margin:0 0 6px;min-width:0}
body.mxso-home .mxso-close {flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#112132;border:1px solid #37475b;color:white;text-decoration:none;font-size:31px;font-weight:300;line-height:1}
body.mxso-home .mxso-greeting {flex:1;min-width:0;overflow:hidden}
body.mxso-home .mxso-greeting strong {font-size:16px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.mxso-home .mxso-greeting small {font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#bac7dd}
body.mxso-home #mxsoVerb {color:#ff4b8a;font-weight:700}
body.mxso-home .mxso-head-action {display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:50%;background:#0d1522;color:white;cursor:pointer}
body.mxso-home .mxso-head-action:focus-visible,body.mxso-home .mxso-close:focus-visible {outline:2px solid #ff0757}
body.mxso-home #page {padding:0!important}
@media (max-width:620px) {body.mxso-home .mxso-page {padding:9px 16px 26px!important}}
@media (min-width:621px) {body.mxso-home .mxso-page {padding:12px 18px 45px!important}}
/* Force the Dart selector's chrome precedence over inherited website styles. */
html body.mxso-home #app > header.topbar {display:none!important;visibility:hidden!important}
html body.mxso-home #app > nav#bottomNav {display:none!important;visibility:hidden!important}

/* Approved Flutter Welcome screen: approved_welcome_screen.dart, no separate web layout. */
.mxso-launch.mxso-welcome-mode{display:flex!important;justify-content:center!important;align-items:center!important;overflow-y:auto!important;background:#030813!important;padding:0!important}
.mxso-launch .mxso-welcome{box-sizing:border-box!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:stretch!important;text-align:center!important;width:min(100%,480px)!important;max-width:480px!important;min-height:100dvh!important;margin:0 auto!important;padding:20px!important;font-family:Satoshi,system-ui,-apple-system,Segoe UI,sans-serif!important;background:#030813!important}
.mxso-launch .mxso-welcome-art{position:relative!important;flex:none!important;width:calc(100% - 30px)!important;margin:0 auto!important;height:clamp(170px,34dvh,265px)!important;border-radius:18px!important;overflow:hidden!important;background:#030813!important}
.mxso-launch .mxso-welcome-collage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important}
.mxso-launch .mxso-welcome-shade{position:absolute!important;inset:0!important;background:linear-gradient(180deg,transparent 12%,#030813 100%)!important}
.mxso-launch .mxso-welcome-logo{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;height:clamp(100px,20dvh,125px)!important;width:auto!important;max-width:65%!important;object-fit:contain!important}
.mxso-launch .mxso-welcome h1{font-family:Satoshi,system-ui,sans-serif!important;font-size:27px!important;font-weight:900!important;line-height:1.25!important;letter-spacing:0!important;color:white!important;margin:20px 0 7px!important;text-align:center!important}
.mxso-launch .mxso-welcome-tagline{color:#ced8e9!important;font-size:13px!important;line-height:1.35!important;margin:0 0 32px!important;text-align:center!important}
.mxso-launch .mxso-welcome-actions{display:flex!important;flex-direction:column!important;width:100%!important;gap:11px!important}
.mxso-launch .mxso-welcome-actions .mxso-primary{display:block!important;box-sizing:border-box!important;min-height:52px!important;height:52px!important;width:100%!important;border:none!important;border-radius:27px!important;background:#ff0062!important;color:#fff!important;font-size:16px!important;font-weight:800!important;flex:none!important;cursor:pointer!important}
.mxso-launch .mxso-welcome-actions .mxso-outline{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:49px!important;width:100%!important;margin:0!important;text-decoration:none!important;color:#fff!important;border:1px solid #29415e!important;background:#0b1a2c!important;border-radius:27px!important;font-size:14px!important;font-weight:700!important}
.mxso-launch .mxso-welcome-actions .mxso-signup{display:block!important;margin:7px 0 0!important;text-decoration:none!important;color:#b8c6d9!important;font-size:14px!important}
.mxso-launch .mxso-welcome-actions .mxso-signup b{color:#ff0062!important;font-weight:800!important}
@media (max-height:680px){.mxso-launch .mxso-welcome h1{margin-top:12px!important}.mxso-launch .mxso-welcome-tagline{margin-bottom:18px!important}}
@media (max-width:360px){.mxso-launch .mxso-welcome h1{font-size:24px!important}}

/* Exact approved_onboarding_screen.dart + approved_welcome_screen.dart controls.
   Google interaction uses the existing Google Identity sign-in, not a new auth API. */
.mxso-launch .mxso-intro-message p{white-space:normal}
.mxso-launch .mxso-google-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:49px;min-height:49px;border:1px solid #29415e;border-radius:27px;background:#0b1a2c;color:#fff;font-size:14px;font-weight:700;overflow:hidden;box-sizing:border-box}
.mxso-launch .mxso-google-label{pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:0}
.mxso-launch .mxso-google-official{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;overflow:hidden;z-index:1;opacity:0.015;cursor:pointer}
.mxso-launch .mxso-google-official>div,.mxso-launch .mxso-google-official iframe{min-width:100%!important;width:100%!important;height:49px!important}
.mxso-launch .mxso-google-wrap:focus-within{outline:2px solid #ff0062;outline-offset:2px}
.mxso-launch .mxso-intro{background-position:center top}