/* KlerkIt sign-in pages (PO dual-login design, 2026-10-08).
   Views/Home/Login.cshtml      -> .kl-login.kl-sme   (SME workspace, mascot)
   Views/Home/FirmLogin.cshtml  -> .kl-login.kl-firm  (accounting firm workspace, no mascot)
   No visible role switch on either page: both post to the same Home/LoginJson and the
   server decides the workspace. Everything is scoped under .kl-login so the global
   assets/css/style.css loaded by _LayoutLogin cannot leak in or out. */

.kl-login, .kl-overlay {
    --kl-ink: #0e2346;
    --kl-muted: #657996;
    --kl-blue: #2468ed;
    --kl-line: #dce6f4;
    --kl-link: #1459d9;
    --kl-tag: #087a84;
}

.kl-login {
    min-height: 100svh;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(440px, .94fr);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: var(--kl-ink);
    background: #f8fbff;
    box-sizing: border-box;
}

.kl-login *, .kl-login *::before, .kl-login *::after { box-sizing: border-box; }
.kl-login button, .kl-login input, .kl-login textarea { font: inherit; }
.kl-login button { cursor: pointer; }
.kl-login a { color: var(--kl-link); text-decoration: none; font-weight: 650; }
.kl-login a:hover { text-decoration: underline; }
.kl-login h1, .kl-login h2, .kl-login h3, .kl-login p, .kl-overlay h3, .kl-overlay p { font-family: inherit; }
/* Global style.css gives every <p> grey 1rem/1.714rem text; each .kl-* paragraph sets its own colour and size. */
:where(.kl-login, .kl-overlay) p { line-height: 1.5; } /* zero specificity: every .kl-* rule still wins */

/* ---------- story (left) ---------- */
.kl-story {
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 34px clamp(30px, 5.3vw, 95px);
    background: radial-gradient(ellipse at 65% 46%, #165b91 0%, #112e5b 42%, #091a38 90%);
}

.kl-sme .kl-story::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 48% 55%, #40bff329, transparent 40%);
    pointer-events: none;
}

.kl-firm .kl-story { color: #f3f7ff; background: radial-gradient(ellipse at 68% 68%, #174676 0%, #142b52 36%, #0a1730 88%); }
.kl-firm .kl-story::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(#80aaff19 1px, transparent 1px), linear-gradient(90deg, #80aaff19 1px, transparent 1px);
    background-size: 45px 45px;
    pointer-events: none;
}

.kl-brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 850;
    letter-spacing: -.04em;
    font-size: 25px;
    color: #fff !important;
}
.kl-brand:hover { text-decoration: none !important; }

