:root { color-scheme: light; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1e293b; background: #f7fbf8; }
* { box-sizing: border-box; }
body { margin: 0; }
.login-page { display: flex; flex-direction: column; min-height: 100vh; background: linear-gradient(135deg, #eef6f0, #f7fbf8 55%, #eef3f7); }
.login-main { display: grid; flex: 1; place-items: center; padding: 40px 20px; }
.login-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 32px; width: min(100%, 1152px); }
.login-intro, .login-panel { border-radius: 24px; box-shadow: 0 8px 24px rgb(15 23 42 / 7%); }
.login-intro { display: flex; min-height: 570px; padding: 42px; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; background: #e9f5ee; }
.login-brand-link { display:inline-block; border-radius:12px; line-height:0; }.login-brand-link:focus-visible { outline:3px solid #4c7f83; outline-offset:5px; }.login-brand img { width: min(235px, 100%); height: 58px; object-fit: contain; }.login-brand p { margin: 8px 0 3px; color: #64748b; font-size: 14px; }.login-brand h1 { margin: 0; font-size: 26px; }.login-intro h2, .login-panel h2 { margin: 0; font-size: 25px; }.login-intro p, .login-panel p { color: #64748b; line-height: 1.55; }.login-intro div:last-child { max-width: 420px; }.login-illustration-mask { width:min(100%, 235px); height:235px; overflow:hidden; border-radius:24px; clip-path:inset(0 round 24px); line-height:0; }.login-illustration { display:block; width:100%; height:100%; object-fit:cover; }
.login-panel { display: flex; min-height: 570px; padding: 42px; flex-direction: column; align-items: stretch; background: #fff; text-align: center; }.login-kicker { display: inline-block; margin-bottom: 14px; color: #4e9a5c; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }.hanko-container { display: flex; min-height: 280px; align-items: center; justify-content: center; width: 100%; margin: 18px 0; }.hanko-container hanko-login { display: block; width: 100%; max-width: 390px; --color: #1e293b; --color-shade-1: #64748b; --color-shade-2: #dbe5df; --brand-color: #63b472; --brand-color-shade-1: #4e9a5c; --brand-contrast-color: #fff; --background-color: transparent; --link-color: #4e9a5c; --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size: 15px; --border-radius: 9px; --item-height: 44px; --item-margin: .8rem 0 0; --container-padding: 0; --container-max-width: 390px; --headline1-font-size: 22px; --headline1-font-weight: 650; --headline1-margin: 0 0 1rem; --divider-visibility: hidden; }.hanko-container hanko-login::part(form-item) { min-width: 100%; }.hanko-container hanko-login::part(button) { font-weight: 650; }.hanko-container hanko-login::part(input) { padding-inline: 12px; }.login-contact { margin-top: auto; font-size:14px; line-height:1.5; }.login-contact-lead,.login-contact-address { display:block; }.login-contact-address { font-size:13px; white-space:nowrap; }.login-contact a { color: #4e9a5c; font-weight: 600; white-space:nowrap; }.login-footer { min-height:49px; padding:13px 36px; border-top:1px solid #dbe5df; color:#64748b; background:#fff; font-size:14px; text-align:center; }
@media (max-width: 800px) { .login-main { padding: 24px 16px; }.login-grid { grid-template-columns: 1fr; gap: 20px; }.login-intro, .login-panel { min-height: auto; padding: 28px 24px; }.login-intro { gap: 25px; }.login-illustration-mask { width:min(100%, 170px); height:170px; border-radius:24px; clip-path:inset(0 round 24px); }.hanko-container { min-height: 240px; } }