/* ============================================================
   IQ CONNECT
   MULTI-PROPERTY HOTELS
   CENTRAL PORTFOLIO COMMAND
============================================================ */

.mp{
    --mp-bg:#050d18;
    --mp-bg2:#071524;
    --mp-panel:#0a1a2b;
    --mp-panel2:#0d2236;
    --mp-blue:#1688ff;
    --mp-cyan:#39d7ff;
    --mp-aqua:#66e6ef;
    --mp-green:#7fe5a6;
    --mp-yellow:#ffc56c;
    --mp-red:#ff7782;
    --mp-white:#ffffff;
    --mp-paper:#f5f8fa;
    --mp-text:#102034;
    --mp-muted:#738194;
    --mp-line:rgba(17,39,61,.11);
    --mp-dark-line:rgba(255,255,255,.075);
    --mp-radius:24px;
    --mp-shadow:0 32px 85px rgba(4,18,31,.14);

    position:relative;
    overflow:hidden;
    color:var(--mp-text);
    background:#fff;
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,
        BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.mp *,
.mp *::before,
.mp *::after{
    box-sizing:border-box;
}

.mp a{
    color:inherit;
    text-decoration:none;
}

.mp button{
    font:inherit;
}

.mp-container{
    width:min(1380px,calc(100% - 56px));
    margin-inline:auto;
}


/* ============================================================
   HERO
============================================================ */

.mp-hero{
    position:relative;
    min-height:940px;
    padding:120px 0 88px;
    overflow:hidden;
    color:#fff;
    background:#050e19;
}

.mp-hero-photo{
    position:absolute;
    inset:0;
    background:
        url("https://images.unsplash.com/photo-1564501049412-61c2a3083791?auto=format&fit=crop&w=2200&q=88")
        center/cover no-repeat;
    transform:scale(1.035);
}

.mp-hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(3,10,19,.985) 0%,
            rgba(4,15,27,.96) 40%,
            rgba(4,17,30,.83) 69%,
            rgba(4,17,30,.62) 100%
        ),
        linear-gradient(
            180deg,
            rgba(3,12,22,.2),
            rgba(3,12,22,.92)
        );
}

.mp-grid-bg{
    position:absolute;
    inset:0;
    opacity:.12;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(54,211,255,.15) 1px,transparent 1px),
        linear-gradient(90deg,rgba(54,211,255,.15) 1px,transparent 1px);
    background-size:55px 55px;
    mask-image:
        linear-gradient(
            90deg,
            #000 0%,
            rgba(0,0,0,.65) 65%,
            transparent 100%
        );
}

.mp-breadcrumb{
    position:relative;
    z-index:4;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:56px;
    color:rgba(255,255,255,.48);
    font-size:12px;
    font-weight:750;
}

.mp-breadcrumb a{
    transition:color .22s ease;
}

.mp-breadcrumb a:hover{
    color:#fff;
}

.mp-breadcrumb strong{
    color:rgba(255,255,255,.8);
}

.mp-hero-grid{
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(590px,1.12fr);
    gap:65px;
    align-items:center;
}

.mp-eyebrow{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 24px;
    color:#58dcff;
    font-size:11px;
    font-weight:950;
    letter-spacing:.19em;
}

.mp-eyebrow i{
    width:34px;
    height:2px;
    background:linear-gradient(90deg,#188cff,#40d9ff);
    box-shadow:0 0 16px rgba(57,215,255,.55);
}

.mp-hero-copy h1{
    max-width:720px;
    margin:0;
    color:#fff;
    font-size:clamp(60px,5.3vw,86px);
    line-height:.95;
    letter-spacing:-.065em;
    font-weight:800;
}

.mp-hero-copy h1 span{
    display:block;
    color:transparent;
    background:
        linear-gradient(
            100deg,
            #e9f7ff,
            #61ddff 54%,
            #1e8fff
        );
    -webkit-background-clip:text;
    background-clip:text;
}

.mp-lead{
    max-width:680px;
    margin:30px 0 0;
    color:#9fb1c0;
    font-size:16px;
    line-height:1.8;
}

.mp-actions{
    display:flex;
    flex-wrap:wrap;
    gap:13px;
    margin-top:35px;
}

.mp-btn{
    min-height:55px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    padding:0 25px;
    border:1px solid transparent;
    border-radius:11px;
    font-size:13px;
    font-weight:900;
    transition:
        transform .24s ease,
        background .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}

.mp-btn:hover{
    transform:translateY(-2px);
}

.mp-btn-primary{
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #137eff,
            #18b5ee
        );
    box-shadow:
        0 16px 38px rgba(19,128,255,.27);
}

.mp-btn-primary span,
.mp-btn-primary b{
    font-size:18px;
}

.mp-btn-glass{
    color:#e1edf5;
    border-color:rgba(255,255,255,.15);
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(14px);
}

.mp-btn-glass:hover{
    border-color:rgba(57,215,255,.42);
    background:rgba(255,255,255,.075);
}

.mp-hero-points{
    max-width:670px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:48px;
}

.mp-hero-points article{
    min-height:70px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border-top:1px solid rgba(255,255,255,.12);
}

.mp-hero-points article > span{
    color:#47d6ff;
    font-size:8px;
    font-weight:950;
}

.mp-hero-points small{
    display:block;
    margin-bottom:4px;
    color:#61778b;
    font-size:7px;
    font-weight:950;
    letter-spacing:.12em;
}

.mp-hero-points strong{
    color:#e1eaf1;
    font-size:10px;
}


/* ============================================================
   HERO PORTFOLIO NETWORK
============================================================ */

.mp-network-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(24,140,255,.1),
            transparent 40%
        ),
        rgba(6,22,36,.95);
    box-shadow:
        0 45px 110px rgba(0,0,0,.42),
        inset 0 1px rgba(255,255,255,.035);
    backdrop-filter:blur(18px);
}

.mp-network-card > header{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 22px;
    border-bottom:1px solid rgba(255,255,255,.075);
}

.mp-brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.mp-brand > span{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#fff;
    background:
        linear-gradient(
            145deg,
            #1486ff,
            #31cdec
        );
    box-shadow:0 9px 25px rgba(20,134,255,.25);
    font-size:11px;
    font-weight:950;
}