.kl-mark {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(140deg, #54d3ff, #1462ea 75%);
    box-shadow: 0 5px 18px #0003;
    color: #fff;
    font-size: 28px;
    font-style: italic;
    flex: none;
}
.kl-firm .kl-mark { border-radius: 12px; background: linear-gradient(140deg, #53c6ff, #1959df 80%); box-shadow: 0 8px 18px #0005; }

.kl-brand small {
    display: block;
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #b6d3f6;
    font-weight: 750;
}

.kl-story-main { position: relative; z-index: 1; max-width: 670px; margin: auto 0; }
.kl-firm .kl-story-main { width: 100%; max-width: 700px; }

.kl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #89cbfb55;
    background: #e2f6ff15;
    border-radius: 99px;
    color: #d3eaff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.kl-dot { width: 8px; height: 8px; border-radius: 50%; background: #47ddb6; box-shadow: 0 0 0 5px #47ddb625; }

.kl-firm .kl-eyebrow { padding: 0; border: 0; background: none; border-radius: 0; color: #c0d9ff; font-size: 11px; font-weight: 840; letter-spacing: .14em; }
.kl-firm .kl-dot { width: 9px; height: 9px; background: #42dfb2; box-shadow: 0 0 0 5px #42dfb221; }

.kl-mascot-wrap { position: relative; width: min(410px, 75%); margin: -10px auto -40px; filter: drop-shadow(0 32px 35px #020e2b80); }
.kl-mascot { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: screen; border-radius: 50%; }

.kl-float {
    position: absolute;
    background: #16385ac9;
    border: 1px solid #bbddff5a;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 20px 40px #020f2b38;
    font-size: 12px;
    font-weight: 750;
    color: #cce7ff;
    backdrop-filter: blur(12px);
}
.kl-float strong { display: block; color: #fff; font-size: 16px; margin-top: 2px; }
.kl-float.one { top: 20%; right: -18%; }
.kl-float.two { left: -21%; bottom: 21%; }

.kl-story h1 {
    font-size: clamp(38px, 4vw, 66px);
    line-height: 1.07;
    letter-spacing: -.06em;
    max-width: 650px;
    margin: 0 0 18px;
    font-weight: 850;
    color: #fff;
}
.kl-story h1 em { font-style: normal; color: #78dcff; }
.kl-firm .kl-story h1 { font-size: clamp(36px, 3.55vw, 62px); letter-spacing: -.055em; margin: 20px 0 15px; max-width: 690px; }
.kl-firm .kl-story h1 em { color: #79caff; }

.kl-summary { font-size: clamp(15px, 1.2vw, 19px); line-height: 1.55; max-width: 560px; color: #c6d9f1; margin: 0; }
.kl-firm .kl-summary { color: #c5d7ed; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.5; max-width: 620px; margin: 0 0 22px; }

.kl-story-footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: #9ab7d7;
    font-size: 12px;
}
.kl-story-footer span { display: flex; align-items: center; gap: 7px; }
.kl-firm .kl-story-footer { color: #92b0d5; gap: 14px; }

/* Firm story: illustrative "repeated work, compressed" panel. */
.kl-workflow { background: #eaf4ff0c; border: 1px solid #bad8fa35; border-radius: 22px; padding: clamp(17px, 2.2vw, 28px); box-shadow: 0 25px 70px #04112840; max-width: 630px; }
.kl-worktop { display: flex; justify-content: space-between; align-items: center; color: #adc6e9; text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 850; margin-bottom: 18px; }
.kl-worktop .kl-pill { border: 1px solid #6ddbbd55; color: #9bf6d4; padding: 7px 10px; border-radius: 99px; letter-spacing: 0; text-transform: none; font-size: 11px; }
.kl-metric { display: grid; grid-template-columns: 1fr 55px 1fr; gap: 10px; align-items: center; }
.kl-metricbox { min-width: 0; background: #ffffff0e; border: 1px solid #b5cff233; border-radius: 17px; padding: 18px; }
.kl-metricbox strong { display: block; color: #fff; font-size: clamp(38px, 4vw, 64px); line-height: 1; letter-spacing: -.06em; }
.kl-metricbox span { display: block; color: #a8c0e3; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 10px; }
.kl-metricbox p { color: #b9cae0; font-size: 12px; line-height: 1.4; margin: 9px 0 0; }
.kl-metricbox.focus { border-color: #7fc1ff87; background: #498be91a; }
.kl-metricbox.focus strong { color: #8dcaff; }
.kl-arrow { width: 44px; height: 44px; display: grid; place-items: center; background: #236cef; border-radius: 50%; font-size: 23px; box-shadow: 0 8px 24px #0a2a6180; }
.kl-workflow-foot { margin-top: 17px; border-top: 1px solid #a9cafa29; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; color: #b5d2f4; font-size: 12px; }
.kl-workflow-foot span { padding: 5px 9px; border-radius: 8px; background: #a7c9ff13; }

/* ---------- form panel (right) ---------- */
.kl-panel {
    display: flex;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding: 42px clamp(25px, 6vw, 90px);
    background: radial-gradient(circle at 95% 8%, #dfeeff, transparent 38%), #f8fbff;
}
.kl-firm .kl-panel { background: radial-gradient(circle at 98% 2%, #e0eeff, transparent 39%), #f8fbff; }

.kl-auth { width: 100%; max-width: 470px; }
.kl-mobilebrand { display: none; }

.kl-mini-tag { color: var(--kl-tag); font-size: 12px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.kl-firm .kl-mini-tag { color: #1a5aa4; font-size: 11px; letter-spacing: .13em; }

.kl-auth h2 { font-size: clamp(32px, 3vw, 45px); letter-spacing: -.052em; line-height: 1.1; margin: 10px 0 12px; font-weight: 850; color: var(--kl-ink); }
.kl-subtitle { color: var(--kl-muted); line-height: 1.6; margin: 0 0 30px; font-size: 15px; }

.kl-field { margin-bottom: 21px; }
.kl-labelrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.kl-labelrow label { display: block; font-size: 13px; font-weight: 780; margin: 0; color: var(--kl-ink); }
.kl-labelrow a { font-size: 13px; }

.kl-input-shell { position: relative; }
.kl-input-shell input {
    width: 100%;
    height: 54px;
    border: 1.5px solid var(--kl-line);
    background: #fff;
    border-radius: 13px;
    padding: 0 17px;
    color: #163258;
    outline: none;
    font-size: 15px;
    transition: .2s;
    box-shadow: none;
}
.kl-input-shell input.kl-has-toggle { padding-right: 72px; }
.kl-input-shell input:focus { border-color: #3a8afb; box-shadow: 0 0 0 4px #2672f219; }
.kl-input-shell input::placeholder { color: #9aacbe; }
.kl-toggle {
    position: absolute;
    right: 9px;
    top: 9px;
    height: 36px;
    padding: 0 11px;
    border: 0;
    background: #f1f5fb;
    color: #58718d;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 750;
}

.kl-options { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -2px 0 24px; }
.kl-remember { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #4d6181; cursor: pointer; margin: 0; font-weight: 500; }
.kl-remember input { accent-color: var(--kl-blue); width: 16px; height: 16px; margin: 0; }

.kl-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 55px;
    background: linear-gradient(100deg, #2755e8, #1587e6);
    color: #fff;
    border: 0;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 13px 30px #236be336;
    transition: transform .18s, box-shadow .18s;
}
.kl-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 32px #236be346; }
.kl-primary:disabled, .kl-primary.disabled { opacity: .78; cursor: wait; transform: none; }
.kl-firm .kl-primary { background: linear-gradient(100deg, #214ce0, #197ee0); border-radius: 12px; font-size: 14px; box-shadow: 0 14px 28px #2361d42e; }

.kl-divider { display: flex; align-items: center; gap: 14px; text-transform: uppercase; font-size: 11px; font-weight: 850; letter-spacing: .1em; color: #93a1b5; margin: 24px 0; }
.kl-divider::before, .kl-divider::after { content: ""; height: 1px; background: #dbe5f1; flex: 1; }

.kl-google {
    width: 100%;
    height: 51px;
    border: 1px solid #dbe6f3;
    background: #fff;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 750;
    color: #173252 !important;
}
.kl-google:hover { border-color: #a9bfe1; background: #fafdff; text-decoration: none !important; }
.kl-g {
    font-size: 22px;
    font-weight: 850;
    background: conic-gradient(#4285f4 0 95deg, #34a853 95deg 170deg, #fbbc05 170deg 240deg, #ea4335 240deg 305deg, #4285f4 305deg);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kl-signup { text-align: center; font-size: 13px; color: #677993; margin: 24px 0 0; }

.kl-trust { margin-top: 27px; padding: 17px 18px; background: #ebf8f6; border: 1px solid #cbece6; border-radius: 14px; display: flex; gap: 12px; align-items: flex-start; }
/* Global assets/css/style.css sets `svg { width: 100% !important }` (and grey `p` text): without these
   overrides the shield stretched to the card width and pushed the text outside the card. */
.kl-trust svg, .kl-trust .kl-trust-icon { flex: 0 0 18px; width: 18px !important; height: 18px; min-width: 18px; margin-top: 2px; }
.kl-trust .kl-trust-icon { display: inline-grid; place-items: center; font-size: 15px; line-height: 1; color: #0d8f86; }
.kl-trust > div { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kl-trust strong { display: block; color: #0b676c; font-size: 13px; }
.kl-trust p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #527a81; }
.kl-firm .kl-trust { background: #edf6f5; border-color: #d5ebe6; border-radius: 12px; padding: 13px 15px; margin-top: 18px; color: #2b6767; font-size: 12px; line-height: 1.45; }
.kl-firm .kl-trust strong { display: inline; color: #16635e; font-size: 12px; }

.kl-legal { font-size: 11px; color: #91a0b5; text-align: center; margin: 24px 0 0; line-height: 1.7; }
.kl-legal a { font-weight: 600; color: #6f84a3; }

/* Firm: Request access card + dialog. */
.kl-rule { height: 1px; background: #dfe8f3; margin: 23px 0; }
.kl-request { padding: 18px 20px; border: 1px solid #d3e1f4; border-radius: 15px; background: #fff; }
.kl-request strong { display: block; font-size: 15px; color: #183554; margin-bottom: 5px; }
.kl-request p { font-size: 13px; color: #647a95; line-height: 1.5; margin: 0 0 13px; }
.kl-outline { width: 100%; height: 43px; border: 1px solid #aac8ef; background: #f5f9ff; border-radius: 10px; color: #1a55ba; font-weight: 780; font-size: 13px; }
.kl-outline:hover { background: #eaf3ff; }

.kl-overlay *, .kl-overlay *::before, .kl-overlay *::after { box-sizing: border-box; }
.kl-overlay button, .kl-overlay input { font: inherit; cursor: auto; }
.kl-overlay button { cursor: pointer; }
.kl-overlay { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
.kl-overlay { position: fixed; inset: 0; z-index: 2000; background: #07172ac9; display: flex; justify-content: center; align-items: center; padding: 20px; }
.kl-overlay[hidden] { display: none; }
.kl-dialog { max-height: min(95dvh, 800px); overflow: auto; width: min(100%, 530px); border-radius: 20px; background: #fff; box-shadow: 0 20px 65px #0005; padding: 25px; color: var(--kl-ink); }
.kl-dialog-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.kl-dialog h3 { font-size: 26px; letter-spacing: -.04em; margin: 2px 0 6px; font-weight: 850; }
.kl-dialog p { color: #667b94; font-size: 13px; line-height: 1.5; margin: 0 0 17px; }
.kl-close { border: 0; border-radius: 8px; background: #eff4fa; width: 36px; height: 36px; font-size: 22px; line-height: 1; flex: none; }
.kl-request-body label { font-size: 12px; font-weight: 800; display: block; margin: 0 0 5px; color: var(--kl-ink); }
.kl-request-body input { display: block; width: 100%; border: 1px solid #d8e4f2; border-radius: 10px; padding: 11px 12px; outline: none; margin-bottom: 4px; font-size: 14px; }
.kl-request-body input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px #2876ed19; }
.kl-request-body input[aria-invalid="true"] { border-color: #ef4444; }
.kl-request-body .kl-field-error { min-height: 16px; margin: 0 0 9px; font-size: 12px; font-weight: 700; color: #dc2626; }
.kl-request-body .kl-primary { margin-top: 7px; height: 50px; }
.kl-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.kl-fine { font-size: 11px; color: #8696aa; margin-top: 11px; line-height: 1.5; }
.kl-alert { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff3de; border: 1px solid #efd7a4; font-size: 12px; color: #765117; line-height: 1.5; }
.kl-alert[hidden], .kl-request-step[hidden] { display: none; }
.kl-success-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: #e7f7f1; color: #12795f; font-size: 22px; font-weight: 800; margin-bottom: 10px; }

/* jQuery Validate messages (existing login validation). */
.kl-login label.error { display: block; margin: 7px 0 0; color: #ef4444 !important; font-size: 12px; font-weight: 800; }
.kl-input-shell:has(input.error) input { border-color: #ef4444; }
.kl-login .spinner-border { width: 1rem; height: 1rem; border-width: .15em; }

.kl-login button:focus-visible, .kl-login a:focus-visible { outline: 3px solid #53a7fa; outline-offset: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
    .kl-sme { grid-template-columns: 45% 55%; }
    .kl-sme .kl-story { padding: 28px; }
    .kl-float.one { right: -7%; }
    .kl-float.two { left: -9%; }
    .kl-sme .kl-story h1 { font-size: 42px; }
    .kl-sme .kl-panel { padding: 36px; }
}

/* Desktop viewport fit: whole page visible at 1920x1080 and 1366x768; the form panel scrolls on its own. */
@media (min-width: 761px) {
    .kl-login { height: 100vh; height: 100dvh; min-height: 650px; overflow: hidden; }
    .kl-story { min-height: 0; height: 100%; padding-top: clamp(20px, 3.2vh, 34px); padding-bottom: clamp(18px, 2.8vh, 30px); }
    .kl-sme .kl-story-main { width: 100%; margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 0; }
    .kl-mascot-wrap { align-self: center; width: min(340px, 38vh, 58%); margin: -5px auto -8px; flex-shrink: 1; }
    .kl-sme .kl-story h1 { font-size: clamp(34px, 3.5vw, 58px); line-height: 1.06; margin-bottom: 12px; }
    .kl-sme .kl-summary { font-size: clamp(14px, 1.02vw, 17px); line-height: 1.48; }
    .kl-float { padding: 9px 12px; font-size: 11px; }
    .kl-float strong { font-size: 14px; }
    .kl-panel { height: 100%; min-height: 0; overflow-y: auto; padding: 20px clamp(25px, 5vw, 84px); }
    .kl-auth { margin: auto 0; }
    .kl-subtitle { margin-bottom: 20px; line-height: 1.5; }
    .kl-auth h2 { font-size: clamp(32px, 2.6vw, 43px); margin: 7px 0 9px; }
    .kl-input-shell input { height: 48px; }
    .kl-toggle { top: 6px; }
    .kl-field { margin-bottom: 15px; }
    .kl-labelrow { margin-bottom: 7px; }
    .kl-options { margin: 0 0 17px; }
    .kl-primary { height: 49px; }
    .kl-divider { margin: 17px 0; }
    .kl-google { height: 45px; }
    .kl-signup { margin-top: 17px; }
    .kl-trust { margin-top: 18px; padding: 12px 15px; }
    .kl-legal { margin-top: 12px; line-height: 1.45; font-size: 10px; }
}

@media (min-width: 761px) and (max-height: 780px) {
    .kl-login { min-height: 580px; }
    .kl-brand { font-size: 21px; }
    .kl-mark { width: 37px; height: 37px; font-size: 24px; }
    .kl-story { padding-top: 18px; padding-bottom: 15px; }
    .kl-mascot-wrap { width: min(245px, 30vh, 47%); margin: -8px auto -5px; }
    .kl-story h1, .kl-firm .kl-story h1 { font-size: clamp(32px, 3vw, 48px); margin-bottom: 9px; }
    .kl-firm .kl-story h1 { margin-top: 10px; }
    .kl-summary { font-size: 14px; line-height: 1.4; }
    .kl-firm .kl-summary { margin-bottom: 12px; }
    .kl-story-footer { font-size: 10px; }
    .kl-workflow { padding: 15px; }
    .kl-worktop { margin-bottom: 9px; }
    .kl-metricbox { padding: 11px; }
    .kl-metricbox strong { font-size: 40px; }
    .kl-metricbox p { margin-top: 5px; }
    .kl-workflow-foot { margin-top: 9px; padding-top: 8px; }
    .kl-subtitle { margin-bottom: 13px; font-size: 13px; }
    .kl-auth h2 { font-size: 34px; margin: 5px 0 7px; }
    .kl-mini-tag { font-size: 10px; }
    .kl-field { margin-bottom: 11px; }
    .kl-input-shell input { height: 43px; }
    .kl-toggle { top: 4px; }
    .kl-options { margin-bottom: 11px; }
    .kl-primary { height: 44px; }
    .kl-divider { margin: 12px 0; }
    .kl-google { height: 41px; }
    .kl-signup { margin-top: 12px; }
    .kl-rule { margin: 14px 0; }
    .kl-request { padding: 12px; }
    .kl-request p { margin-bottom: 8px; }
    .kl-trust { margin-top: 12px; padding: 9px 12px; }
    .kl-trust p { font-size: 11px; margin-top: 2px; }
    .kl-legal { margin-top: 8px; font-size: 9px; }
}

@media (min-width: 761px) and (max-height: 650px) {
    .kl-panel { align-items: flex-start; }
}

@media (max-width: 760px) {
    .kl-login { display: block; }
    .kl-story { min-height: 0; padding: 20px 24px 27px; }
    .kl-story .kl-brand { display: none; }
    .kl-story-main { margin: 0; }
    .kl-eyebrow { font-size: 10px; }
    .kl-story h1, .kl-firm .kl-story h1 { font-size: 30px; margin: 13px 0 10px; }
    .kl-summary, .kl-firm .kl-summary { font-size: 13px; margin: 0; }
    .kl-mascot-wrap, .kl-story-footer, .kl-workflow { display: none; }
    .kl-panel { min-height: 0; padding: 25px 20px 36px; }
    .kl-mobilebrand { display: flex; margin-bottom: 24px; font-weight: 850; font-size: 21px; align-items: center; gap: 10px; letter-spacing: -.04em; color: var(--kl-ink) !important; }
    .kl-mobilebrand .kl-mark { width: 34px; height: 34px; font-size: 23px; border-radius: 10px; }
    .kl-auth h2 { font-size: 34px; }
    .kl-subtitle { margin-bottom: 25px; }
}

@media (max-width: 420px) {
    .kl-options { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .kl-login * { transition: none !important; }
}

/* =====================================================================
   Shared account pages on the same design system (2026-10-08):
   Views/Home/Register.cshtml, ForgetPassword.cshtml, NoPermission.cshtml (.kl-login .kl-sme / .kl-firm)
   and ProfileSetup.cshtml (.kl-login .kl-sme .kl-onboard, wizard styles in profile-setup.css).
   Everything stays under .kl-* classes; nothing here targets bare elements globally.
   ===================================================================== */

/* Terms / consent checkbox (Register). */
.kl-terms { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 20px; font-size: 13px; line-height: 1.45; color: #4d6181; font-weight: 500; cursor: pointer; }
.kl-terms input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--kl-blue); }
.kl-terms a { font-weight: 700; }
.kl-login .kl-primary:disabled:not(.disabled) { cursor: not-allowed; opacity: .55; box-shadow: none; }

/* Secondary full-width action (NoPermission). */
.kl-secondary {
    display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 49px;
    border: 1px solid #aac8ef; background: #f5f9ff; color: #1a55ba !important; border-radius: 13px;
    font-size: 14px; font-weight: 780;
}
.kl-secondary:hover { background: #eaf3ff; text-decoration: none !important; }
.kl-actions { display: grid; gap: 10px; margin-top: 22px; }

/* Neutral information card (NoPermission, Forgot password). */
.kl-notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: #f3f7fd; border: 1px solid #dbe6f3; }
.kl-notice > div { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.kl-notice strong { display: block; font-size: 14px; color: #183554; margin-bottom: 4px; }
.kl-notice p { margin: 0; font-size: 13px; color: #5d7290; }
.kl-notice ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: #5d7290; line-height: 1.55; }
.kl-notice li { color: inherit; } /* global style.css greys every li */
.kl-notice-icon { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e3eefc; color: #1f5fcf; font-size: 16px; font-weight: 800; }
.kl-notice-icon svg { width: 18px !important; height: 18px; }

/* Story panel: short reassurance list (Register / ForgetPassword / ProfileSetup). */
.kl-points { position: relative; z-index: 1; list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; max-width: 520px; }
.kl-points li { display: flex; gap: 10px; align-items: flex-start; color: #c6d9f1; font-size: 14px; line-height: 1.45; }
.kl-points li::before { content: "✓"; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #47ddb626; color: #8af0d0; font-size: 12px; font-weight: 800; }

/* ---------- ProfileSetup: wide wizard variant ---------- */
.kl-onboard { grid-template-columns: minmax(300px, .58fr) minmax(0, 1.42fr); }
.kl-onboard .kl-story { padding-left: clamp(26px, 3.4vw, 64px); padding-right: clamp(22px, 3vw, 54px); }
.kl-onboard .kl-story h1 { font-size: clamp(30px, 2.6vw, 46px); }
.kl-onboard .kl-summary { font-size: clamp(14px, .95vw, 16px); }
.kl-onboard .kl-mascot-wrap { width: min(250px, 30vh, 70%); margin: 4px auto 10px; }
/* No bottom padding on the scrolling panel: a sticky element stops at the padding edge, so the wizard's action
   bar would float above the bottom with content showing underneath. The spacing lives on the wizard instead. */
.kl-onboard .kl-panel { align-items: flex-start; justify-content: center; padding: 22px clamp(16px, 2.6vw, 44px) 0; }
.kl-onboard .kl-wizard { width: 100%; max-width: 1000px; margin: auto 0; padding-bottom: 22px; }

@media (min-width: 761px) and (max-width: 1100px) {
    .kl-onboard { grid-template-columns: minmax(250px, .5fr) minmax(0, 1.5fr); }
    .kl-onboard .kl-points, .kl-onboard .kl-float { display: none; }
}

@media (max-width: 760px) {
    .kl-onboard .kl-story { padding: 18px 20px 20px; }
    .kl-onboard .kl-points { display: none; }
    .kl-onboard .kl-panel { padding: 14px 12px 28px; }
}

/* The mascot wrapper is positioned and carries a dark drop-shadow, so it painted over the headline that follows
   it (a grey band across the words below the mascot). Keep the story text above it. */
.kl-story h1, .kl-story .kl-summary, .kl-story .kl-points { position: relative; z-index: 2; }