:root {
    --font:
        "Poppins",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /*
     * InWins brand palette
     */

    --deep-forest:
        #0f1f16;

    --forest:
        #1b5e3a;

    --emerald:
        #22c55e;

    --lime:
        #a3f73d;

    --lime-bright:
        #d8ff25;

    --mint:
        #b7f7d6;

    --cream:
        #f5f7f4;

    --warning:
        #f2b84b;

    --danger:
        #e36b6b;


    --radius-xs:
        10px;

    --radius-sm:
        13px;

    --radius-md:
        18px;

    --radius-lg:
        26px;

    --radius-xl:
        32px;


    --shadow-small:
        0 4px 16px
        rgba(
            0,
            0,
            0,
            0.13
        );

    --shadow-medium:
        0 16px 45px
        rgba(
            0,
            0,
            0,
            0.22
        );

    --shadow-glow:
        0 0 35px
        rgba(
            163,
            247,
            61,
            0.12
        );


    --transition:
        170ms ease;
}


/* -------------------------------------------------
   DARK THEME
-------------------------------------------------- */

html[data-theme="dark"] {
    --bg:
        #07110c;

    --surface:
        #0d1912;

    --surface-raised:
        #122119;

    --surface-soft:
        #16271e;

    --text:
        #f5f7f4;

    --text-secondary:
        #b7c2bb;

    --muted:
        #7f9186;

    --border:
        #20372a;

    --border-strong:
        #31503c;

    --primary:
        var(--lime);

    --primary-strong:
        var(--emerald);

    --primary-text:
        #0a150e;

    --primary-soft:
        rgba(
            163,
            247,
            61,
            0.1
        );
}


/* -------------------------------------------------
   LIGHT THEME
-------------------------------------------------- */

html[data-theme="light"] {
    --bg:
        #f3f7f4;

    --surface:
        #ffffff;

    --surface-raised:
        #ffffff;

    --surface-soft:
        #eaf3ed;

    --text:
        #122018;

    --text-secondary:
        #56675e;

    --muted:
        #788a80;

    --border:
        #d8e4dc;

    --border-strong:
        #c1d2c7;

    --primary:
        #62b91f;

    --primary-strong:
        #168949;

    --primary-text:
        #ffffff;

    --primary-soft:
        #eef9e8;
}


/* -------------------------------------------------
   SYSTEM THEME - LIGHT DEFAULT
-------------------------------------------------- */

html[data-theme="system"] {
    --bg:
        #f3f7f4;

    --surface:
        #ffffff;

    --surface-raised:
        #ffffff;

    --surface-soft:
        #eaf3ed;

    --text:
        #122018;

    --text-secondary:
        #56675e;

    --muted:
        #788a80;

    --border:
        #d8e4dc;

    --border-strong:
        #c1d2c7;

    --primary:
        #62b91f;

    --primary-strong:
        #168949;

    --primary-text:
        #ffffff;

    --primary-soft:
        #eef9e8;
}


@media (
    prefers-color-scheme: dark
) {

    html[data-theme="system"] {
        --bg:
            #07110c;

        --surface:
            #0d1912;

        --surface-raised:
            #122119;

        --surface-soft:
            #16271e;

        --text:
            #f5f7f4;

        --text-secondary:
            #b7c2bb;

        --muted:
            #7f9186;

        --border:
            #20372a;

        --border-strong:
            #31503c;

        --primary:
            var(--lime);

        --primary-strong:
            var(--emerald);

        --primary-text:
            #0a150e;

        --primary-soft:
            rgba(
                163,
                247,
                61,
                0.1
            );
    }
}


/* -------------------------------------------------
   BASE
-------------------------------------------------- */

* {
    box-sizing:
        border-box;
}


html {
    min-height:
        100%;

    background:
        var(--bg);
}