.mp-brand small{
    display:block;
    margin-bottom:2px;
    color:#5b7489;
    font-size:7px;
    font-weight:950;
    letter-spacing:.13em;
}

.mp-brand strong{
    color:#e5eef5;
    font-size:11px;
}

.mp-live,
.mp-console-live{
    display:flex;
    align-items:center;
    gap:8px;
    color:#65dfff;
    font-size:7px;
    font-weight:950;
    letter-spacing:.12em;
}

.mp-live i,
.mp-console-live i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#7fe5a6;
    box-shadow:0 0 13px rgba(127,229,166,.65);
}

.mp-network-summary{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.mp-network-summary > div{
    padding:17px 18px;
    border-right:1px solid rgba(255,255,255,.06);
}

.mp-network-summary > div:last-child{
    border-right:0;
}

.mp-network-summary small{
    display:block;
    margin-bottom:5px;
    color:#506a80;
    font-size:6px;
    font-weight:950;
    letter-spacing:.1em;
}

.mp-network-summary strong{
    color:#fff;
    font-size:14px;
}

.mp-network{
    position:relative;
    height:390px;
    overflow:hidden;
}

.mp-network::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.14;
    background-image:
        radial-gradient(
            circle,
            rgba(65,218,255,.5) 1px,
            transparent 1px
        );
    background-size:24px 24px;
}

.mp-network-lines{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
}

.mp-network-lines path{
    fill:none;
    stroke:rgba(60,211,255,.22);
    stroke-width:1.3;
    stroke-dasharray:5 6;
}

.mp-node{
    position:absolute;
    z-index:3;
    border:1px solid rgba(255,255,255,.1);
    cursor:pointer;
    color:#fff;
    background:#0b2438;
    box-shadow:0 12px 28px rgba(0,0,0,.22);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.mp-node:hover{
    transform:translateY(-3px);
    border-color:rgba(65,218,255,.4);
}

.mp-node-main{
    left:50%;
    top:37px;
    width:118px;
    min-height:72px;
    transform:translateX(-50%);
    border-color:rgba(55,215,255,.34);
    border-radius:14px;
    background:
        linear-gradient(
            145deg,
            rgba(20,132,255,.24),
            rgba(11,36,56,.96)
        );
}

.mp-node-main:hover{
    transform:translateX(-50%) translateY(-3px);
}

.mp-node-main span{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    margin:9px auto 3px;
    border-radius:7px;
    color:#fff;
    background:#188cff;
    font-size:7px;
    font-weight:950;
}

.mp-node-main strong,
.mp-node-main small{
    display:block;
    text-align:center;
}

.mp-node-main strong{
    color:#e8f6ff;
    font-size:8px;
}

.mp-node-main small{
    margin-top:2px;
    color:#65849b;
    font-size:6px;
}

.mp-node-cluster{
    top:158px;
    width:96px;
    min-height:66px;
    border-radius:12px;
}

.mp-node-cluster.c1{
    left:17%;
}

.mp-node-cluster.c2{
    left:50%;
    transform:translateX(-50%);
}

.mp-node-cluster.c2:hover{
    transform:translateX(-50%) translateY(-3px);
}

.mp-node-cluster.c3{
    right:17%;
}

.mp-node-cluster span{
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    margin:8px auto 2px;
    border-radius:6px;
    color:#5cdcff;
    background:rgba(57,215,255,.08);
    font-size:7px;
    font-weight:950;
}

.mp-node-cluster strong,
.mp-node-cluster small{
    display:block;
    text-align:center;
}

.mp-node-cluster strong{
    color:#d7e8f3;
    font-size:7px;
}

.mp-node-cluster small{
    color:#58758b;
    font-size:5px;
}

.mp-property-node{
    position:absolute;
    z-index:3;
    width:52px;
    min-height:39px;
    display:grid;
    place-content:center;
    border:1px solid rgba(255,255,255,.075);
    border-radius:8px;
    cursor:pointer;
    color:#7e99ac;
    background:#0a1f31;
    font-size:6px;
    font-weight:950;
    transition:.2s ease;
}

.mp-property-node i{
    width:5px;
    height:5px;
    display:block;
    margin:0 auto 3px;
    border-radius:50%;
    background:#7fe5a6;
    box-shadow:0 0 8px rgba(127,229,166,.4);
}

.mp-property-node:hover{
    color:#fff;
    border-color:rgba(57,215,255,.35);
    background:#0e2b41;
}

.mp-property-node.p1{
    left:11%;
    top:282px;
}

.mp-property-node.p2{
    left:27%;
    top:282px;
}

.mp-property-node.p3{
    left:42%;
    top:282px;
}

.mp-property-node.p4{
    left:56%;
    top:282px;
}

.mp-property-node.p5{
    right:25%;
    top:282px;
}

.mp-property-node.p6{
    right:8%;
    top:282px;
}

.mp-network-footer{
    min-height:56px;
    display:flex;
    align-items:center;
    gap:20px;
    padding:0 20px;
    border-top:1px solid rgba(255,255,255,.07);
}

.mp-network-footer > div{
    display:flex;
    align-items:center;
    gap:7px;
}

.mp-network-footer span{
    width:7px;
    height:7px;
    border-radius:50%;
}

.mp-network-footer span.healthy{
    background:#7fe5a6;
}

.mp-network-footer span.attention{
    background:#ffc56c;
}

.mp-network-footer small{
    color:#6b8295;
    font-size:6px;
    font-weight:850;
}

.mp-network-footer button{
    margin-left:auto;
    padding:7px 10px;
    border:1px solid rgba(57,215,255,.14);
    border-radius:6px;
    cursor:pointer;
    color:#5cdcff;
    background:rgba(57,215,255,.045);
    font-size:6px;
    font-weight:950;
}


/* ============================================================
   COMMON SECTION HEAD
============================================================ */

.mp-section-head{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);
    gap:80px;
    align-items:end;
    margin-bottom:52px;
}

.mp-section-head > div > p,
.mp-command-heading > p,
.mp-control-intro > p,
.mp-outcome-intro > p{
    margin:0 0 15px;
    color:#1688da;
    font-size:10px;
    font-weight:950;
    letter-spacing:.17em;
}

