/* ==========================================================================
   Split login screen — brand panel + sign-in form
   Load AFTER bootstrap and font-awesome so it wins on cascade order.

   Theme is driven by data-login-theme on <html>:
     (default)                     Checkout Champ   #F36319
     data-login-theme="konnektive" Konnektive       #CF4843
   ========================================================================== */

:root {
    /* Pattern A — Checkout Champ */
    --kl-accent:        #F36319;
    --kl-accent-hover:  #D9500C;
    --kl-accent-soft:   rgba(243, 99, 25, 0.14);
    --kl-glow:          rgba(243, 99, 25, 0.22);
    --kl-panel-top:     #1C1512;
    --kl-panel-bottom:  #33190C;

    /* Shared */
    --kl-surface:       #FFFFFF;
    --kl-text:          #23282D;
    --kl-text-muted:    #6B7280;
    --kl-placeholder:   #9AA1A9;
    --kl-border:        #DDE1E6;
    --kl-danger-bg:     #FDECEA;
    --kl-danger-text:   #A32B26;
    --kl-danger-line:   rgba(163, 43, 38, 0.18);
    --kl-on-dark:       rgba(255, 255, 255, 0.66);
    --kl-on-dark-dim:   rgba(255, 255, 255, 0.58);
    --kl-radius:        8px;
    --kl-field-h:       48px;

    /* Tinted canvas behind the sign-in card (item 2). Neutral grey rather
       than a brand tint, so it reads the same on both themes. */
    --kl-canvas:        #F2F4F7;
    --kl-card-radius:   16px;
    --kl-card-shadow:   0 1px 2px rgba(16, 24, 40, 0.06),
                        0 12px 32px -16px rgba(16, 24, 40, 0.22);
}

html[data-login-theme="konnektive"] {
    /* Pattern B — Konnektive */
    --kl-accent:        #CF4843;
    --kl-accent-hover:  #B53A35;
    --kl-accent-soft:   rgba(207, 72, 67, 0.14);
    --kl-glow:          rgba(207, 72, 67, 0.22);
    --kl-panel-top:     #1E1414;
    --kl-panel-bottom:  #2E1315;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

html.kl-login,
html.kl-login body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html.kl-login {
    /* Stops browser-forced dark mode from repainting the form controls */
    color-scheme: light;
}

html.kl-login body {
    /* Matches the sign-in panel so overscroll does not flash white. */
    background: var(--kl-canvas);
    color: var(--kl-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.kl-shell {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh; /* avoids the mobile browser-chrome gap */
}

/* --------------------------------------------------------------------------
   Left: brand panel (ad carousel, or static fallback when no ads exist)

   Height handling: the panel is capped to the viewport and scrolls as a
   single container — both the ad carousel and the static pitch overflow
   into it.
   -------------------------------------------------------------------------- */

.kl-ads {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;

    max-height: 100vh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(160deg, var(--kl-panel-top) 0%, var(--kl-panel-bottom) 100%);
    color: #FFFFFF;

    /* The platform default is near-invisible on the dark gradient. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.kl-ads::-webkit-scrollbar {
    width: 10px;
}

.kl-ads::-webkit-scrollbar-track {
    background: transparent;
}

.kl-ads::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 6px;
}

.kl-ads::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
    background-clip: padding-box;
}

/* Ambient accent light, keyed to the active brand. Painted before the
   carousel and pitch, both of which are positioned and sit above it. */
.kl-ads::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, var(--kl-glow) 0%, transparent 65%);
    pointer-events: none;
}

/* BS4 sets overflow:hidden on .carousel-inner, which clips a tall ad and
   stops .kl-ads ever seeing the overflow — so the scroll has to live here,
   with a definite max-height to scroll against. overflow-x stays hidden for
   the slide transition; that forces overflow-y to compute as auto anyway. */
.kl-ads .carousel {
    height: auto;
}

.kl-ads .carousel-inner {
    height: auto;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.kl-ads .carousel-inner::-webkit-scrollbar {
    width: 10px;
}

.kl-ads .carousel-inner::-webkit-scrollbar-track {
    background: transparent;
}

.kl-ads .carousel-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 6px;
}

.kl-ads .carousel-inner::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.38);
    background-clip: padding-box;
}

/* Slides fill the scroll container, then grow with taller ads. */
.kl-ads .carousel-item {
    min-height: 100vh;
    min-height: 100dvh;
    height: auto;
}