body {
    min-height:
        100vh;

    margin:
        0;

    font-family:
        var(--font);

    color:
        var(--text);

    line-height:
        1.5;

    background:

        radial-gradient(
            circle
            at 88% -10%,
            rgba(
                163,
                247,
                61,
                0.10
            ),
            transparent
            31rem
        ),

        radial-gradient(
            circle
            at -10% 8%,
            rgba(
                34,
                197,
                94,
                0.10
            ),
            transparent
            30rem
        ),

        var(--bg);

    -webkit-font-smoothing:
        antialiased;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
select,
textarea {
    font:
        inherit;
}


/* -------------------------------------------------
   DESKTOP HEADER
-------------------------------------------------- */

.desktop-header {
    position:
        sticky;

    top:
        0;

    z-index:
        100;

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

    background:
        color-mix(
            in srgb,
            var(--bg) 88%,
            transparent
        );

    backdrop-filter:
        blur(18px);
}


.desktop-header__inner {
    width:
        min(
            1220px,
            calc(
                100% - 36px
            )
        );

    min-height:
        78px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        22px;
}


/* -------------------------------------------------
   BRAND
-------------------------------------------------- */

.brand {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-shrink:
        0;
}


.brand__logo {
    width:
        49px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.brand__logo-svg {
    width:
        100%;

    height:
        100%;

    filter:
        drop-shadow(
            0 0 10px
            rgba(
                163,
                247,
                61,
                0.15
            )
        );
}


.brand__identity {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1.15;
}


.brand__name {
    font-size:
        1.22rem;

    font-weight:
        700;

    letter-spacing:
        -0.035em;
}


.brand__name span {
    color:
        var(--lime);
}


.brand__tagline {
    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        0.62rem;

    font-weight:
        500;

    letter-spacing:
        0.02em;
}


/* -------------------------------------------------
   DESKTOP NAV
-------------------------------------------------- */

.desktop-nav {
    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        3px;
}


.desktop-nav__link {
    position:
        relative;

    padding:
        9px 12px;

    border-radius:
        11px;

    color:
        var(--text-secondary);

    font-size:
        0.87rem;

    font-weight:
        600;

    transition:
        background
        var(--transition),

        color
        var(--transition);
}


.desktop-nav__link:hover {
    color:
        var(--text);

    background:
        var(--surface-soft);
}


.desktop-nav__link--active {
    color:
        var(--primary);

    background:
        var(--primary-soft);
}


.desktop-nav__link--active::after {
    content:
        "";

    position:
        absolute;

    left:
        25%;

    right:
        25%;

    bottom:
        2px;

    height:
        2px;

    border-radius:
        999px;

    background:
        var(--primary);
}


/* -------------------------------------------------
   MOBILE HEADER
-------------------------------------------------- */

.mobile-header {
    display:
        none;
}


/* -------------------------------------------------
   MAIN SHELL
-------------------------------------------------- */

.page-shell {
    width:
        min(
            1220px,
            calc(
                100% - 36px
            )
        );

    margin:
        0 auto;

    padding:
        34px 0
        88px;
}


/* -------------------------------------------------
   HERO
-------------------------------------------------- */

.hero {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.35fr
        )
        minmax(
            265px,
            0.65fr
        );

    gap:
        16px;

    margin-bottom:
        18px;
}


.hero-card {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        260px;

    padding:
        30px;

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

    border-radius:
        var(--radius-lg);

    background:

        linear-gradient(
            135deg,
            rgba(
                34,
                197,
                94,
                0.13
            ),
            rgba(
                163,
                247,
                61,
                0.04
            )
        ),

        var(--surface);

    box-shadow:
        var(--shadow-medium);
}


.hero-card::after {
    content:
        "";

    position:
        absolute;

    width:
        320px;

    height:
        320px;

    top:
        -155px;

    right:
        -120px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                216,
                255,
                37,
                0.18
            ),
            transparent 68%
        );

    pointer-events:
        none;
}


.hero-eyebrow {
    position:
        relative;

    z-index:
        1;

    margin:
        0 0 9px;

    color:
        var(--primary);

    font-size:
        0.73rem;

    font-weight:
        700;

    letter-spacing:
        0.12em;
}


.hero-card h1 {
    position:
        relative;

    z-index:
        1;

    max-width:
        700px;

    margin:
        0;

    font-size:
        clamp(
            2.2rem,
            5vw,
            4.25rem
        );

    line-height:
        1.02;

    letter-spacing:
        -0.055em;
}


.hero-card p {
    position:
        relative;

    z-index:
        1;

    max-width:
        610px;

    margin:
        16px 0 0;

    color:
        var(--text-secondary);

    font-size:
        1rem;
}


/* -------------------------------------------------
   PROGRESS HERO
-------------------------------------------------- */

.progress-hero {
    min-height:
        260px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        var(--radius-lg);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-medium);
}


.progress-ring {
    --progress:
        0;

    width:
        184px;

    aspect-ratio:
        1;

    display:
        grid;

    place-items:
        center;

    position:
        relative;

    border-radius:
        50%;

    background:
        conic-gradient(
            var(--lime)
            calc(
                var(--progress)
                * 1%
            ),
            var(--surface-soft)
            0
        );

    box-shadow:
        var(--shadow-glow);
}


.progress-ring::before {
    content:
        "";

    position:
        absolute;

    width:
        144px;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        var(--surface);
}