.mp-section-head h2,
.mp-command-heading h2,
.mp-control-intro h2,
.mp-outcome-intro h2{
    margin:0;
    color:#102034;
    font-size:clamp(43px,4.4vw,68px);
    line-height:1;
    letter-spacing:-.055em;
}

.mp-section-head h2 em,
.mp-command-heading h2 em,
.mp-control-intro h2 em,
.mp-outcome-intro h2 em{
    display:block;
    color:#1688da;
    font-style:normal;
}

.mp-section-head > p{
    margin:0;
    color:#758294;
    font-size:14px;
    line-height:1.8;
}


/* ============================================================
   REALITY
============================================================ */

.mp-reality{
    padding:118px 0;
    background:#f4f7f9;
}

.mp-reality-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.mp-reality-grid > article{
    position:relative;
    min-height:425px;
    padding:30px;
    overflow:hidden;
    border:1px solid #dde5e9;
    border-radius:22px;
    background:#fff;
    box-shadow:0 15px 45px rgba(10,35,55,.04);
}

.mp-reality-number{
    position:absolute;
    right:27px;
    top:25px;
    color:#c5ced5;
    font-size:9px;
    font-weight:950;
}

.mp-reality-grid article > small{
    display:block;
    margin-top:28px;
    color:#1688da;
    font-size:8px;
    font-weight:950;
    letter-spacing:.13em;
}

.mp-reality-grid h3{
    max-width:330px;
    margin:9px 0 0;
    color:#142337;
    font-size:24px;
    line-height:1.12;
    letter-spacing:-.035em;
}

.mp-reality-grid p{
    margin:15px 0 0;
    color:#778394;
    font-size:12px;
    line-height:1.75;
}


/* hierarchy demo */

.mp-hierarchy-demo{
    height:145px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    background:#091d2e;
}

.mp-hierarchy-demo .top{
    min-width:88px;
    padding:10px 14px;
    border:1px solid rgba(58,215,255,.25);
    border-radius:8px;
    color:#62dcff;
    background:rgba(57,215,255,.06);
    text-align:center;
    font-size:7px;
    font-weight:950;
}

.mp-hierarchy-demo > span{
    width:1px;
    height:24px;
    background:#31556d;
}

.mp-hierarchy-demo .children{
    position:relative;
    display:flex;
    gap:26px;
}

.mp-hierarchy-demo .children::before{
    content:"";
    position:absolute;
    left:17px;
    right:17px;
    top:-8px;
    height:1px;
    background:#31556d;
}

.mp-hierarchy-demo .children i{
    width:35px;
    height:35px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    color:#718b9e;
    background:#10293c;
    font-size:9px;
    font-style:normal;
    font-weight:950;
}


/* delay demo */

.mp-delay-demo{
    height:145px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:20px;
    border-radius:15px;
    background:#091d2e;
}

.mp-delay-demo > span{
    min-width:80px;
    padding:13px 8px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;
    color:#668398;
    background:#10283b;
    text-align:center;
    font-size:6px;
    font-weight:950;
}

.mp-delay-demo > span b{
    display:block;
    margin-top:5px;
    color:#d6e7f1;
    font-size:9px;
}

.mp-delay-demo > span.late{
    border-color:rgba(255,197,108,.17);
    background:rgba(255,197,108,.06);
}

.mp-delay-demo > span.late b{
    color:#ffc56c;
}

.mp-delay-demo > i{
    color:#36586e;
    font-size:12px;
    font-style:normal;
}


/* control demo */

.mp-control-demo{
    height:145px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:18px;
    padding:22px;
    border-radius:15px;
    background:#091d2e;
}

.mp-control-demo > div{
    min-height:75px;
    display:grid;
    place-content:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:#10283b;
    text-align:center;
}

.mp-control-demo span{
    color:#5b778c;
    font-size:6px;
    font-weight:950;
}

.mp-control-demo strong{
    margin-top:4px;
    color:#d9e8f2;
    font-size:11px;
}

.mp-control-demo > i{
    width:45px;
    height:2px;
    background:
        linear-gradient(
            90deg,
            #168cff,
            #42d9ff
        );
}


/* ============================================================
   COMMAND CENTER
============================================================ */

.mp-command{
    position:relative;
    padding:122px 0;
    color:#fff;
    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(24,140,255,.12),
            transparent 28%
        ),
        #050f1b;
}

.mp-command::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.13;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(57,215,255,.12) 1px,transparent 1px),
        linear-gradient(90deg,rgba(57,215,255,.12) 1px,transparent 1px);
    background-size:62px 62px;
    mask-image:linear-gradient(to bottom,#000,transparent 78%);
}

.mp-command > .mp-container{
    position:relative;
    z-index:2;
}

.mp-command-heading{
    max-width:880px;
    margin-bottom:48px;
}

.mp-command-heading > p{
    color:#46d4fa;
}

.mp-command-heading h2{
    color:#fff;
}

.mp-command-heading h2 em{
    color:#61ddff;
}

.mp-command-heading > span{
    display:block;
    max-width:670px;
    margin-top:21px;
    color:#8196a8;
    font-size:14px;
    line-height:1.8;
}


/* console */

.mp-console{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:24px;
    background:#081827;
    box-shadow:0 45px 110px rgba(0,0,0,.35);
}

.mp-console > header{
    min-height:72px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:25px;
    padding:0 24px;
    border-bottom:1px solid rgba(255,255,255,.075);
    background:#071420;
}

.mp-console-context{
    text-align:center;
}

.mp-console-context small{
    display:block;
    color:#536f85;
    font-size:6px;
    font-weight:950;
    letter-spacing:.12em;
}

.mp-console-context strong{
    color:#dce9f2;
    font-size:9px;
}

.mp-console-live{
    justify-self:end;
}

.mp-console-body{
    display:grid;
    grid-template-columns:215px minmax(0,1fr);
}

.mp-console-body > aside{
    padding:17px 11px;
    border-right:1px solid rgba(255,255,255,.065);
    background:#06131f;
}

.mp-console-body > aside button{
    width:100%;
    min-height:45px;
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:4px;
    padding:0 12px;
    border:0;
    border-radius:8px;
    cursor:pointer;
    color:#668095;
    background:transparent;
    text-align:left;
    font-size:9px;
    font-weight:850;
    transition:.22s ease;
}

.mp-console-body > aside button span{
    color:#3c5a70;
    font-size:7px;
}

