/* =========================================================
   RESCLY
   COMING SOON
========================================================= */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --navy: #18324a;

    --green: #4f806b;
    --green-dark: #376451;
    --green-light: #edf5f1;

    --white: #ffffff;
    --cream: #faf9f6;

    --text: #24323d;
    --muted: #68757e;

    --border: #e3e8e5;
}


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


body {

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    background:
        linear-gradient(
            135deg,
            #faf9f6 0%,
            #ffffff 55%,
            #f3f8f5 100%
        );

    -webkit-font-smoothing: antialiased;
}


/* =========================================================
   MAIN
========================================================= */


.coming-soon {

    flex: 1;

    display: flex;

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

    padding:
        80px
        24px;
}


.content {

    width: 100%;

    max-width: 720px;

    text-align: center;
}


/* =========================================================
   LOGO
========================================================= */


.logo {

    display: inline-block;

    margin-bottom: 70px;

    color: var(--navy);

    font-size: 32px;
    font-weight: 800;

    letter-spacing: -1.5px;

    line-height: 1;

    text-decoration: none;
}


.logo span {
    color: var(--green);
}


/* =========================================================
   CONTENT
========================================================= */


.label {

    display: inline-block;

    margin-bottom: 24px;

    padding:
        7px
        14px;

    border-radius: 50px;

    background: var(--green-light);

    color: var(--green-dark);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.6px;
}


h1 {

    max-width: 700px;

    margin:
        0 auto
        26px;

    color: var(--navy);

    font-size:
        clamp(
            44px,
            6vw,
            70px
        );

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -3px;
}


h1 span {

    display: block;

    color: var(--green);
}


.description {

    max-width: 590px;

    margin:
        0 auto
        32px;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.75;
}


/* =========================================================
   DEVELOPMENT STATUS
========================================================= */


.status {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        10px
        15px;

    border:
        1px solid
        var(--border);

    border-radius: 50px;

    background:
        rgba(
            255,
            255,
            255,
            .75
        );

    color: var(--muted);

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


.status-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green);
}


/* =========================================================
   FOOTER
========================================================= */


footer {

    padding:
        22px
        24px;

    text-align: center;

    border-top:
        1px solid
        rgba(
            227,
            232,
            229,
            .7
        );
}


footer p {

    color: var(--muted);

    font-size: 11px;
}


/* =========================================================
   MOBILE
========================================================= */


@media (max-width: 600px) {

    .coming-soon {

        padding:
            60px
            22px;
    }


    .logo {

        margin-bottom: 55px;

        font-size: 29px;
    }


    h1 {

        font-size:
            clamp(
                40px,
                12vw,
                54px
            );

        letter-spacing: -2px;
    }


    .description {

        font-size: 15px;

        line-height: 1.7;
    }

}