/* BS4 toggles .carousel-item between display:none and block. Force flex on the
   visible slides so ads of differing heights stay aligned and don't jump.
   Top-aligned rather than centred: a slide taller than the panel would
   otherwise lose its head above the scroll origin. */
.kl-ads .carousel-item.active,
.kl-ads .carousel-item-next,
.kl-ads .carousel-item-prev {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* The ad's own page colour is left to render, so each design controls its
   backdrop from Unlayer (Body -> Background Color). Set it to match the
   content row and the ad reads as one panel, edge to edge. align-self
   stretches it to the full slide height so the colour doesn't stop short. */
.kl-ad-body {
    width: 100%;
    max-width: 100%;
    padding: 0;  /* any padding here shows as a gradient strip round the ad */
    margin: 0 auto;
    align-self: stretch;
}

/* Unlayer paints the page colour on its outermost wrapper (the nl-container
   table, or a div in newer exports). Stretch it to the slide height so the
   colour runs to the bottom of the panel. On a table, height acts as a
   minimum, so tall ads still grow. */
.kl-ad-body > table {
    height: 100%;
}

.kl-ad-body > div {
    min-height: 100%;
}

/* Unlayer exports are locked to a fixed canvas width — table-based exports
   cap it on <table>, newer div-based ones on the row/column wrappers.
   Kept in place for templates that do respond to them. */
.kl-ad-body table {
    width: 100% !important;
    max-width: 100% !important;
}

.kl-ad-body .u-row-container,
.kl-ad-body .u-row,
.kl-ad-body .u-col,
.kl-ad-body [class*="u_column"],
.kl-ad-body [class*="u_content"] {
    width: 100% !important;
    max-width: 100% !important;
}

.kl-ad-body img {
    max-width: 100% !important;
    height: auto !important;
}

.kl-ad-body iframe,
.kl-ad-body video,
.kl-ad-body embed,
.kl-ad-body object {
    max-width: 100% !important;
}

.kl-ad-body td {
    word-break: break-word;
}

.kl-ad-body a {
    text-decoration: none;
}

/* Carousel indicators — these are the only navigation left after the arrows
   were removed, so they must keep BS4's absolute positioning. Taking them out
   of flow with sticky drops them to the top of the panel as a dead strip. */
.kl-ads .carousel-indicators {
    bottom: 22px;
    z-index: 3;
    margin: 0;
    left: 0;
    right: 0;
}

/* BS 4.6 dims inactive indicators to opacity .5 and uses transparent
   top/bottom borders as the click target. Opacity is reset so the colour
   below is what renders; the borders are kept for a usable hit area. */
.kl-ads .carousel-indicators li {
    width: 22px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
    background-clip: padding-box;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin: 0 4px;
    opacity: 1;
    cursor: pointer;
}

/* background-color, not the shorthand — the shorthand resets background-clip
   to border-box and floods the transparent hit-area borders with colour. */
.kl-ads .carousel-indicators li.active {
    background-color: var(--kl-accent);
}

/* The carousel is given tabindex="0" so Bootstrap's arrow-key handler can
   fire; this shows keyboard users where focus has landed. */
.kl-ads .carousel:focus {
    outline: none;
}

.kl-ads .carousel:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: -4px;
}

/* Prev/next controls are not rendered — slides advance on the timer, the
   indicators, keyboard arrows and swipe. */

/* --------------------------------------------------------------------------
   Static fallback — shown when no advertisements are configured
   -------------------------------------------------------------------------- */

.kl-pitch {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: 56px 48px;
    margin: 0 auto;
}

.kl-pitch h2 {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: #FFFFFF;
    margin: 0 0 10px;
}

.kl-pitch > p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--kl-on-dark);
    margin: 0 0 36px;
}

.kl-pitch ul {
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
}

.kl-pitch li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
}

.kl-pitch li:last-child {
    margin-bottom: 0;
}

.kl-pitch li .fa {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(145deg, var(--kl-accent) 0%, var(--kl-accent-hover) 100%);
    box-shadow: 0 4px 14px -4px var(--kl-accent);
    color: #FFFFFF;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kl-pitch li strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 3px;
}

.kl-pitch li span {
    font-size: 13px;
    line-height: 1.55;
    color: var(--kl-on-dark);
}

/* KPI cards */
.kl-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 36px;
}