.mp-console-body > aside button:hover{
    color:#e0ebf3;
    background:rgba(255,255,255,.03);
}

.mp-console-body > aside button.active{
    color:#fff;
    background:
        linear-gradient(
            90deg,
            rgba(25,143,255,.19),
            rgba(25,143,255,.03)
        );
    box-shadow:inset 2px 0 #38d5ff;
}

.mp-console-body > main{
    min-width:0;
    padding:25px;
}

.mp-workspace-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:25px;
}

.mp-workspace-head small{
    display:block;
    margin-bottom:5px;
    color:#4ed2f7;
    font-size:7px;
    font-weight:950;
    letter-spacing:.13em;
}

.mp-workspace-head h3{
    margin:0;
    color:#fff;
    font-size:21px;
}

.mp-workspace-head p{
    max-width:620px;
    margin:6px 0 0;
    color:#6b8297;
    font-size:9px;
    line-height:1.65;
}

.mp-workspace-actions{
    display:flex;
    gap:7px;
}

.mp-workspace-actions button{
    min-height:35px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:7px;
    cursor:pointer;
    color:#8297a9;
    background:#0c2032;
    font-size:8px;
    font-weight:900;
}

.mp-workspace-actions button.primary{
    color:#fff;
    border-color:#168cf5;
    background:#168cf5;
}


/* KPI */

.mp-kpis{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-top:21px;
}

.mp-kpis article{
    padding:15px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
    background:#0c2032;
}

.mp-kpis small{
    display:block;
    color:#526e84;
    font-size:6px;
    font-weight:950;
}

.mp-kpis strong{
    display:block;
    margin:7px 0 3px;
    color:#fff;
    font-size:21px;
}

.mp-kpis span{
    color:#637b8f;
    font-size:7px;
}


/* dashboard */

.mp-dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(250px,.45fr);
    gap:9px;
    margin-top:9px;
}

.mp-performance,
.mp-health,
.mp-property-table,
.mp-alerts{
    border:1px solid rgba(255,255,255,.06);
    border-radius:13px;
    background:#0a1c2c;
}

.mp-performance,
.mp-health{
    padding:17px;
}

.mp-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.mp-card-head small{
    display:block;
    color:#536f85;
    font-size:6px;
    font-weight:950;
    letter-spacing:.11em;
}

.mp-card-head strong{
    color:#e3edf4;
    font-size:10px;
}

.mp-card-head > span{
    color:#4fd4f9;
    font-size:6px;
    font-weight:950;
}

.mp-card-head > button{
    border:0;
    cursor:pointer;
    color:#4ed2f8;
    background:transparent;
    font-size:7px;
    font-weight:950;
}

.mp-periods{
    display:flex;
    gap:4px;
}

.mp-periods button{
    min-width:39px;
    height:25px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:5px;
    cursor:pointer;
    color:#657d90;
    background:#0d2436;
    font-size:6px;
    font-weight:950;
}

.mp-periods button.active{
    color:#fff;
    border-color:#168df5;
    background:#168df5;
}


/* chart */

.mp-chart{
    position:relative;
    height:260px;
    display:grid;
    grid-template-columns:38px 1fr;
    gap:12px;
    margin-top:20px;
    padding-top:10px;
}

.mp-chart::before{
    content:"";
    position:absolute;
    left:50px;
    right:0;
    top:10px;
    bottom:35px;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.055) 0,
            rgba(255,255,255,.055) 1px,
            transparent 1px,
            transparent 25%
        );
}

.mp-chart-scale{
    height:215px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    color:#49657b;
    font-size:6px;
}

.mp-chart-bars{
    position:relative;
    z-index:2;
    height:235px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:12px;
    align-items:end;
}

.mp-bar-item{
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    border:0;
    cursor:pointer;
    color:#70879a;
    background:transparent;
}

.mp-bar-item > span{
    width:100%;
    max-width:38px;
    height:185px;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    border-radius:6px 6px 2px 2px;
    background:rgba(255,255,255,.025);
}

.mp-bar-item i{
    width:100%;
    height:var(--mp-bar);
    display:block;
    border-radius:6px 6px 2px 2px;
    background:
        linear-gradient(
            180deg,
            #43d9ff,
            #1688ff
        );
    box-shadow:0 0 18px rgba(22,136,255,.15);
    transition:filter .22s ease;
}

.mp-bar-item:hover i{
    filter:brightness(1.25);
}

.mp-bar-item strong{
    margin-top:6px;
    color:#a9bdca;
    font-size:7px;
}

.mp-bar-item small{
    margin-top:3px;
    color:#506c81;
    font-size:6px;
}


/* health */

.mp-health-ring{
    position:relative;
    width:145px;
    height:145px;
    margin:28px auto 20px;
}

.mp-health-ring svg{
    width:100%;
    height:100%;
    transform:rotate(-90deg);
}

.mp-health-ring circle{
    fill:none;
    stroke-width:9;
}

.mp-health-ring .track{
    stroke:rgba(255,255,255,.055);
}

.mp-health-ring .value{
    stroke:#67e3ac;
    stroke-linecap:round;
    stroke-dasharray:364.4;
    stroke-dashoffset:61;
    filter:drop-shadow(0 0 7px rgba(103,227,172,.25));
}

.mp-health-ring > div{
    position:absolute;
    inset:0;
    display:grid;
    place-content:center;
    text-align:center;
}

.mp-health-ring strong{
    color:#fff;
    font-size:30px;
    line-height:1;
}

.mp-health-ring small{
    margin-top:5px;
    color:#607b90;
    font-size:6px;
    font-weight:950;
}

.mp-health-list{
    display:grid;
    gap:8px;
}

.mp-health-list > div{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:8px;
    padding:8px 9px;
    border-radius:7px;
    background:rgba(255,255,255,.025);
}

.mp-health-list > div > span{
    width:7px;
    height:7px;
    border-radius:50%;
}

.mp-health-list span.healthy{
    background:#7fe5a6;
}

.mp-health-list span.attention{
    background:#ffc56c;
}

.mp-health-list span.offline{
    background:#ff7782;
}

.mp-health-list small{
    color:#657d91;
    font-size:7px;
}

.mp-health-list strong{
    color:#d7e4ec;
    font-size:8px;
}