.progress-ring__content {
    position:
        relative;

    z-index:
        1;

    text-align:
        center;
}


.progress-ring__value {
    display:
        block;

    font-size:
        2.25rem;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.progress-ring__label {
    display:
        block;

    margin-top:
        7px;

    color:
        var(--muted);

    font-size:
        0.77rem;

    font-weight:
        500;
}


/* -------------------------------------------------
   STAT CARDS
-------------------------------------------------- */

.stat-grid {
    display:
        grid;

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

    gap:
        12px;

    margin-bottom:
        26px;
}


.stat-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        18px;

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

    border-radius:
        var(--radius-md);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-small);
}


.stat-card::after {
    content:
        "";

    position:
        absolute;

    width:
        80px;

    height:
        80px;

    right:
        -35px;

    bottom:
        -35px;

    border-radius:
        50%;

    background:
        rgba(
            163,
            247,
            61,
            0.05
        );
}


.stat-card__icon {
    font-size:
        1.25rem;
}


.stat-card__value {
    margin-top:
        10px;

    font-size:
        2rem;

    font-weight:
        800;

    letter-spacing:
        -0.045em;
}


.stat-card__label {
    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        0.75rem;

    font-weight:
        500;
}


/* -------------------------------------------------
   SECTIONS
-------------------------------------------------- */

.section-heading {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        end;

    gap:
        12px;

    margin-bottom:
        13px;
}


.section-heading h2 {
    margin:
        0;

    font-size:
        1.36rem;

    letter-spacing:
        -0.025em;
}


.section-heading p {
    margin:
        3px 0 0;

    color:
        var(--muted);

    font-size:
        0.84rem;
}


/* -------------------------------------------------
   WEEK STRIP
-------------------------------------------------- */

.week-strip {
    display:
        grid;

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

    gap:
        7px;

    margin:
        10px 0
        28px;
}


.week-day {
    min-height:
        65px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

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

    border-radius:
        var(--radius-sm);

    background:
        var(--surface);

    transition:
        border-color
        var(--transition),

        background
        var(--transition);
}


.week-day__label {
    color:
        var(--muted);

    font-size:
        0.7rem;

    font-weight:
        600;
}


.week-day__dot {
    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(--border-strong);
}


.week-day--today {
    border-color:
        color-mix(
            in srgb,
            var(--primary)
            55%,
            var(--border)
        );

    background:
        var(--primary-soft);
}


.week-day--today
.week-day__label {
    color:
        var(--primary);
}


.week-day--today
.week-day__dot {
    background:
        var(--primary);

    box-shadow:
        0 0 12px
        rgba(
            163,
            247,
            61,
            0.35
        );
}


/* -------------------------------------------------
   HABIT LIST
-------------------------------------------------- */

.habit-list {
    display:
        grid;

    gap:
        10px;
}


.habit-card {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        15px;

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

    border-radius:
        var(--radius-md);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-small);

    transition:
        transform
        var(--transition),

        border-color
        var(--transition);
}


.habit-card:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--border-strong);
}


.habit-card__icon {
    width:
        44px;

    height:
        44px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        14px;

    background:
        var(--surface-soft);

    color:
        var(--primary);

    font-size:
        1.22rem;

    font-weight:
        700;
}


.habit-card__content {
    min-width:
        0;

    flex:
        1;
}


.habit-card__content strong {
    display:
        block;

    font-size:
        0.95rem;

    font-weight:
        600;
}


.habit-card__content span {
    display:
        block;

    margin-top:
        2px;

    overflow:
        hidden;

    color:
        var(--muted);

    font-size:
        0.76rem;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


/* -------------------------------------------------
   BUTTONS
-------------------------------------------------- */

.button {
    min-height:
        43px;

    padding:
        9px 16px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        transparent;

    border-radius:
        12px;

    color:
        var(--primary-text);

    background:
        linear-gradient(
            135deg,
            var(--lime),
            var(--emerald)
        );

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        transform
        var(--transition),

        box-shadow
        var(--transition),

        filter
        var(--transition);
}


.button:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.04);

    box-shadow:
        0 8px 25px
        rgba(
            34,
            197,
            94,
            0.18
        );
}


.button--ghost {
    border-color:
        var(--border);

    color:
        var(--text-secondary);

    background:
        transparent;
}


.button--ghost:hover {
    color:
        var(--text);

    background:
        var(--surface-soft);

    border-color:
        var(--border-strong);

    box-shadow:
        none;
}


.button--small {
    min-height:
        36px;

    padding:
        7px 11px;

    border-radius:
        10px;

    font-size:
        0.78rem;
}


