@media (max-width: 880px) {
            /* Mobile layout: 2 personas above the HITL card, card
               in the middle (centered with a sensible max-width),
               2 personas below. Using FLEX (not grid) so each row
               of personas centers as a pair and the HITL card
               centers as a self-contained block, instead of grid
               cells pulling personas to the left and right edges.
                 row 1 :  [QUANT] [MARKET]   centered as a pair
                 row 2 :  [   HITL CARD  ]   centered, capped width
                 row 3 :  [TRADER] [RISK]    centered as a pair
               DOM order: empty, QUANT, empty, MARKET, HITL, TRADER,
               empty, RISK, empty. Empties hidden; the HITL card
               carries flex-basis 100% to force a wrap; orders place
               the four personas around it. */
            [data-mel-product="1"] .trading-engine-live-stage {
              display: flex !important;
              flex-direction: row !important;
              flex-wrap: wrap !important;
              justify-content: center !important;
              align-items: center !important;
              row-gap: 16px !important;
              column-gap: 18px !important;
              max-width: 100% !important;
              grid-template-columns: none !important;
              grid-template-rows: none !important;
            }
            [data-mel-product="1"] .trading-engine-live-stage > div:empty {
              display: none !important;
            }
            /* QUANT and MARKET above the card */
            [data-mel-product="1"] .trading-engine-live-stage > div:nth-child(2) { order: 1 !important; }
            [data-mel-product="1"] .trading-engine-live-stage > div:nth-child(4) { order: 2 !important; }
            /* HITL card forces a wrap and self-centers */
            [data-mel-product="1"] .trading-engine-live-stage > div:nth-child(5) {
              order: 3 !important;
              flex: 1 1 100% !important;
              width: auto !important;
              max-width: min(440px, 96vw) !important;
              margin-left: auto !important;
              margin-right: auto !important;
            }
            /* Override HitlApprovalCard inner min-width so the card
               can shrink to the column width. */
            [data-mel-product="1"] .trading-engine-live-stage > div:nth-child(5) > div {
              min-width: 0 !important;
              padding: 18px !important;
            }
            /* TRADER and RISK below the card */
            [data-mel-product="1"] .trading-engine-live-stage > div:nth-child(6) { order: 4 !important; }
            [data-mel-product="1"] .trading-engine-live-stage > div:nth-child(8) { order: 5 !important; }
          }