/* property table */

.mp-property-table{
    margin-top:9px;
    padding:17px;
}

.mp-table{
    margin-top:14px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.055);
    border-radius:9px;
}

.mp-table-row{
    width:100%;
    min-height:52px;
    display:grid;
    grid-template-columns:minmax(180px,1.6fr) .65fr .75fr .75fr 1fr 30px;
    gap:10px;
    align-items:center;
    padding:0 13px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.05);
    cursor:pointer;
    color:#8095a6;
    background:#0b1f30;
    text-align:left;
    font-size:7px;
    transition:background .2s ease;
}

.mp-table-row:last-child{
    border-bottom:0;
}

button.mp-table-row:hover{
    background:#0e273b;
}

.mp-table-header{
    min-height:34px;
    cursor:default;
    color:#4f6c81;
    background:#081a29;
    font-size:6px;
    font-weight:950;
}

.mp-table-row > span:first-child{
    display:flex;
    align-items:center;
    gap:9px;
}

.mp-table-row > span:first-child i{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:7px;
    color:#56d9ff;
    background:rgba(57,215,255,.07);
    font-size:6px;
    font-style:normal;
    font-weight:950;
}

.mp-table-row b{
    color:#d8e5ed;
    font-size:8px;
}

.mp-table-row em{
    width:6px;
    height:6px;
    display:inline-block;
    margin-right:5px;
    border-radius:50%;
}

.mp-table-row em.good{
    background:#7fe5a6;
}

.mp-table-row em.warn{
    background:#ffc56c;
}


/* alerts */

.mp-alerts{
    margin-top:9px;
    padding:17px;
}

.mp-alert-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:14px;
}

.mp-alert-grid article{
    display:grid;
    grid-template-columns:32px 1fr auto;
    gap:10px;
    align-items:center;
    padding:13px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:9px;
    background:#0c2132;
}

.mp-alert-grid article > span{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:8px;
    font-size:8px;
    font-weight:950;
}

.mp-alert-grid .warning{
    color:#ffc56c;
    background:rgba(255,197,108,.08);
}

.mp-alert-grid .info{
    color:#5bdcff;
    background:rgba(57,215,255,.08);
}

.mp-alert-grid small{
    display:block;
    color:#547087;
    font-size:6px;
    font-weight:950;
}

.mp-alert-grid strong{
    display:block;
    margin:3px 0;
    color:#d9e5ed;
    font-size:8px;
}

.mp-alert-grid p{
    margin:0;
    color:#61798c;
    font-size:6px;
    line-height:1.45;
}

.mp-alert-grid button{
    padding:6px 8px;
    border:1px solid rgba(57,215,255,.12);
    border-radius:5px;
    cursor:pointer;
    color:#54d8fc;
    background:rgba(57,215,255,.04);
    font-size:6px;
    font-weight:950;
}


/* ============================================================
   HIERARCHY
============================================================ */

.mp-hierarchy{
    padding:120px 0;
    background:#f4f7f9;
}

.mp-hierarchy-shell{
    position:relative;
    padding:50px;
    overflow:hidden;
    border:1px solid #dbe4e9;
    border-radius:25px;
    background:#fff;
    box-shadow:0 28px 70px rgba(10,37,57,.06);
}

.mp-hierarchy-shell::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.4;
    background-image:
        linear-gradient(#eef2f4 1px,transparent 1px),
        linear-gradient(90deg,#eef2f4 1px,transparent 1px);
    background-size:38px 38px;
    pointer-events:none;
}

.mp-hierarchy-top,
.mp-clusters{
    position:relative;
    z-index:2;
}

.mp-hierarchy-top{
    display:flex;
    justify-content:center;
}

.mp-hierarchy-top article{
    min-width:330px;
    display:flex;
    align-items:center;
    gap:17px;
    padding:18px 20px;
    border:1px solid #cfe3ed;
    border-radius:14px;
    background:#f8fcfe;
    box-shadow:0 15px 35px rgba(12,62,91,.06);
}

.mp-hierarchy-top article > span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    background:
        linear-gradient(
            145deg,
            #1688ff,
            #39d7ff
        );
    font-size:10px;
    font-weight:950;
}

.mp-hierarchy-top small,
.mp-clusters small{
    display:block;
    color:#1688da;
    font-size:7px;
    font-weight:950;
    letter-spacing:.11em;
}

.mp-hierarchy-top strong{
    display:block;
    margin-top:3px;
    color:#122338;
    font-size:15px;
}

.mp-hierarchy-top p{
    margin:3px 0 0;
    color:#84909d;
    font-size:8px;
}

.mp-hierarchy-connector{
    position:relative;
    z-index:2;
    width:1px;
    height:70px;
    margin:auto;
    background:#b7d9e8;
}

.mp-hierarchy-connector::after{
    content:"";
    position:absolute;
    left:-420px;
    right:-420px;
    bottom:0;
    height:1px;
    background:#b7d9e8;
}

.mp-clusters{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.mp-clusters > article{
    position:relative;
    border:1px solid #dce5e9;
    border-radius:16px;
    background:#fff;
}

.mp-clusters > article::before{
    content:"";
    position:absolute;
    left:50%;
    top:-25px;
    width:1px;
    height:25px;
    background:#b7d9e8;
}

.mp-clusters header{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:12px;
    align-items:center;
    padding:17px;
    border-bottom:1px solid #e7ecef;
}

.mp-clusters header > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:#1688da;
    background:#eaf6fc;
    font-size:9px;
    font-weight:950;
}

.mp-clusters header strong{
    color:#15263a;
    font-size:11px;
}

.mp-clusters header b{
    padding:5px 7px;
    border-radius:5px;
    color:#1688da;
    background:#edf7fc;
    font-size:6px;
}

.mp-clusters > article > div{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:14px;
}

.mp-clusters button{
    min-height:42px;
    padding:0 10px;
    border:1px solid #e4e9ec;
    border-radius:8px;
    cursor:pointer;
    color:#697889;
    background:#fafcfd;
    font-size:8px;
    font-weight:800;
    transition:.2s ease;
}

.mp-clusters button:hover{
    color:#1688da;
    border-color:#b9deed;
    background:#f1faff;
}


/* ============================================================
   CENTRAL VS LOCAL
============================================================ */