/* -------------------------------------------------
   AI / INFO CARD
-------------------------------------------------- */

.ai-card {
    position:
        relative;

    overflow:
        hidden;

    margin-top:
        24px;

    padding:
        20px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--primary)
            23%,
            var(--border)
        );

    border-radius:
        var(--radius-md);

    background:

        linear-gradient(
            135deg,
            rgba(
                34,
                197,
                94,
                0.09
            ),
            rgba(
                163,
                247,
                61,
                0.035
            )
        ),

        var(--surface);
}


.ai-card::after {
    content:
        "";

    position:
        absolute;

    width:
        170px;

    height:
        170px;

    right:
        -80px;

    top:
        -80px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                163,
                247,
                61,
                0.10
            ),
            transparent 70%
        );
}


.ai-card__badge {
    position:
        relative;

    z-index:
        1;

    display:
        inline-flex;

    padding:
        5px 9px;

    border-radius:
        999px;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-size:
        0.68rem;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.ai-card h3,
.ai-card p {
    position:
        relative;

    z-index:
        1;
}


.ai-card h3 {
    margin:
        13px 0 5px;

    font-size:
        1.06rem;
}


.ai-card p {
    margin:
        0;

    color:
        var(--text-secondary);

    font-size:
        0.83rem;
}


/* -------------------------------------------------
   GENERIC CARDS / FORMS FOR NEXT PAGES
-------------------------------------------------- */

.card {
    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-md);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-small);
}


.card--padded {
    padding:
        20px;
}


.form-control {
    width:
        100%;

    min-height:
        45px;

    padding:
        10px 12px;

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

    border-radius:
        11px;

    outline:
        none;

    color:
        var(--text);

    background:
        var(--surface);

    transition:
        border-color
        var(--transition),

        box-shadow
        var(--transition);
}


.form-control:focus {
    border-color:
        var(--primary);

    box-shadow:
        0 0 0
        3px
        var(--primary-soft);
}


textarea.form-control {
    min-height:
        110px;

    resize:
        vertical;
}


.form-label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--text-secondary);

    font-size:
        0.78rem;

    font-weight:
        600;
}


/* -------------------------------------------------
   MOBILE NAV
-------------------------------------------------- */

.mobile-bottom-nav {
    display:
        none;
}


/* -------------------------------------------------
   FOOTER
-------------------------------------------------- */

.site-footer {
    border-top:
        1px solid
        var(--border);

    color:
        var(--muted);
}


.site-footer__inner {
    width:
        min(
            1220px,
            calc(
                100% - 36px
            )
        );

    margin:
        0 auto;

    padding:
        24px 0;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    font-size:
        0.72rem;
}


.site-footer__inner p,
.site-footer__inner small {
    margin:
        0;
}


.site-footer__inner small {
    margin-left:
        auto;
}


.footer-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--text);

    font-weight:
        600;
}


.footer-brand svg {
    width:
        31px;

    height:
        25px;
}


/* -------------------------------------------------
   TABLET
-------------------------------------------------- */

@media (
    max-width: 940px
) {

    .brand__tagline {
        display:
            none;
    }


    .desktop-nav__link {
        padding:
            8px 9px;

        font-size:
            0.8rem;
    }


    .hero {
        grid-template-columns:
            minmax(
                0,
                1.15fr
            )
            minmax(
                230px,
                0.65fr
            );
    }

}


