*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    min-height:100%;
}

body.pwa-page{
    min-height:100vh;

    background:
        linear-gradient(
            145deg,
            #f6f9fd,
            #eaf1fb
        );

    color:#172942;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

.pwa-main{
    width:min(
        940px,
        calc(100% - 30px)
    );

    margin:0 auto;

    padding:
        45px
        0
        60px;
}

.pwa-brand{
    display:flex;

    align-items:center;
    justify-content:center;

    margin-bottom:25px;
}

.pwa-brand img{
    width:105px;
    height:auto;
}

.pwa-card{
    overflow:hidden;

    border:
        1px solid
        #d7e2ee;

    border-radius:23px;

    background:#fff;

    box-shadow:
        0
        25px
        70px
        rgba(17,52,96,.12);
}

.pwa-hero{
    position:relative;

    overflow:hidden;

    padding:
        38px
        40px;

    background:
        linear-gradient(
            120deg,
            #082e73,
            #124ea5
        );

    color:#fff;
}

.pwa-hero::after{
    content:"🥖";

    position:absolute;

    right:30px;
    top:-10px;

    font-size:150px;

    opacity:.06;

    transform:rotate(-13deg);
}

.pwa-hero>*{
    position:relative;
    z-index:1;
}

.pwa-hero small{
    color:#ffd36c;

    font-size:10px;
    font-weight:900;

    letter-spacing:1.5px;

    text-transform:uppercase;
}

.pwa-hero h1{
    margin:
        8px
        0
        9px;

    font-size:
        clamp(
            28px,
            5vw,
            45px
        );

    line-height:1;

    font-weight:900;
}

.pwa-hero p{
    max-width:620px;

    margin:0;

    color:#d8e7fb;

    font-size:13px;
    line-height:1.55;
}

.pwa-content{
    padding:
        30px
        40px
        37px;
}

.pwa-platforms{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:14px;
}

.pwa-platform{
    padding:20px;

    border:
        1px solid
        #dce5ef;

    border-radius:15px;

    background:#f8fbff;
}

.pwa-platform-icon{
    font-size:30px;
}

.pwa-platform h2{
    margin:
        9px
        0
        6px;

    font-size:17px;
}

.pwa-platform p{
    margin:0;

    color:#718198;

    font-size:11px;

    line-height:1.5;
}

.pwa-actions{
    margin-top:25px;

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;
}

.pwa-install-button{
    min-height:49px;

    padding:
        0
        22px;

    border:0;
    border-radius:11px;

    background:#0d3f91;

    color:#fff;

    cursor:pointer;

    font:inherit;

    font-size:13px;
    font-weight:900;

    box-shadow:
        0
        8px
        20px
        rgba(13,63,145,.20);
}

.pwa-install-button[hidden]{
    display:none;
}

.pwa-back{
    display:inline-flex;

    align-items:center;

    min-height:49px;

    padding:
        0
        18px;

    border:
        1px solid
        #d3deea;

    border-radius:11px;

    background:#fff;

    color:#405773;

    text-decoration:none;

    font-size:12px;
    font-weight:800;
}

.pwa-status{
    margin-top:18px;

    padding:12px;

    border-radius:10px;

    background:#edf4ff;

    color:#476582;

    text-align:center;

    font-size:11px;
}

@media(max-width:650px){

    .pwa-main{
        padding-top:20px;
    }

    .pwa-hero,
    .pwa-content{
        padding:
            25px
            20px;
    }

    .pwa-platforms{
        grid-template-columns:1fr;
    }

}