.kl-kpi {
    position: relative;
    padding: 16px 14px 15px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

/* Accent wash bleeding up from the base of each card */
.kl-kpi::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(to top, var(--kl-accent-soft), transparent);
    pointer-events: none;
}

.kl-kpi > * {
    position: relative;
}

.kl-kpi .fa {
    display: block;
    font-size: 13px;
    color: var(--kl-accent);
    margin-bottom: 12px;
}

.kl-kpi b {
    display: block;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.kl-kpi span {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: var(--kl-on-dark-dim);
    overflow-wrap: break-word;
}

/* --- Entrance sequence. One orchestrated moment on load, then it settles. --- */

@keyframes klRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.kl-js .kl-pitch h2,
.kl-js .kl-pitch > p,
.kl-js .kl-pitch li,
.kl-js .kl-kpi {
    opacity: 0;
    animation: klRise 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.kl-js .kl-pitch h2  { animation-delay: 0.05s; }
.kl-js .kl-pitch > p { animation-delay: 0.13s; }

.kl-js .kl-pitch li:nth-child(1) { animation-delay: 0.24s; }
.kl-js .kl-pitch li:nth-child(2) { animation-delay: 0.32s; }
.kl-js .kl-pitch li:nth-child(3) { animation-delay: 0.40s; }
.kl-js .kl-pitch li:nth-child(4) { animation-delay: 0.48s; }

.kl-js .kl-kpi:nth-child(1) { animation-delay: 0.62s; }
.kl-js .kl-kpi:nth-child(2) { animation-delay: 0.70s; }
.kl-js .kl-kpi:nth-child(3) { animation-delay: 0.78s; }

/* --------------------------------------------------------------------------
   Right: sign-in panel
   -------------------------------------------------------------------------- */

.kl-panel {
    flex: 1 1 50%;
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    overflow-y: auto;
    background: var(--kl-canvas);
}

/* The form is a white card on the tinted canvas (item 5). auto margins are
   kept alongside align-items:center — when the card is taller than the panel
   (2FA step, stacked alerts) the auto margins win and the top stays
   scrollable, which centring alone would clip. */
.kl-form {
    width: 100%;
    max-width: 452px;      /* 372px of content inside 40px side padding */
    margin: auto;
    padding: 44px 40px 40px;
    background: var(--kl-surface);
    border-radius: var(--kl-card-radius);
    box-shadow: var(--kl-card-shadow);
}

/* Logo matches the input width rather than floating small above it (item 4).
   max-width caps it at the content column; height follows the aspect ratio. */
.kl-brand {
    text-align: center;
    margin-bottom: 30px;
}

.kl-brand img {
    width: 100%;
    max-width: 300px;
    max-height: 64px;
    height: auto;
    object-fit: contain;
}

.kl-form h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.3px;
    text-align: center;
    margin: 0 0 8px;
}

.kl-lede {
    font-size: 14px;
    line-height: 1.5;
    color: var(--kl-text-muted);
    text-align: center;
    margin: 0 0 28px;
}

.kl-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

/* Fields ------------------------------------------------------------------ */

.kl-field {
    position: relative;
    margin-bottom: 14px;
}

.kl-field .form-control {
    height: var(--kl-field-h);
    width: 100%;
    padding: 8px 14px 8px 42px;
    font-family: inherit;
    font-size: 15px;
    color: var(--kl-text);
    background: #FFFFFF;
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-radius);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.kl-field .form-control:focus {
    border-color: var(--kl-accent);
    box-shadow: 0 0 0 3px var(--kl-accent-soft);
    outline: none;
}

.kl-field .form-control::placeholder {
    color: var(--kl-placeholder);
}

/* Chrome paints autofilled fields with its own background, which overrides
   any background declaration. An inset shadow is the only reliable override. */
.kl-field .form-control:-webkit-autofill,
.kl-field .form-control:-webkit-autofill:hover,
.kl-field .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--kl-text);
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
    box-shadow: 0 0 0 1000px #FFFFFF inset;
    transition: background-color 9999s ease-in-out 0s;
}

.kl-field .form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset, 0 0 0 3px var(--kl-accent-soft);
    box-shadow: 0 0 0 1000px #FFFFFF inset, 0 0 0 3px var(--kl-accent-soft);
}

/* Our own leading icon. Scoped to .kl-icon so it never captures markup that
   the framework injects into the field (e.g. the password reveal toggle). */
.kl-field > .kl-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kl-placeholder);
    font-size: 15px;
    pointer-events: none;
}

