:root{
    --dark:#202b33;
    --dark2:#172128;
    --green:#26745e;
    --green2:#1e604e;
    --greenSoft:#e9f3ef;
    --text:#172128;
    --muted:#66747b;
    --line:#dde4e7;
    --bg:#f4f6f7;
    --white:#fff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

a{
    color:inherit;
}

.mg-shell{
    width:min(1180px,calc(100% - 36px));
    margin:auto;
}

.mg-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.95);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px);
}

.mg-nav{
    min-height:70px;
    display:flex;
    align-items:center;
    gap:28px;
}

.mg-brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}

.mg-brand-mark{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--dark);
    color:#fff;
    font-weight:900;
}

.mg-brand-copy{
    display:flex;
    flex-direction:column;
}

.mg-brand-copy strong{
    font-size:.95rem;
}

.mg-brand-copy small{
    color:var(--green);
    font-size:.62rem;
    font-weight:900;
    letter-spacing:.13em;
}

.mg-nav-links{
    margin-left:auto;
    display:flex;
    gap:24px;
}

.mg-nav-links a{
    text-decoration:none;
    color:#5f6c73;
    font-size:.8rem;
    font-weight:750;
}

.mg-nav-pro{
    padding:10px 15px;
    border-radius:11px;
    background:var(--dark);
    color:#fff;
    text-decoration:none;
    font-size:.76rem;
    font-weight:850;
}

/* HERO */

.mg-hero{
    overflow:hidden;
    background:
        radial-gradient(
            circle at 84% 17%,
            rgba(38,116,94,.14),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #f4f6f7 100%
        );
}

.mg-hero-grid{
    min-height:650px;
    padding:65px 0 80px;
    display:grid;
    grid-template-columns:
        minmax(0,.95fr)
        minmax(470px,1.05fr);
    gap:55px;
    align-items:center;
}

.mg-eyebrow{
    display:inline-block;
    padding:7px 10px;
    border-radius:100px;
    background:var(--greenSoft);
    color:var(--green2);
    font-size:.67rem;
    font-weight:900;
    letter-spacing:.11em;
}

.mg-hero h1{
    margin:18px 0;
    max-width:620px;
    font-size:clamp(3.1rem,6vw,5.7rem);
    line-height:.9;
    letter-spacing:-.065em;
}

.mg-hero h1 span{
    color:var(--green);
}

.mg-hero h1 em{
    display:block;
    margin-top:13px;
    color:#4e5c63;
    font-size:.47em;
    line-height:1.05;
    font-style:normal;
    font-weight:700;
    letter-spacing:-.035em;
}

.mg-lead{
    max-width:610px;
    color:var(--muted);
    line-height:1.68;
    font-size:1.05rem;
}

.mg-lead strong{
    color:#3e4b52;
}

.mg-pills{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin:23px 0;
}

.mg-pills span{
    padding:8px 11px;
    border:1px solid #dce4e0;
    border-radius:100px;
    background:#fff;
    color:#4f5d64;
    font-size:.75rem;
    font-weight:750;
}

.mg-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:24px;
}

.mg-primary,
.mg-secondary{
    min-height:62px;
    padding:10px 17px;
    display:flex;
    align-items:center;
    gap:11px;
    border-radius:14px;
    text-decoration:none;
}

.mg-primary{
    min-width:240px;
    background:var(--green);
    color:#fff;
    box-shadow:0 12px 30px rgba(38,116,94,.2);
}

.mg-secondary{
    min-width:185px;
    border:1px solid var(--line);
    background:#fff;
}

.mg-primary>b{
    font-size:1.3rem;
}

.mg-primary span,
.mg-secondary span{
    display:flex;
    flex-direction:column;
}

.mg-primary strong,
.mg-secondary strong{
    font-size:.87rem;
}

.mg-primary small,
.mg-secondary small{
    margin-top:3px;
    font-size:.67rem;
    opacity:.78;
}

.disabled{
    cursor:not-allowed!important;
    opacity:.72!important;
}

.mg-prelaunch{
    margin-top:15px;
    color:#7b878d;
    font-size:.73rem;
}

/* APP PREVIEW */

.mg-app-preview{
    overflow:hidden;
    border:1px solid #dce3e6;
    border-radius:21px;
    background:#fff;
    box-shadow:0 35px 80px rgba(22,32,40,.16);
}

.mg-app-top{
    min-height:48px;
    padding:0 16px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    border-bottom:1px solid #e5e9eb;
}

.mg-app-top>strong{
    font-size:.74rem;
}

.mg-app-top>span{
    justify-self:end;
    color:var(--green);
    font-size:.58rem;
    font-weight:900;
    letter-spacing:.1em;
}

.mg-dots{
    display:flex;
    gap:6px;
}

.mg-dots i{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#ccd4d8;
}