/* -------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (
    max-width: 760px
) {

    body {
        background:

            radial-gradient(
                circle
                at 100% -5%,
                rgba(
                    163,
                    247,
                    61,
                    0.09
                ),
                transparent
                21rem
            ),

            var(--bg);
    }


    .desktop-header {
        display:
            none;
    }


    .mobile-header {
        position:
            sticky;

        top:
            0;

        z-index:
            150;

        min-height:
            64px;

        padding:
            8px
            max(
                12px,
                env(
                    safe-area-inset-right
                )
            );

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

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

        background:
            color-mix(
                in srgb,
                var(--bg)
                90%,
                transparent
            );

        backdrop-filter:
            blur(18px);
    }


    .mobile-brand {
        display:
            flex;

        align-items:
            center;

        gap:
            7px;
    }


    .mobile-brand svg {
        width:
            39px;

        height:
            31px;
    }


    .mobile-brand strong {
        font-size:
            1.05rem;

        font-weight:
            700;

        letter-spacing:
            -0.035em;
    }


    .mobile-brand strong span {
        color:
            var(--lime);
    }


    .mobile-settings-link {
        width:
            42px;

        height:
            42px;

        display:
            grid;

        place-items:
            center;

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

        border-radius:
            13px;

        color:
            var(--text-secondary);

        background:
            var(--surface);
    }


    .mobile-settings-link svg {
        width:
            20px;

        height:
            20px;

        fill:
            none;

        stroke:
            currentColor;

        stroke-width:
            1.7;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;
    }


    .page-shell {
        width:
            min(
                100% - 22px,
                1220px
            );

        padding:
            17px 0
            106px;
    }


    .hero {
        grid-template-columns:
            1fr;

        gap:
            10px;

        margin-bottom:
            12px;
    }


    .hero-card {
        min-height:
            auto;

        padding:
            21px;

        border-radius:
            21px;
    }


    .hero-card h1 {
        font-size:
            clamp(
                2rem,
                10vw,
                3.05rem
            );
    }


    .hero-card p {
        margin-top:
            11px;

        font-size:
            0.88rem;
    }


    .hero-eyebrow {
        font-size:
            0.64rem;
    }


    .progress-hero {
        min-height:
            205px;

        border-radius:
            21px;
    }


    .progress-ring {
        width:
            155px;
    }


    .progress-ring::before {
        width:
            122px;
    }


    .progress-ring__value {
        font-size:
            1.9rem;
    }


    .stat-grid {
        gap:
            7px;

        margin-bottom:
            22px;
    }


    .stat-card {
        padding:
            12px;

        border-radius:
            15px;
    }


    .stat-card__icon {
        font-size:
            1rem;
    }


    .stat-card__value {
        margin-top:
            6px;

        font-size:
            1.4rem;
    }


    .stat-card__label {
        font-size:
            0.65rem;

        line-height:
            1.2;
    }


    .week-strip {
        gap:
            5px;

        margin-bottom:
            24px;
    }


    .week-day {
        min-height:
            52px;

        border-radius:
            11px;
    }


    .habit-card {
        align-items:
            center;

        padding:
            13px;

        border-radius:
            15px;
    }


    .habit-card__icon {
        width:
            40px;

        height:
            40px;

        border-radius:
            12px;
    }


    .habit-card .button {
        flex-shrink:
            0;
    }


    /*
     * Floating thumb-friendly navigation
     */

    .mobile-bottom-nav {
        position:
            fixed;

        left:
            max(
                9px,
                env(
                    safe-area-inset-left
                )
            );

        right:
            max(
                9px,
                env(
                    safe-area-inset-right
                )
            );

        bottom:
            max(
                9px,
                env(
                    safe-area-inset-bottom
                )
            );

        z-index:
            250;

        min-height:
            68px;

        padding:
            5px;

        display:
            grid;

        grid-template-columns:
            repeat(
                5,
                1fr
            );

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

        border-radius:
            22px;

        background:
            color-mix(
                in srgb,
                var(--surface)
                93%,
                transparent
            );

        box-shadow:
            0 18px 45px
            rgba(
                0,
                0,
                0,
                0.34
            );

        backdrop-filter:
            blur(22px);
    }


    .mobile-bottom-nav__item {
        min-width:
            0;

        min-height:
            56px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            3px;

        border-radius:
            16px;

        color:
            var(--muted);

        transition:
            color
            var(--transition),

            background
            var(--transition);
    }


    .mobile-bottom-nav__item--active {
        color:
            var(--primary);

        background:
            var(--primary-soft);
    }


    .mobile-bottom-nav__icon {
        width:
            22px;

        height:
            22px;

        display:
            grid;

        place-items:
            center;
    }


    .mobile-bottom-nav__icon svg {
        width:
            21px;

        height:
            21px;

        fill:
            none;

        stroke:
            currentColor;

        stroke-width:
            1.8;

        stroke-linecap:
            round;

        stroke-linejoin:
            round;
    }


    .mobile-bottom-nav__label {
        overflow:
            hidden;

        max-width:
            100%;

        font-size:
            0.59rem;

        font-weight:
            600;

        white-space:
            nowrap;

        text-overflow:
            ellipsis;
    }


    .site-footer {
        display:
            none;
    }

}


/* -------------------------------------------------
   SMALL PHONES
-------------------------------------------------- */

@media (
    max-width: 390px
) {

    .page-shell {
        width:
            calc(
                100% - 18px
            );
    }


    .hero-card {
        padding:
            18px;
    }


    .stat-card {
        padding:
            10px;
    }


    .stat-card__value {
        font-size:
            1.25rem;
    }


    .habit-card__content span {
        max-width:
            145px;
    }


    .button {
        padding:
            8px 12px;
    }

}


/* -------------------------------------------------
   ACCESSIBILITY
-------------------------------------------------- */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}