/* Anything else dropped into the field — web::getPasswordMask() emits its own
   toggle — is anchored to the trailing edge instead of stacking on the icon. */
.kl-field > *:not(input):not(.kl-icon) {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 1;
    color: var(--kl-placeholder);
    cursor: pointer;
}

.kl-field > *:not(input):not(.kl-icon):hover {
    color: var(--kl-accent);
}

.kl-field .form-control.password {
    padding-right: 40px;
}

/* Meta row ---------------------------------------------------------------- */

.kl-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    margin: 6px 0 20px;
}

.kl-meta .custom-control-label {
    font-size: 13px;
    color: var(--kl-text-muted);
    padding-top: 2px;
    cursor: pointer;
}

.kl-meta .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--kl-accent);
    border-color: var(--kl-accent);
}

.kl-meta .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px var(--kl-accent-soft);
}

/* BS 4.6 paints its own blue on two states the rules above do not cover:
   the border while focused-but-unchecked, and the fill while pressed. */
.kl-meta .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--kl-accent);
}

.kl-meta .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--kl-accent-soft);
    border-color: var(--kl-accent);
}

.kl-meta a.forgot {
    font-size: 13px;
    color: var(--kl-accent);
    text-decoration: none;
    white-space: nowrap;
}

.kl-meta a.forgot:hover,
.kl-meta a.forgot:focus {
    color: var(--kl-accent-hover);
    text-decoration: underline;
}

.kl-meta a.forgot:focus-visible,
.kl-terms a:focus-visible {
    outline: 2px solid var(--kl-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Buttons ----------------------------------------------------------------- */

.kl-btn {
    display: block;
    width: 100%;
    height: var(--kl-field-h);
    border: 1px solid var(--kl-accent);
    border-radius: var(--kl-radius);
    background: var(--kl-accent);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.kl-btn:hover,
.kl-btn:focus {
    background: var(--kl-accent-hover);
    border-color: var(--kl-accent-hover);
    color: #FFFFFF;
    outline: none;
}

.kl-btn:focus-visible {
    box-shadow: 0 0 0 3px var(--kl-accent-soft);
}

/* Set by the submit guard while the login request is in flight. */
.kl-btn:disabled,
.kl-btn.is-busy {
    opacity: 0.65;
    cursor: default;
    pointer-events: none;
}

.kl-btn-secondary {
    background: #FFFFFF;
    color: var(--kl-accent);
}

.kl-btn-secondary:hover,
.kl-btn-secondary:focus {
    background: var(--kl-accent);
    color: #FFFFFF;
}

.kl-btn-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.kl-btn-row .kl-btn {
    flex: 1 1 0;
    min-width: 0; /* lets the label wrap instead of forcing the row wider */
}

/* Messaging --------------------------------------------------------------- */

.kl-alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--kl-danger-text);
    background: var(--kl-danger-bg);
    border: 1px solid var(--kl-danger-line);
    border-radius: var(--kl-radius);
}

.kl-alert .fa {
    flex-shrink: 0; /* long messages must not squash the icon */
    margin-top: 2px;
}

.kl-notice {
    text-align: center;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--kl-border);
    border-radius: var(--kl-radius);
}

.kl-notice h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--kl-accent);
    margin: 0 0 6px;
}

.kl-notice p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--kl-text-muted);
    margin: 0 0 6px;
}

.kl-notice p:last-child {
    margin-bottom: 0;
}

/* Sits above the submit button (item 6), so the margin runs below it. */
.kl-terms {
    font-size: 12px;
    line-height: 1.5;
    color: var(--kl-text-muted);
    text-align: center;
    margin: 0 0 16px;
}

.kl-terms a {
    color: var(--kl-text-muted);
    text-decoration: underline;
}

/* Supplied by clipone's main.min.css, which this page no longer loads */
.no-display {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Solo card pages — forgot password, confirmation, anything with no brand
   panel. Reuses the field, button and alert styles defined above.
   -------------------------------------------------------------------------- */
.kl-shell.kl-solo {
    position: relative;
    padding: 40px 20px;
    overflow-x: hidden;  /* the ::before glow is 120% wide and would scroll */
    overflow-y: auto;
    background: linear-gradient(160deg, var(--kl-panel-top) 0%, var(--kl-panel-bottom) 100%);
}

/* Same ambient accent light as the brand panel, so the two pages read as
   one family rather than two designs. */
.kl-shell.kl-solo::before {
    content: '';
    position: absolute;
    top: -15%;
    left: 50%;
    width: 720px;
    height: 720px;
    max-width: 120%;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--kl-glow) 0%, transparent 65%);
    pointer-events: none;
}

