:root{
    --text:#182230;
    --muted:#556078;
    --border:#d9dee8;
    --border-strong:#bfc6d2;
    --violet:#635bff;
    --violet-dark:#5148e5;
    --teal:#14b8a6;
    --soft-violet:#f7f6ff;
}

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

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

body{
    min-width:320px;
    background:#ffffff;
    color:var(--text);
    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.55;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input{
    font:inherit;
}

.page{
    min-height:100vh;
    display:grid;
    grid-template-rows:auto 1fr;
    background:#ffffff;
}

.site-header{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    min-height:64px;
    padding:14px 32px;
    background:#ffffff;
    border-bottom:1px solid #edf0f4;
}

.logo{
    display:inline-flex;
    align-items:baseline;
    line-height:1;
    font-size:29px;
    font-weight:800;
    letter-spacing:-.045em;
}

.logo-arve{
    color:var(--teal);
}

.logo-teha{
    color:#111827;
}

.login-page{
    display:grid;
    place-items:center;
    padding:28px 16px 24px;
    background:#ffffff;
}

.login-card{
    width:min(100%,460px);
    padding:30px 30px 24px;
    background:#ffffff;
    border:1px solid var(--border-strong);
    box-shadow:0 10px 28px rgba(16,24,40,.055);
    text-align:center;
}

.login-heading{
    margin-bottom:20px;
}

h1{
    margin:0 0 9px;
    font-size:30px;
    line-height:1.14;
    letter-spacing:-.04em;
    font-weight:700;
}

.subtitle{
    margin:0;
    color:var(--muted);
    font-size:15px;
    line-height:1.55;
    font-weight:500;
    text-align:center;
}

.login-form{
    display:grid;
    gap:14px;
}

.field label{
    display:block;
    margin-bottom:7px;
    color:#344054;
    font-size:14px;
    font-weight:700;
    text-align:center;
}

.field input[type="email"]{
    width:100%;
    height:48px;
    padding:0 14px;
    color:#111827;
    background:#ffffff;
    border:1px solid var(--border-strong);
    font-size:15px;
    font-weight:500;
    text-align:center;
    outline:none;
    transition:border-color .18s ease,box-shadow .18s ease;
}

.field input[type="email"]::placeholder{
    color:#8b95a7;
}

.field input[type="email"]:focus{
    border-color:var(--violet);
    box-shadow:0 0 0 3px rgba(99,91,255,.10);
}

.consent-box{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px;
    background:#ffffff;
    border:1px solid var(--border);
    justify-content:center;
    text-align:center;
}

.consent-box input[type="checkbox"]{
    appearance:none;
    position:relative;
    flex:0 0 auto;
    width:18px;
    height:18px;
    margin-top:2px;
    background:#ffffff;
    border:1.5px solid #aeb7c4;
    cursor:pointer;
}

.consent-box input[type="checkbox"]:checked{
    background:var(--violet);
    border-color:var(--violet);
}

.consent-box input[type="checkbox"]:checked::after{
    content:"";
    position:absolute;
    left:5px;
    top:2px;
    width:4px;
    height:8px;
    border:solid #ffffff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.consent-box input[type="checkbox"]:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(99,91,255,.12);
}

.consent-box label{
    color:#475467;
    font-size:13px;
    line-height:1.5;
    font-weight:500;
    cursor:pointer;
}

.consent-box a{
    color:var(--violet);
    font-weight:700;
}

.consent-box a:hover{
    text-decoration:underline;
}

.submit-btn{
    justify-self:center;
    width:auto;
    min-width:170px;
    min-height:42px;
    padding:10px 18px;
    color:#ffffff;
    background:var(--violet);
    border:1px solid var(--violet);
    font-size:14px;
    line-height:1.2;
    font-weight:800;
    cursor:pointer;
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.submit-btn:hover{
    background:var(--violet-dark);
    border-color:var(--violet-dark);
    transform:translateY(-1px);
}

.submit-btn:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(99,91,255,.14);
}

.login-note{
    margin-top:16px;
    padding:14px;
    color:#475467;
    background:var(--soft-violet);
    border:1px solid #dedcf6;
    font-size:13px;
    line-height:1.55;
    font-weight:500;
    text-align:center;
}

.login-note strong{
    display:block;
    color:#4338ca;
    font-weight:800;
}

.login-note p{
    margin-top:6px;
}

.contact{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px 6px;
    margin-top:16px;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
    font-weight:500;
    text-align:center;
}

.contact a{
    color:var(--violet);
    font-weight:700;
}

.contact a:hover{
    text-decoration:underline;
}

@media(max-width:700px){
    .page{
        min-height:auto;
    }

    .site-header{
        min-height:58px;
        padding:13px 16px;
    }

    .logo{
        font-size:26px;
    }

    .login-page{
        place-items:start center;
        padding:20px 12px 16px;
    }

   .login-card{
        width:100%;
        padding:22px 18px 18px;
        box-shadow:0 7px 20px rgba(16,24,40,.045);
    }

    .login-heading{
        margin-bottom:17px;
    }

    h1{
        font-size:27px;
    }

    .subtitle{
        font-size:14px;
        line-height:1.5;
    }

    .login-form{
        gap:12px;
    }

    .field input[type="email"]{
        height:45px;
        font-size:14px;
    }

    .consent-box{
        gap:9px;
        padding:11px;
    }

    .consent-box label,
    .login-note,
    .contact{
        font-size:12.5px;
    }

    .submit-btn{
        min-width:0;
        min-height:40px;
        padding:9px 15px;
        font-size:13.5px;
    }

    .login-note{
        margin-top:14px;
        padding:12px;
    }

    .contact{
        margin-top:13px;
    }
}