.mp-control-model{
    padding:120px 0;
    color:#fff;
    background:#061421;
}

.mp-control-intro{
    max-width:900px;
}

.mp-control-intro > p{
    color:#49d4f9;
}

.mp-control-intro h2{
    color:#fff;
}

.mp-control-intro h2 em{
    color:#62dcff;
}

.mp-control-grid{
    display:grid;
    grid-template-columns:1fr 170px 1fr;
    gap:25px;
    align-items:center;
    margin-top:58px;
}

.mp-control-grid > article{
    min-height:470px;
    padding:37px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    background:#0a1d2e;
}

.mp-control-grid > article.central{
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(22,136,255,.12),
            transparent 35%
        ),
        #0a1d2e;
}

.mp-control-grid > article.local{
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(102,230,239,.09),
            transparent 35%
        ),
        #0a1d2e;
}

.mp-control-icon{
    width:65px;
    height:65px;
    display:grid;
    place-items:center;
    margin-bottom:35px;
    border-radius:17px;
    color:#65ddff;
    background:rgba(57,215,255,.08);
    font-size:12px;
    font-weight:950;
}

.mp-control-grid article > small{
    color:#4bcff5;
    font-size:8px;
    font-weight:950;
    letter-spacing:.13em;
}

.mp-control-grid h3{
    margin:9px 0 28px;
    color:#fff;
    font-size:31px;
    letter-spacing:-.04em;
}

.mp-control-grid ul{
    display:grid;
    gap:11px;
    margin:0;
    padding:0;
    list-style:none;
}

.mp-control-grid li{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:46px;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:8px;
    color:#8fa2b1;
    background:rgba(255,255,255,.025);
    font-size:10px;
}

.mp-control-grid li span{
    color:#69dfa9;
    font-weight:950;
}

.mp-control-sync{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
}

.mp-control-sync > span{
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(57,215,255,.45)
        );
}

.mp-control-sync > span:last-child{
    background:
        linear-gradient(
            90deg,
            rgba(57,215,255,.45),
            transparent
        );
}

.mp-control-sync > div{
    width:100px;
    height:100px;
    display:grid;
    place-content:center;
    border:1px solid rgba(57,215,255,.2);
    border-radius:50%;
    background:#0a2032;
    text-align:center;
    box-shadow:0 0 45px rgba(22,136,255,.08);
}

.mp-control-sync i{
    color:#5bddff;
    font-size:20px;
    font-style:normal;
}

.mp-control-sync strong{
    color:#dff8ff;
    font-size:7px;
}

.mp-control-sync small{
    color:#567388;
    font-size:5px;
}


/* ============================================================
   FLOW
============================================================ */

.mp-flow{
    padding:120px 0;
    background:#f5f8fa;
}

.mp-flow-track{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
}

.mp-flow-track::before{
    content:"";
    position:absolute;
    left:9%;
    right:9%;
    top:68px;
    height:2px;
    background:#d4e2e9;
}

.mp-flow-track article{
    position:relative;
    z-index:2;
    min-height:265px;
    padding:26px;
    border:1px solid #dfe6ea;
    border-radius:17px;
    background:#fff;
}

.mp-flow-track article > span{
    color:#b9c5cd;
    font-size:8px;
    font-weight:950;
}

.mp-flow-track article > i{
    width:17px;
    height:17px;
    display:block;
    margin:25px 0 28px;
    border:5px solid #fff;
    border-radius:50%;
    background:#9fb5c2;
    box-shadow:0 0 0 1px #9fb5c2;
}

.mp-flow-track article.active > i{
    background:#1688ff;
    box-shadow:
        0 0 0 1px #1688ff,
        0 0 18px rgba(22,136,255,.25);
}

.mp-flow-track small{
    display:block;
    color:#1688da;
    font-size:7px;
    font-weight:950;
    letter-spacing:.11em;
}

.mp-flow-track strong{
    display:block;
    margin-top:5px;
    color:#142438;
    font-size:19px;
}

.mp-flow-track p{
    margin:13px 0 0;
    color:#7c8897;
    font-size:10px;
    line-height:1.65;
}


/* ============================================================
   PRODUCT STACK
============================================================ */

.mp-stack{
    padding:120px 0;
    background:#fff;
}

.mp-products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
}

.mp-product{
    position:relative;
    min-height:430px;
    display:flex;
    flex-direction:column;
    padding:29px;
    overflow:hidden;
    border:1px solid #dfe5e9;
    border-radius:21px;
    background:#fff;
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.mp-product::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:4px;
    background:#168cff;
    transform:scaleX(.27);
    transform-origin:left;
    transition:transform .28s ease;
}

.mp-product:hover{
    transform:translateY(-8px);
    border-color:#a9dff4;
    box-shadow:0 25px 60px rgba(15,53,78,.09);
}

.mp-product:hover::before{
    transform:scaleX(1);
}

.mp-product-top{
    display:flex;
    justify-content:space-between;
    gap:15px;
}

.mp-product-top span{
    color:#c2ccd3;
    font-size:9px;
    font-weight:950;
}

.mp-product-top small{
    color:#1687d9;
    font-size:7px;
    font-weight:950;
    letter-spacing:.1em;
}

.mp-product-icon{
    width:62px;
    height:62px;
    display:grid;
    place-items:center;
    margin:55px 0 28px;
    border-radius:17px;
    color:#1688da;
    background:#e9f6fc;
    font-size:10px;
    font-weight:950;
}

.mp-product h3{
    margin:0;
    color:#122136;
    font-size:24px;
    line-height:1.08;
    letter-spacing:-.04em;
}

.mp-product p{
    margin:17px 0 30px;
    color:#768292;
    font-size:12px;
    line-height:1.75;
}

.mp-product > strong{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:auto;
    color:#1686d8;
    font-size:10px;
}

.mp-product.pms{
    color:#fff;
    border-color:#0c2b43;
    background:
        radial-gradient(
            circle at 90% 0,
            rgba(57,215,255,.11),
            transparent 35%
        ),
        #091f31;
}

.mp-product.pms::before{
    background:#42d8ff;
}

.mp-product.pms .mp-product-top span{
    color:#4b697f;
}

.mp-product.pms .mp-product-top small{
    color:#58d9ff;
}

