:root {
    --green:
        #087456;

    --green-dark:
        #075b45;

    --green-light:
        #eaf7f1;

    --text:
        #17251f;

    --text-soft:
        #68776f;

    --border:
        #dfe8e3;

    --background:
        #f5f8f6;

    --white:
        #ffffff;

    --danger:
        #aa3838;

    --danger-soft:
        #fff3f3;

    --page-width:
        1120px;
}


*,
*::before,
*::after {
    box-sizing:
        border-box;
}


html {
    min-width:
        320px;

    background:
        var(--background);
}


body {
    min-height:
        100vh;

    margin:
        0;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        "DM Sans",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input {
    font:
        inherit;
}


button {
    border:
        0;
}


svg {
    display:
        block;
}


[hidden] {
    display:
        none !important;
}


.page-container {
    width:
        min(
            calc(100% - 40px),
            var(--page-width)
        );

    margin-inline:
        auto;
}


.site-header {
    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(255, 255, 255, 0.96);
}


.header-inner {
    display:
        flex;

    min-height:
        74px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.akora-brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;
}


.akora-brand-symbol {
    display:
        grid;

    width:
        42px;

    height:
        42px;

    place-items:
        center;

    border-radius:
        12px;

    background:
        #078667;

    color:
        #ffffff;
}


.akora-brand-symbol svg {
    width:
        29px;

    height:
        29px;
}


.akora-brand-wordmark {
    display:
        flex;

    flex-direction:
        column;

    line-height:
        1;
}


.akora-brand-wordmark strong {
    color:
        #101c18;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        16px;

    font-weight:
        800;

    letter-spacing:
        -0.65px;
}


.akora-brand-wordmark small {
    margin-top:
        4px;

    color:
        #078667;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        2.4px;

    text-transform:
        uppercase;
}


.home-link {
    padding:
        9px 13px;

    border-radius:
        10px;

    color:
        #51635b;

    font-size:
        12px;

    font-weight:
        700;
}


.home-link:hover,
.home-link:focus-visible {
    background:
        var(--green-light);

    color:
        var(--green-dark);
}


.auth-main {
    flex:
        1;

    display:
        grid;

    place-items:
        center;

    padding:
        58px 0 80px;
}


.auth-shell {
    width:
        min(
            100%,
            470px
        );
}


.auth-intro {
    margin-bottom:
        25px;
}


.auth-eyebrow {
    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.auth-intro h1 {
    margin:
        0;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        clamp(
            35px,
            6vw,
            49px
        );

    letter-spacing:
        -2.4px;

    line-height:
        1.08;
}


.auth-intro p {
    margin:
        13px 0 0;

    color:
        var(--text-soft);

    font-size:
        13px;

    line-height:
        1.7;
}


.auth-card {
    padding:
        28px;

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

    border-radius:
        22px;

    background:
        var(--white);

    box-shadow:
        0 18px 50px
        rgba(7, 65, 48, 0.07);
}


.auth-form {
    display:
        grid;

    gap:
        20px;
}


.form-field {
    display:
        grid;

    gap:
        7px;
}


.form-field label {
    color:
        #33483f;

    font-size:
        12px;

    font-weight:
        800;
}


.form-field input {
    width:
        100%;

    min-height:
        50px;

    padding:
        12px 14px;

    border:
        1px solid
        #d8e4de;

    border-radius:
        12px;

    outline:
        none;

    background:
        #ffffff;

    color:
        var(--text);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease;
}


.form-field input:focus {
    border-color:
        var(--green);

    box-shadow:
        0 0 0 4px
        rgba(8, 116, 86, 0.09);
}


.form-field input[aria-invalid="true"] {
    border-color:
        #c75656;

    box-shadow:
        0 0 0 4px
        rgba(199, 86, 86, 0.08);
}


.form-help {
    color:
        #84918b;

    font-size:
        10px;

    line-height:
        1.55;
}


.field-error {
    min-height:
        16px;

    color:
        var(--danger);

    font-size:
        10px;

    font-weight:
        700;
}


.password-wrap {
    position:
        relative;
}


.password-wrap input {
    padding-right:
        72px;
}


.password-toggle {
    position:
        absolute;

    top:
        50%;

    right:
        9px;

    min-width:
        56px;

    padding:
        7px 8px;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--green-dark);

    font-size:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transform:
        translateY(-50%);
}


.password-toggle:hover,
.password-toggle:focus-visible {
    background:
        var(--green-light);
}


.auth-alert {
    margin-bottom:
        18px;

    padding:
        12px 14px;

    border:
        1px solid
        #f0caca;

    border-radius:
        11px;

    background:
        var(--danger-soft);

    color:
        #943a3a;

    font-size:
        11px;

    line-height:
        1.6;
}


.auth-alert.is-success {
    border-color:
        #c8e5d9;

    background:
        #effaf5;

    color:
        #267359;
}


.auth-submit {
    display:
        inline-flex;

    width:
        100%;

    min-height:
        51px;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        12px 17px;

    border-radius:
        12px;

    background:
        var(--green);

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        background 150ms ease,
        transform 150ms ease;
}


.auth-submit:hover,
.auth-submit:focus-visible {
    background:
        var(--green-dark);

    transform:
        translateY(-1px);
}


.auth-submit:disabled {
    cursor:
        wait;

    opacity:
        0.66;

    transform:
        none;
}


.auth-switch {
    margin:
        19px 0 0;

    color:
        var(--text-soft);

    font-size:
        11px;

    text-align:
        center;
}


.auth-switch a {
    color:
        var(--green);

    font-weight:
        800;
}


.auth-security-note {
    display:
        flex;

    gap:
        10px;

    margin-top:
        18px;

    padding:
        13px;

    border-radius:
        12px;

    background:
        #f0f7f4;

    color:
        #5e7068;

    font-size:
        10px;

    line-height:
        1.55;
}


.auth-security-note strong {
    color:
        var(--green-dark);
}


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

    background:
        #ffffff;
}