.mg-app-body{
    min-height:410px;
    display:grid;
    grid-template-columns:58px 1fr;
}

.mg-app-body>aside{
    padding:14px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    background:var(--dark);
}

.mg-mini-logo{
    width:31px;
    height:31px;
    margin-bottom:8px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#fff;
    color:var(--dark);
    font-size:.66rem;
    font-weight:900;
}

.mg-app-body>aside i{
    width:20px;
    height:20px;
    border-radius:6px;
    background:rgba(255,255,255,.1);
}

.mg-app-body>aside i.on{
    background:var(--green);
}

.mg-app-body>section{
    padding:20px;
    background:#f5f7f8;
}

.mg-demo-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:17px;
}

.mg-demo-title div{
    display:flex;
    flex-direction:column;
}

.mg-demo-title small{
    color:#829097;
    font-size:.54rem;
    font-weight:900;
}

.mg-demo-title strong{
    font-size:1.05rem;
}

.mg-demo-title>span{
    padding:6px 9px;
    border-radius:100px;
    background:#e5f1ed;
    color:var(--green2);
    font-size:.55rem;
    font-weight:850;
}

.mg-demo-group{
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-radius:14px;
    background:linear-gradient(
        135deg,
        #29483f,
        var(--green)
    );
    color:#fff;
}

.mg-demo-group div{
    display:flex;
    flex-direction:column;
}

.mg-demo-group small{
    font-size:.55rem;
    opacity:.72;
}

.mg-demo-group strong{
    font-size:1.25rem;
}

.mg-demo-group>b{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    font-size:2rem;
}

.mg-demo-group>b small{
    font-size:.54rem;
}

.mg-demo-cards{
    margin:13px 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.mg-demo-cards article{
    padding:12px;
    display:flex;
    flex-direction:column;
    border:1px solid #e2e7e9;
    border-radius:12px;
    background:#fff;
}

.mg-demo-cards b{
    color:var(--green);
    font-size:1.15rem;
}

.mg-demo-cards strong{
    margin-top:5px;
    font-size:.66rem;
}

.mg-demo-cards small{
    color:#849097;
    font-size:.53rem;
}

.mg-demo-table{
    overflow:hidden;
    border:1px solid #e2e7e9;
    border-radius:12px;
    background:#fff;
}

.mg-demo-table>div{
    padding:9px 12px;
    display:grid;
    grid-template-columns:1.4fr .55fr .55fr;
    gap:8px;
    border-bottom:1px solid #edf0f1;
    font-size:.6rem;
}

.mg-demo-table .head{
    background:#f6f8f8;
    color:#89949a;
    font-size:.48rem;
}

.mg-demo-table strong{
    color:var(--green);
}

/* BENEFITS */

.mg-benefit-strip{
    background:var(--dark);
    color:#fff;
}

.mg-benefit-strip .mg-shell{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.mg-benefit-strip article{
    min-height:103px;
    padding:20px;
    display:flex;
    gap:13px;
    align-items:center;
    border-right:1px solid rgba(255,255,255,.09);
}

.mg-benefit-strip article>b{
    color:#72b49f;
    font-size:.64rem;
}

.mg-benefit-strip article>span{
    display:flex;
    flex-direction:column;
}

.mg-benefit-strip strong{
    font-size:.76rem;
}

.mg-benefit-strip small{
    margin-top:3px;
    color:#acb8bd;
    font-size:.62rem;
    line-height:1.35;
}

/* GENERAL */

.mg-section{
    padding:88px 0;
}

.mg-section-title{
    max-width:760px;
    margin-bottom:37px;
}

.mg-section-title>span,
.mg-small-title{
    color:var(--green);
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.13em;
}

.mg-section-title h2,
.mg-privacy h2{
    margin:10px 0 14px;
    font-size:clamp(2rem,4.5vw,3.55rem);
    line-height:1;
    letter-spacing:-.045em;
}

.mg-section-title h2 em,
.mg-privacy h2 em{
    display:block;
    color:var(--green);
    font-style:normal;
}

.mg-section-title p,
.mg-privacy p{
    color:var(--muted);
    line-height:1.65;
}

/* FEATURES */

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

.mg-feature-grid article{
    position:relative;
    min-height:215px;
    padding:23px;
    border:1px solid var(--line);
    border-radius:18px;
    background:#fff;
}

.mg-feature-grid article>b{
    position:absolute;
    right:18px;
    top:17px;
    color:#bec7cb;
    font-size:.59rem;
}

.mg-feature-grid article>i{
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--greenSoft);
    color:var(--green2);
    font-style:normal;
    font-weight:900;
}

.mg-feature-grid h3{
    margin:19px 0 8px;
}

.mg-feature-grid p{
    margin:0;
    color:var(--muted);
    line-height:1.55;
    font-size:.82rem;
}

/* STEPS */

.mg-dark-section{
    background:var(--dark);
    color:#fff;
}

.mg-section-title.light>span{
    color:#74b9a3;
}

.mg-section-title.light h2{
    color:#fff;
}

.mg-section-title.light h2 em{
    color:#7fc3ad;
}

.mg-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}

