/* Magic 1Xtra: Web Home alignment with lib/service_os/service_selector_screen.dart.
   Flutter reference: background #02060D, pink #FF0757, a single hero,
   4 columns per row on phone, 2 Top Services rows and 5 All Services rows.
   Home only; do not touch player, service workspaces or root navigation. */
body.mxso-home .mxso-page {
  color:#fff;
  background:#02060d;
  font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.mxso-home .mxso-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}
body.mxso-home .mxso-grid > .mxso-tile {
  min-width:0;
  box-sizing:border-box;
  overflow-wrap:anywhere;
  text-wrap:balance;
}
body.mxso-home .mxso-hero { background-color:#0d1522; }
body.mxso-home .mxso-hero:focus-visible,
body.mxso-home .mxso-tile:focus-visible,
body.mxso-home .mxso-dots button:focus-visible {
  outline:2px solid #ff0757; outline-offset:3px;
}
body.mxso-home .mxso-dots button { touch-action:manipulation; }
body.mxso-home .mxso-dots button.active { background:#ff0757; }
@media (max-width:620px) {
  body.mxso-home .mxso-page { padding-inline:clamp(9px,3.5vw,16px); }
  body.mxso-home .mxso-hero { height:clamp(132px,39vw,151px); }
  body.mxso-home .mxso-promo { min-height:99px; }
  body.mxso-home .mxso-grid { gap:clamp(6px,2vw,9px); }
  body.mxso-home .mxso-tile { line-height:1.16; }
}
@media (prefers-reduced-motion:reduce) {
  body.mxso-home .mxso-tile,
  body.mxso-home .mxso-hero { transition:none!important; }
}