* {
    box-sizing:border-box;
}


body {
    margin:0;
    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

    line-height:1.7;
    color:#222;
    background:#fff;
}


header,
main,
footer {

    max-width:1000px;
    margin:auto;
    padding:30px;
}


.logo {

    display:block;
    max-width:622px;
    width:100%;
    height:auto;
    margin:20px auto 40px;

}


.intro {

    font-size:1.25rem;
    text-align:center;

}


.banner {

    display:block;
    width:100%;
    margin:35px auto;
    border-radius:12px;

}


.video-container {

    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    margin:40px 0;

}


.video-container iframe {

    position:absolute;
    width:100%;
    height:100%;
    border:0;

}


.browser-icon {

    width:25px;
    height:25px;
    vertical-align:middle;
    margin:0 3px;

}


.features {

    margin-top:50px;

}


.feature {

    margin:35px 0;

}


.feature h2 {

    font-size:1.5rem;

}


.download {

    margin-top:50px;
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;

}


.button {

    background:#9dff20;
    color:#000;
    padding:15px 25px;
    border-radius:8px;
    text-decoration:none;
    font-weight:bold;

}


.button:hover {

    background:#345c00;
    color:white;

}


.store-badge {

    width:70px;

}


.store-text {

    color:#777;
    font-size:14px;

}


footer {

    color:#333;
    font-size:14px;

}


footer a {

    text-decoration:none;

}


@media(max-width:600px){

    header,
    main,
    footer {

        padding:20px;

    }


    .intro {

        font-size:1.1rem;

    }

}