.footer-inner {
    display:
        flex;

    min-height:
        68px;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #87928c;

    font-size:
        10px;
}


.footer-inner strong {
    color:
        var(--green);
}


@media (max-width: 520px) {

    .page-container {
        width:
            min(
                calc(100% - 28px),
                var(--page-width)
            );
    }


    .header-inner {
        min-height:
            68px;
    }


    .akora-brand-symbol {
        width:
            40px;

        height:
            40px;
    }


    .auth-main {
        display:
            block;

        padding:
            42px 0 60px;
    }


    .auth-card {
        padding:
            23px;

        border-radius:
            19px;
    }


    .auth-intro h1 {
        font-size:
            38px;

        letter-spacing:
            -2px;
    }


    .footer-inner {
        min-height:
            82px;

        align-items:
            flex-start;

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            4px;
    }
}
/* ==========================================================
   AKORA SIGNUP PROFILE FIGURE
   ========================================================== */

.avatar-choice-field {
    min-width:
        0;

    margin:
        0;

    padding:
        0;

    border:
        0;
}


.avatar-choice-field legend {
    margin-bottom:
        8px;

    color:
        var(--text);

    font-size:
        10px;

    font-weight:
        800;
}


.avatar-choice-grid {
    display:
        grid;

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

    gap:
        9px;
}


.avatar-choice {
    position:
        relative;

    display:
        grid;

    min-height:
        92px;

    place-items:
        center;

    align-content:
        center;

    gap:
        6px;

    padding:
        10px;

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

    border-radius:
        13px;

    background:
        #ffffff;

    cursor:
        pointer;
}


.avatar-choice input {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;
}


.avatar-choice:has(input:checked) {
    border-color:
        var(--green);

    background:
        #eaf7f2;

    box-shadow:
        0 0 0 3px
        rgba(7, 134, 103, 0.08);
}


.avatar-choice:has(input:focus-visible) {
    outline:
        2px solid
        var(--green);

    outline-offset:
        2px;
}


.avatar-choice-figure {
    font-size:
        31px;

    line-height:
        1;
}


.avatar-choice strong {
    color:
        var(--text);

    font-size:
        9px;
}


.avatar-choice-field
.form-help {
    display:
        block;

    margin-top:
        8px;
}


.avatar-choice-field
.field-error {
    display:
        block;

    min-height:
        16px;

    margin-top:
        3px;
}


@media (max-width: 420px) {

    .avatar-choice-grid {
        gap:
            7px;
    }


    .avatar-choice {
        min-height:
            82px;

        padding:
            8px 5px;
    }


    .avatar-choice-figure {
        font-size:
            27px;
    }
}