.mg-steps article{
    min-height:180px;
    padding:21px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:17px;
    background:rgba(255,255,255,.055);
}

.mg-steps article>b{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#72b69f;
    color:#15221d;
    font-size:.74rem;
}

.mg-steps h3{
    margin:22px 0 7px;
}

.mg-steps p{
    margin:0;
    color:#acb7bd;
    line-height:1.55;
    font-size:.76rem;
}

/* PLANS */

.mg-plans{
    display:grid;
    grid-template-columns:290px 1fr;
    gap:18px;
}

.mg-free,
.mg-pro-box{
    padding:25px;
    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;
}

.mg-plan-tag{
    padding:6px 9px;
    display:inline-block;
    border-radius:100px;
    background:#edf1f2;
    font-size:.6rem;
    font-weight:900;
}

.mg-free h3{
    margin:16px 0 7px;
}

.mg-zero{
    display:block;
    font-size:2.5rem;
}

.mg-free>small{
    color:#89949a;
    font-size:.66rem;
}

.mg-free ul{
    margin:23px 0;
    padding:0;
    display:grid;
    gap:9px;
    list-style:none;
    color:#59666d;
    font-size:.77rem;
}

.mg-pro-head{
    margin-bottom:20px;
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
}

.mg-pro-head span{
    color:var(--green);
    font-size:.6rem;
    font-weight:900;
}

.mg-pro-head h3{
    margin:4px 0 0;
}

.mg-pro-head>small{
    color:#829097;
    font-size:.64rem;
}

.mg-price-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.mg-price-grid article{
    position:relative;
    padding:19px;
    border:1px solid #e0e5e8;
    border-radius:16px;
}

.mg-price-grid article.featured{
    border:2px solid var(--green);
    box-shadow:0 12px 30px rgba(38,116,94,.1);
}

.mg-price-grid article>span{
    color:#7d898f;
    font-size:.58rem;
    font-weight:900;
}

.mg-price-grid article>strong{
    margin:8px 0 10px;
    display:block;
    font-size:2.25rem;
}

.mg-price-grid article>strong small{
    color:#77838a;
    font-size:.62rem;
}

.mg-price-grid p{
    min-height:48px;
    color:#6c787e;
    font-size:.72rem;
    line-height:1.45;
}

.popular{
    position:absolute;
    right:11px;
    top:-11px;
    padding:5px 8px;
    border-radius:100px;
    background:var(--green);
    color:#fff;
    font-size:.51rem;
}

.mg-plan-btn{
    width:100%;
    min-height:41px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d6dde0;
    border-radius:10px;
    background:#fff;
    text-decoration:none;
    font-size:.7rem;
    font-weight:850;
}

.mg-plan-btn.primary{
    border-color:var(--green);
    background:var(--green);
    color:#fff;
}

/* PRIVACY */

.mg-privacy{
    background:#e8f0ed;
}

.mg-privacy-grid{
    display:grid;
    grid-template-columns:1fr 410px;
    gap:55px;
    align-items:center;
}

.mg-privacy-points{
    margin-top:22px;
    display:grid;
    gap:9px;
}

.mg-privacy-points p{
    margin:0;
    padding:13px 15px;
    border-radius:12px;
    background:rgba(255,255,255,.67);
    font-size:.76rem;
}

.mg-privacy-points b{
    display:block;
    margin-bottom:3px;
    color:#35434a;
}

.mg-privacy-card{
    padding:29px;
    border-radius:22px;
    background:var(--dark);
    color:#fff;
}

.mg-privacy-card>span{
    color:#7cc1ab;
    font-size:.6rem;
    font-weight:900;
}

.mg-privacy-card h3{
    margin:8px 0 19px;
    font-size:1.38rem;
}

.mg-privacy-card ul{
    padding:0;
    display:grid;
    gap:8px;
    list-style:none;
    color:#c4cdd1;
    font-size:.77rem;
}

.mg-privacy-card li::before{
    content:"✓ ";
    color:#7ac0aa;
    font-weight:900;
}

.mg-privacy-card a{
    margin-top:15px;
    display:inline-block;
    color:#86c8b4;
    font-size:.72rem;
    font-weight:800;
}

/* FAQ */

.mg-faq-section{
    background:#fff;
}

.mg-faq-layout{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:68px;
}

.mg-faq{
    border-top:1px solid var(--line);
}

.mg-faq details{
    border-bottom:1px solid var(--line);
}