.mp-product.pms .mp-product-icon{
    color:#65ddff;
    background:rgba(57,215,255,.08);
}

.mp-product.pms h3{
    color:#fff;
}

.mp-product.pms p{
    color:#7790a2;
}

.mp-product.pms > strong{
    color:#60dcff;
}

.mp-product.revenue::before{
    background:#7fe5a6;
}

.mp-product.revenue .mp-product-icon{
    color:#278e62;
    background:#e9faf1;
}

.mp-product.intelligence::before{
    background:#8c7cff;
}

.mp-product.intelligence .mp-product-icon{
    color:#6554d7;
    background:#f0edff;
}


/* ============================================================
   OUTCOMES
============================================================ */

.mp-outcomes{
    padding:118px 0;
    background:#f3f6f8;
}

.mp-outcome-intro{
    max-width:850px;
}

.mp-outcome-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:13px;
    margin-top:55px;
}

.mp-outcome-grid article{
    min-height:310px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:24px;
    padding:31px;
    border:1px solid #dce4e8;
    border-radius:20px;
    background:#fff;
}

.mp-outcome-grid article > span{
    color:#188bdc;
    font-size:10px;
    font-weight:950;
}

.mp-outcome-grid small{
    color:#1689dc;
    font-size:8px;
    font-weight:950;
    letter-spacing:.12em;
}

.mp-outcome-grid h3{
    margin:18px 0 12px;
    color:#122136;
    font-size:24px;
    line-height:1.1;
    letter-spacing:-.035em;
}

.mp-outcome-grid p{
    margin:0;
    color:#788494;
    font-size:12px;
    line-height:1.75;
}


/* ============================================================
   FINAL CTA
============================================================ */

.mp-final{
    position:relative;
    min-height:690px;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
    background:#05111d;
}

.mp-final-photo{
    position:absolute;
    inset:0;
    background:
        url("https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=2200&q=88")
        center/cover no-repeat;
}

.mp-final-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(3,13,23,.985),
            rgba(4,17,30,.94) 54%,
            rgba(4,17,30,.7)
        );
}

.mp-final > .mp-container{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 500px;
    gap:90px;
    align-items:center;
}

.mp-final-copy > p{
    margin:0;
    color:#54d8fc;
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
}

.mp-final-copy > p span{
    display:block;
    margin-top:5px;
    color:#6c8498;
}

.mp-final-copy h2{
    margin:24px 0 0;
    color:#fff;
    font-size:clamp(54px,5vw,78px);
    line-height:.95;
    letter-spacing:-.06em;
}

.mp-final-copy h2 em{
    display:block;
    color:#62ddff;
    font-style:normal;
}

.mp-final-line{
    width:80px;
    height:2px;
    margin:28px 0;
    background:
        linear-gradient(
            90deg,
            #168cff,
            #42d9ff
        );
}

.mp-final-copy > span{
    display:block;
    max-width:620px;
    color:#8ca0b0;
    font-size:14px;
    line-height:1.8;
}

.mp-final-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:31px;
}


/* orbit */

.mp-final-orbit{
    position:relative;
    width:420px;
    height:420px;
    justify-self:center;
}

.mp-orbit{
    position:absolute;
    border:1px solid rgba(80,218,255,.16);
    border-radius:50%;
}

.mp-orbit.orbit-a{
    inset:20px;
}

.mp-orbit.orbit-b{
    inset:77px;
}

.mp-orbit.orbit-c{
    inset:132px;
}

.mp-orbit-core{
    position:absolute;
    left:50%;
    top:50%;
    width:130px;
    height:130px;
    transform:translate(-50%,-50%);
    display:grid;
    place-content:center;
    border-radius:50%;
    text-align:center;
    background:
        linear-gradient(
            145deg,
            #1688ff,
            #31cdec
        );
    box-shadow:
        0 0 90px rgba(26,151,255,.32);
}

.mp-orbit-core small{
    color:#fff;
    font-size:28px;
    line-height:1;
    font-weight:900;
}

.mp-orbit-core strong{
    margin-top:4px;
    color:#dcf8ff;
    font-size:7px;
    letter-spacing:.1em;
}

.mp-orbit-core span{
    color:#b5efff;
    font-size:6px;
}

.mp-orbit-node{
    position:absolute;
    z-index:3;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    color:#9cecff;
    background:rgba(7,29,45,.94);
    box-shadow:0 12px 30px rgba(0,0,0,.22);
    font-size:7px;
    font-weight:950;
}

.mp-orbit-node.node-a{
    left:186px;
    top:4px;
}

.mp-orbit-node.node-b{
    right:5px;
    top:186px;
}

.mp-orbit-node.node-c{
    left:186px;
    bottom:4px;
}

.mp-orbit-node.node-d{
    left:5px;
    top:186px;
}


/* ============================================================
   JS TOAST
============================================================ */

.mp-toast{
    position:fixed;
    z-index:99999;
    right:24px;
    bottom:24px;
    max-width:360px;
    padding:15px 18px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:11px;
    color:#fff;
    background:#092034;
    box-shadow:0 20px 55px rgba(0,0,0,.3);
    font-size:11px;
    font-weight:800;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:1200px){

    .mp-hero-grid{
        grid-template-columns:.9fr 1.1fr;
        gap:35px;
    }

    .mp-hero-copy h1{
        font-size:58px;
    }

    .mp-products{
        grid-template-columns:repeat(2,1fr);
    }

    .mp-flow-track{
        grid-template-columns:repeat(3,1fr);
    }

    .mp-flow-track::before{
        display:none;
    }

    .mp-outcome-grid{
        grid-template-columns:1fr 1fr;
    }

    .mp-outcome-grid article:last-child{
        grid-column:1 / -1;
    }

    .mp-final > .mp-container{
        grid-template-columns:1fr 400px;
    }

    .mp-final-orbit{
        width:370px;
        height:370px;
    }
}