/* margin:auto rather than align-items:center — a card taller than the
   viewport stays scrollable instead of being clipped at the top. */
.kl-card {
    position: relative;
    width: 100%;
    max-width: 452px;
    margin: auto;
    padding: 44px 40px 40px;
    background: var(--kl-surface);
    border-radius: var(--kl-card-radius);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}

.kl-card h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.3px;
    text-align: center;
    margin: 0 0 8px;
}

.kl-card fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

/* "or" divider between the two lookup fields */
.kl-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--kl-placeholder);
}

.kl-or::before,
.kl-or::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--kl-border);
}

/* Back link under the primary action */
.kl-back {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--kl-text-muted);
    text-decoration: none;
}

.kl-back:hover,
.kl-back:focus {
    color: var(--kl-accent);
    text-decoration: none;
}

.kl-back:focus-visible {
    outline: 2px solid var(--kl-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Confirmation state shown after a reset request */
.kl-result {
    text-align: center;
    margin-bottom: 22px;
}

.kl-result .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 14px;
    font-size: 21px;
    color: var(--kl-accent);
    background: var(--kl-accent-soft);
}

.kl-result h3 {
    margin-bottom: 8px;
}

.kl-result .kl-lede {
    margin-bottom: 0;
}

/* Danger variant of the result state — expired or missing token */
.kl-result.is-danger .fa {
    color: var(--kl-danger-text);
    background: var(--kl-danger-bg);
}

/* Requirement hint under a password field */
.kl-hint {
    margin: -4px 0 14px;
    padding-left: 2px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--kl-text-muted);
}

/* Button styled as a link target rather than a submit control */
.kl-btn-link {
    line-height: calc(var(--kl-field-h) - 2px);
    text-align: center;
    text-decoration: none;
}

.kl-btn-link:hover,
.kl-btn-link:focus {
    text-decoration: none;
}

/* Card entrance, matching the brand panel's timing */
.kl-js .kl-card {
    opacity: 0;
    animation: klRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

/* --------------------------------------------------------------------------
   Responsive — the brand panel is decoration; drop it before it squeezes
   the form rather than shrinking both.
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
    .kl-pitch {
        padding: 48px 40px;
    }

    .kl-pitch h2 {
        font-size: 25px;
    }
}

@media (max-width: 991.98px) {
    .kl-ads {
        display: none;
    }

    /* ----------------------------------------------------------------------
       Mobile login takes the solo-page design: brand gradient behind a
       floating white card, so login, forgot password and confirmation read
       as one flow. CSS only — no markup changes.
       ---------------------------------------------------------------------- */
    .kl-shell:not(.kl-solo) {
        position: relative;
        padding: 40px 20px;
        overflow-x: hidden;  /* as .kl-solo above — clip the oversized glow */
        background: linear-gradient(160deg, var(--kl-panel-top) 0%, var(--kl-panel-bottom) 100%);
    }

    /* Same ambient accent light as .kl-solo. */
    .kl-shell:not(.kl-solo)::before {
        content: '';
        position: absolute;
        top: -15%;
        left: 50%;
        width: 720px;
        height: 720px;
        max-width: 120%;
        transform: translateX(-50%);
        background: radial-gradient(circle, var(--kl-glow) 0%, transparent 65%);
        pointer-events: none;
    }

    /* The panel is just a transparent wrapper here — the card styling
       already lives on .kl-form, so only the shadow is deepened to read
       against the gradient instead of the light canvas. */
    .kl-panel {
        position: relative;
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;   /* release the 50% desktop cap */
        margin: auto;
        padding: 0;
        background: none;
        overflow: visible;
    }

    .kl-form {
        max-width: 420px;
        box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
    }
}

@media (max-width: 575.98px) {
    .kl-shell:not(.kl-solo),
    .kl-shell.kl-solo {
        padding: 24px 16px;
    }

    .kl-form,
    .kl-card {
        padding: 32px 24px 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kl-ads .carousel-item,
    .kl-btn {
        transition: none !important;
    }

    .kl-js .kl-pitch h2,
    .kl-js .kl-pitch > p,
    .kl-js .kl-pitch li,
    .kl-js .kl-kpi,
    .kl-js .kl-card {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}