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

@media (max-width: 700px) {


    /* ========================================
       PAGE
    ======================================== */

    html,
    body {
        width: 100%;
        min-height: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    body {
        min-height: 100vh;
        min-height: 100dvh;
    }


    /* ========================================
       HIDE DESKTOP ELEMENTS
    ======================================== */

    .login-button,
    .pie-chart {
        display: none;
    }


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

    .hero {
        width: 100%;

        min-height: 100vh;
        min-height: 100dvh;

        margin: 0;

        padding:
            32px
            22px;

        display: flex;

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


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

    .hero-content {
        width: 100%;
        max-width: 500px;

        display: flex;

        flex-direction: column;
        align-items: flex-start;

        flex-shrink: 1;
    }


    /* ========================================
       PENGAKOLL
    ======================================== */

    .brand {
        margin:
            0
            0
            10px;

        font-size:
            clamp(
                46px,
                14vw,
                64px
            );

        line-height: 0.95;

        letter-spacing: -0.05em;
    }


    /* ========================================
       MINDRE RÄKNANDE
    ======================================== */

    .less-counting {
        font-size:
            clamp(
                31px,
                9.5vw,
                43px
            );

        line-height: 0.98;
    }


    /* ========================================
       MER KOLL
    ======================================== */

    .more-control {
        margin:
            0
            0
            14px;

        font-size:
            clamp(
                34px,
                10.5vw,
                47px
            );

        line-height: 1;
    }


    /* ========================================
       INTRO
    ======================================== */

    .intro-text {
        width: 100%;
        max-width: 420px;

        font-size: 16px;

        line-height: 1.45;
    }


    /* ========================================
       TRY BUTTON
    ======================================== */

    .try-button {
        min-height: 50px;

        margin-top: 20px;

        padding:
            0
            22px;

        font-size: 16px;

        white-space: nowrap;
    }


    /* ========================================
       AUTH OVERLAY
    ======================================== */

    .auth-overlay {
        padding: 16px;

        align-items: center;
    }


    /* ========================================
       AUTH MODAL
    ======================================== */

    .auth-modal {
        width: 100%;
        max-width: 430px;

        max-height:
            calc(
                100dvh - 32px
            );

        padding:
            40px
            22px
            28px;

        border-radius: 20px;
    }


    /* ========================================
       AUTH HEADER
    ======================================== */

    .auth-header {
        margin-bottom: 22px;

        padding-right: 28px;
    }


    .auth-title {
        font-size: 28px;
    }


    .auth-description {
        font-size: 15px;
    }


    /* ========================================
       AUTH FORM
    ======================================== */

    .auth-form {
        gap: 15px;
    }


    /* ========================================
       AUTH INPUT
    ======================================== */

    .auth-field input {
        height: 50px;

        font-size: 16px;
    }


    /* ========================================
       AUTH MAIN BUTTON
    ======================================== */

    .auth-main-button {
        min-height: 50px;
    }


    /* ========================================
       AUTH CLOSE
    ======================================== */

    .auth-close {
        top: 10px;
        right: 11px;
    }

}