@media (max-width:980px){

    .mp-container{
        width:min(100% - 34px,1380px);
    }

    .mp-hero{
        padding-top:105px;
    }

    .mp-hero-grid{
        grid-template-columns:1fr;
    }

    .mp-network-card{
        max-width:800px;
    }

    .mp-section-head{
        grid-template-columns:1fr;
        gap:22px;
    }

    .mp-reality-grid{
        grid-template-columns:1fr;
    }

    .mp-reality-grid > article{
        min-height:0;
    }

    .mp-console-body{
        grid-template-columns:1fr;
    }

    .mp-console-body > aside{
        display:flex;
        overflow-x:auto;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,.065);
    }

    .mp-console-body > aside button{
        min-width:145px;
        margin:0 4px 0 0;
    }

    .mp-dashboard-grid{
        grid-template-columns:1fr;
    }

    .mp-alert-grid{
        grid-template-columns:1fr;
    }

    .mp-table{
        overflow-x:auto;
    }

    .mp-table-row{
        min-width:800px;
    }

    .mp-hierarchy-shell{
        padding:40px 25px;
    }

    .mp-hierarchy-connector::after{
        left:-300px;
        right:-300px;
    }

    .mp-clusters{
        gap:10px;
    }

    .mp-control-grid{
        grid-template-columns:1fr;
    }

    .mp-control-sync{
        grid-template-columns:1fr auto 1fr;
    }

    .mp-final > .mp-container{
        grid-template-columns:1fr;
    }

    .mp-final{
        padding:105px 0;
    }
}


@media (max-width:720px){

    .mp-container{
        width:min(100% - 24px,1380px);
    }

    .mp-hero{
        min-height:0;
        padding:94px 0 65px;
    }

    .mp-breadcrumb{
        margin-bottom:38px;
        overflow-x:auto;
        white-space:nowrap;
    }

    .mp-hero-copy h1{
        font-size:46px;
    }

    .mp-lead{
        font-size:15px;
    }

    .mp-actions{
        flex-direction:column;
    }

    .mp-actions .mp-btn{
        width:100%;
    }

    .mp-hero-points{
        grid-template-columns:1fr;
    }

    .mp-network-summary{
        grid-template-columns:repeat(2,1fr);
    }

    .mp-network-summary > div:nth-child(2){
        border-right:0;
    }

    .mp-network-summary > div:nth-child(-n+2){
        border-bottom:1px solid rgba(255,255,255,.06);
    }

    .mp-network{
        height:350px;
    }

    .mp-node-cluster.c1{
        left:8%;
    }

    .mp-node-cluster.c3{
        right:8%;
    }

    .mp-property-node.p1{
        left:4%;
    }

    .mp-property-node.p2{
        left:21%;
    }

    .mp-property-node.p3{
        left:38%;
    }

    .mp-property-node.p4{
        left:55%;
    }

    .mp-property-node.p5{
        right:12%;
    }

    .mp-property-node.p6{
        display:none;
    }

    .mp-reality,
    .mp-command,
    .mp-hierarchy,
    .mp-control-model,
    .mp-flow,
    .mp-stack,
    .mp-outcomes{
        padding:82px 0;
    }

    .mp-section-head h2,
    .mp-command-heading h2,
    .mp-control-intro h2,
    .mp-outcome-intro h2{
        font-size:40px;
    }

    .mp-console > header{
        grid-template-columns:1fr auto;
    }

    .mp-console-context{
        display:none;
    }

    .mp-console-body > main{
        padding:16px;
    }

    .mp-workspace-head{
        flex-direction:column;
    }

    .mp-workspace-actions{
        width:100%;
    }

    .mp-workspace-actions button{
        flex:1;
    }

    .mp-kpis{
        grid-template-columns:repeat(2,1fr);
    }

    .mp-chart{
        overflow-x:auto;
    }

    .mp-chart-bars{
        min-width:520px;
    }

    .mp-hierarchy-top article{
        min-width:0;
        width:100%;
    }

    .mp-hierarchy-connector{
        height:35px;
    }

    .mp-hierarchy-connector::after{
        display:none;
    }

    .mp-clusters{
        grid-template-columns:1fr;
    }

    .mp-clusters > article::before{
        display:none;
    }

    .mp-control-grid > article{
        min-height:0;
        padding:28px;
    }

    .mp-flow-track{
        grid-template-columns:1fr;
    }

    .mp-flow-track article{
        min-height:0;
    }

    .mp-products{
        grid-template-columns:1fr;
    }

    .mp-product{
        min-height:370px;
    }

    .mp-outcome-grid{
        grid-template-columns:1fr;
    }

    .mp-outcome-grid article:last-child{
        grid-column:auto;
    }

    .mp-final-copy h2{
        font-size:47px;
    }

    .mp-final-actions{
        flex-direction:column;
    }

    .mp-final-actions .mp-btn{
        width:100%;
    }

    .mp-final-orbit{
        width:320px;
        height:320px;
        margin-top:25px;
    }

    .mp-orbit-node.node-a{
        left:136px;
    }

    .mp-orbit-node.node-b{
        top:136px;
    }

    .mp-orbit-node.node-c{
        left:136px;
    }

    .mp-orbit-node.node-d{
        top:136px;
    }
}


@media (max-width:480px){

    .mp-hero-copy h1{
        font-size:40px;
    }

    .mp-network-card > header{
        padding-inline:15px;
    }

    .mp-network-footer{
        flex-wrap:wrap;
        padding-block:12px;
    }

    .mp-network-footer button{
        width:100%;
        margin-left:0;
    }

    .mp-node-cluster{
        width:80px;
    }

    .mp-property-node{
        width:43px;
    }

    .mp-kpis{
        grid-template-columns:1fr;
    }

    .mp-section-head h2,
    .mp-command-heading h2,
    .mp-control-intro h2,
    .mp-outcome-intro h2{
        font-size:35px;
    }

    .mp-alert-grid article{
        grid-template-columns:32px 1fr;
    }

    .mp-alert-grid button{
        grid-column:2;
        justify-self:start;
    }

    .mp-clusters > article > div{
        grid-template-columns:1fr;
    }

    .mp-control-sync > div{
        width:82px;
        height:82px;
    }

    .mp-final-copy h2{
        font-size:40px;
    }

    .mp-final-orbit{
        transform:scale(.9);
    }
}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion:reduce){

    .mp *,
    .mp *::before,
    .mp *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

    .mp-btn:hover,
    .mp-product:hover,
    .mp-node:hover{
        transform:none;
    }

    .mp-node-main:hover,
    .mp-node-cluster.c2:hover{
        transform:translateX(-50%);
    }
}