<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta http-equiv="X-UA-Compatible" content="ie=edge"/><meta name="theme-color" content="#000000"/><base href="/"/><title>Mission Control</title><link rel="icon" type="image/x-icon" href="/favicon.ico?v=2"/><script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.min.js"></script><meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:* wss://e.userflow.com; style-src 'unsafe-inline' https:; object-src 'none';"/><meta name="importmap-type" content="systemjs-importmap"/><script crossorigin type="systemjs-importmap" src="/importmap.json"></script><script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"></script><script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.min.js"></script><script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/amd.min.js"></script><script type="module" src="https://prep.common.optimizely.com/components/web-components.js"></script><style>html {
                color-scheme: light;
                background-color: Canvas;
            }

            /* Optimizely rebrand: override Axiom accent blue → #5f931f green */
            :root {
                --ax-colors-bg-accent: #5f931f;
                --ax-colors-bg-accent-hovered: #4c7817;
                --ax-colors-bg-accent-light: #bad49b;
                --ax-colors-bg-accent-pressed: #3c5f11;
                --ax-colors-bg-accent-subtle: #f3f6ef;
                --ax-colors-border-accent: #5f931f;
                --ax-colors-border-focus: #74aa31;
                --ax-colors-fg-accent: #5f931f;
                --ax-colors-fg-accent-hovered: #4c7817;
                --ax-colors-fg-accent-strong: #3c5f11;
                --ax-colors-fg-link-default: #5f931f;
                --ax-colors-fg-link-default-hovered: #4c7817;
                /* Rebrand: success family onto Optimizely green (AA-compliant) */
                --ax-colors-bg-success: #4c7817;
                --ax-colors-bg-success-hovered: #3c5f11;
                --ax-colors-bg-success-light: #bad49b;
                --ax-colors-bg-success-subtle: #f3f6ef;
                --ax-colors-border-success: #5f931f;
                --ax-colors-fg-success: #4c7817;
                --ax-colors-fg-success-hovered: #3c5f11;
                --ax-colors-fg-success-light: #bad49b;
                --ax-colors-fg-success-strong: #3c5f11;
            }
            @supports (color: light-dark(black, white)) {
                :root {
                    --ax-colors-bg-accent: light-dark(#5f931f, #74aa31);
                    --ax-colors-bg-accent-hovered: light-dark(#4c7817, #74aa31);
                    --ax-colors-bg-accent-light: light-dark(#bad49b, #293f0d);
                    --ax-colors-bg-accent-pressed: light-dark(#3c5f11, #4c7817);
                    --ax-colors-bg-accent-subtle: light-dark(#f3f6ef, #162108);
                    --ax-colors-border-accent: light-dark(#5f931f, #92c355);
                    --ax-colors-border-focus: light-dark(#74aa31, #92c355);
                    --ax-colors-fg-accent: light-dark(#5f931f, #92c355);
                    --ax-colors-fg-accent-hovered: light-dark(#4c7817, #5f931f);
                    --ax-colors-fg-accent-strong: light-dark(#3c5f11, #74aa31);
                    --ax-colors-fg-link-default: light-dark(#5f931f, #74aa31);
                    --ax-colors-fg-link-default-hovered: light-dark(#4c7817, #bad49b);
                    /* Rebrand: success family onto Optimizely green (AA-compliant) */
                    --ax-colors-bg-success: light-dark(#4c7817, #74aa31);
                    --ax-colors-bg-success-hovered: light-dark(#3c5f11, #74aa31);
                    --ax-colors-bg-success-light: light-dark(#bad49b, #293f0d);
                    --ax-colors-bg-success-subtle: light-dark(#f3f6ef, #162108);
                    --ax-colors-border-success: light-dark(#5f931f, #92c355);
                    --ax-colors-fg-success: light-dark(#4c7817, #92c355);
                    --ax-colors-fg-success-hovered: light-dark(#3c5f11, #5f931f);
                    --ax-colors-fg-success-light: light-dark(#bad49b, #bad49b); /* same both schemes by design: low-emphasis, never used as text on white */
                    --ax-colors-fg-success-strong: light-dark(#3c5f11, #74aa31);
                }
            }
            /* @optiaxiom/react 3.0.x — primary-intent button recipe class.
               Axiom hardcodes primary-button text to fg-black (its native lime brand needs dark
               text); after the green rebrand that leaves black text on a dark background and an
               inconsistent black/white mix vs. danger/opal buttons. White on #4c7817 = 5.24:1 (AA).
               Re-verify this selector + variable names on any @optiaxiom/react version bump.

               Note: --_191yi5g also drives the text/border color of the primary OUTLINE and SUBTLE
               button variants, not just the filled background; #4c7817 keeps those at AA on white (5.24:1).

               CRITICAL STABILITY NOTE: The hashed class .f7gaip and the internal variable names
               (--_191yi5g, --rk26pd, --_1eb3549, --_1317whw) are vanilla-extract-generated and have
               NO stability guarantee even across patch releases—any Axiom rebuild can change them,
               after which this rule silently becomes a no-op (buttons revert to black-on-green) with no
               build or lint error. The exact-version pin in package.json (@optiaxiom/react: 3.0.1)
               is what guards this. */
            .f7gaip {
                --_191yi5g: #4c7817; /* filled background */
                --rk26pd: #3c5f11; /* hover background */
                --_1eb3549: #3c5f11; /* pressed background */
                --_1317whw: #ffffff; /* text → white */
            }
            a {
                color: var(--ax-colors-fg-link-default);
            }
            a:hover {
                color: var(--ax-colors-fg-link-default-hovered);
            }

            /* Sidebar: use branding green tint instead of plain white */
            :root {
                --ax-colors-bg-sidebar: #f3f6ef;
            }
            @supports (color: light-dark(black, white)) {
                :root {
                    --ax-colors-bg-sidebar: light-dark(#f3f6ef, #162108);
                }
            }
            nav[aria-label="Main"] {
                background-color: var(--ax-colors-bg-sidebar) !important;
            }
            /* P2 ②a: table headers — undo Axiom's uppercase/mono/xs content styling.
               Axiom's TableHeaderCell hardcodes its content wrapper to font-family: mono
               (Roboto Mono) + uppercase + xs. We render header text in sans (Roboto),
               sentence-case. (Axiom styles are in @layer, so this unlayered rule wins
               without !important.)

               Why --ax-styles-fontFamily and not just font-family: every Axiom <Box>
               applies `font-family: var(--ax-styles-fontFamily)` (see Box.css), and the
               "mono" sprinkle sets that custom property (which inherits). Overriding only
               font-family on the th>div fixes MC's header (plain <span> that inherits the
               resolved value) but NOT the MFEs, whose header text is wrapped in an Axiom
               <Box> that re-derives font-family from the still-"mono" inherited variable.
               Resetting the variable cascades through Axiom's own system, so both plain
               spans and nested Boxes resolve to sans.

               Scoped to all single-spa app containers (the [id*=] prefix match) so the
               MFEs in mc-custom-actions get the same Roboto header styling as MC. */
            div[id*="single-spa-application:@Optimizely/"] th > div {
                text-transform: none;
                --ax-styles-fontFamily: var(--ax-fontFamily-sans);
                font-family: var(--ax-fontFamily-sans);
                font-size: var(--ax-fontSize-sm-fontSize);
                line-height: var(--ax-fontSize-sm-lineHeight);
            }

            #root,
            body,
            html {
                height: 100%;
                margin: 0 auto;
            }
            div[id$="single-spa-application:@Optimizely/mission-control"] {
                height: 100vh;
                width: 100vw;
                z-index: 2000;
            }
            div[id$="single-spa-application:@Optimizely/commerce-instance-details"] {
                position: absolute;
                top: 8rem; /* Using rem for consistency */
                left: 22.5rem; /* Using rem for consistency */
                max-width: 100%;
                min-width: 0;
            }
            div[id$="single-spa-application:@Optimizely/qa-instance-deploy"] {
                position: absolute;
                top: 5rem; /* Using rem for consistency */
                left: 22.5rem; /* Using rem for consistency */
                max-width: 100%;
                min-width: 0;
            }

            div[id$="single-spa-application:@Optimizely/websites-mfe"] {
                position: absolute;
                top: 10rem;
                left: 22.5rem; /* Consistent with other components */
                width: calc(100vw - 22.5rem);
                max-width: 100%;
                min-width: 0;
            }

            div[id$="single-spa-application:@Optimizely/integrations-mfe"] {
                position: absolute;
                top: 10rem;
                left: 22.5rem; /* Consistent with other components */
                max-width: 100%;
                min-width: 0;
            }

            .capitalize {
                text-transform: capitalize;
            }

            .epi-pn-navigation .mdc-tab-scroller__scroll-area--scroll {
                overflow-x: hidden !important;
            }

            .datepicker-popper-high-z {
                z-index: 9999 !important;
            }

            .react-datepicker-popper {
                z-index: 9999 !important;
            }

            .react-datepicker__portal {
                z-index: 9999 !important;
            }</style></head><body><noscript>You need to enable JavaScript to run this app.</noscript><script crossorigin>System.import("@Optimizely/mission-control");</script><script crossorigin>System.import("@Optimizely/commerce-instance-details");</script><script crossorigin>System.import("@Optimizely/qa-instance-deploy");</script><script crossorigin>System.import("@Optimizely/websites-mfe");</script><script crossorigin>System.import("@Optimizely/integrations-mfe");</script><import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full></body></html>