.mg-faq summary{
    position:relative;
    padding:20px 35px 20px 0;
    cursor:pointer;
    list-style:none;
    font-size:.88rem;
    font-weight:800;
}

.mg-faq summary::after{
    content:"+";
    position:absolute;
    right:4px;
    color:var(--green);
    font-size:1.2rem;
}

.mg-faq details[open] summary::after{
    content:"−";
}

.mg-faq p{
    margin:-5px 0 22px;
    color:#66737a;
    line-height:1.65;
    font-size:.81rem;
}

.mg-faq a{
    color:var(--green);
    font-weight:800;
}

/* FINAL */

.mg-final{
    padding:70px 0;
    background:linear-gradient(
        135deg,
        #1d2b32,
        #244b40
    );
    color:#fff;
}

.mg-final-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:45px;
}

.mg-final-inner>div:first-child{
    max-width:700px;
}

.mg-final span{
    color:#8bcbb7;
    font-size:.61rem;
    font-weight:900;
}

.mg-final h2{
    margin:9px 0 12px;
    font-size:clamp(2.2rem,4.7vw,3.9rem);
    line-height:.98;
    letter-spacing:-.05em;
}

.mg-final h2 em{
    color:#8bcbb7;
    font-style:normal;
}

.mg-final p{
    color:#bdc9ce;
}

.mg-final-inner>div:last-child{
    min-width:220px;
    display:grid;
    gap:9px;
}

.mg-final-download,
.mg-final-pro{
    min-height:53px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    text-decoration:none;
    font-size:.76rem;
    font-weight:850;
}

.mg-final-download{
    background:#fff;
    color:var(--dark);
}

.mg-final-pro{
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
}

/* FOOTER */

.mg-footer{
    padding:35px 0 18px;
    background:var(--dark2);
    color:#c1cbd0;
}

.mg-footer>.mg-shell:first-child{
    display:flex;
    justify-content:space-between;
    gap:30px;
}

.mg-footer>.mg-shell:first-child>div{
    display:flex;
    flex-direction:column;
}

.mg-footer strong{
    color:#fff;
}

.mg-footer small{
    margin-top:4px;
    color:#839198;
    font-size:.67rem;
}

.mg-footer nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:14px;
}

.mg-footer nav a{
    color:#acb8bd;
    text-decoration:none;
    font-size:.68rem;
}

.mg-footer-bottom{
    margin-top:25px;
    padding-top:16px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.07);
    color:#6f8088;
    font-size:.61rem;
}

/* RESPONSIVE */

@media(max-width:1000px){

    .mg-nav-links{
        display:none;
    }

    .mg-nav-pro{
        margin-left:auto;
    }

    .mg-hero-grid{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .mg-app-preview{
        width:min(700px,100%);
        margin:auto;
    }

    .mg-benefit-strip .mg-shell{
        grid-template-columns:repeat(2,1fr);
    }

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

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

    .mg-plans{
        grid-template-columns:1fr;
    }

    .mg-privacy-grid{
        grid-template-columns:1fr;
    }

    .mg-privacy-card{
        max-width:600px;
    }

    .mg-faq-layout{
        grid-template-columns:1fr;
        gap:25px;
    }

}

@media(max-width:720px){

    .mg-shell{
        width:min(100% - 24px,1180px);
    }

    .mg-nav{
        min-height:63px;
    }

    .mg-nav-pro{
        padding:8px 10px;
        font-size:.68rem;
    }

    .mg-hero-grid{
        padding:45px 0 55px;
        gap:28px;
    }

    .mg-hero h1{
        font-size:clamp(3rem,15vw,5rem);
    }

    .mg-actions{
        display:grid;
    }

    .mg-primary,
    .mg-secondary{
        width:100%;
    }

    .mg-app-body{
        grid-template-columns:45px 1fr;
    }

    .mg-app-body>section{
        padding:12px;
    }

    .mg-benefit-strip .mg-shell{
        grid-template-columns:1fr;
    }

    .mg-section{
        padding:63px 0;
    }

    .mg-feature-grid{
        grid-template-columns:1fr;
    }

    .mg-feature-grid article{
        min-height:auto;
    }

    .mg-steps{
        grid-template-columns:1fr;
    }

    .mg-price-grid{
        grid-template-columns:1fr;
    }

    .mg-price-grid p{
        min-height:auto;
    }

    .mg-pro-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .mg-final-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .mg-final-inner>div:last-child{
        width:100%;
    }

    .mg-footer>.mg-shell:first-child{
        flex-direction:column;
    }

    .mg-footer nav{
        justify-content:flex-start;
    }

    .mg-footer-bottom{
        flex-direction:column;
        gap:6px;
    }

}

@media(max-width:480px){

    .mg-demo-cards{
        grid-template-columns:1fr;
    }

    .mg-demo-table{
        display:none;
    }

}