/* Design tokens: component variants consume only the central palette and geometry so brand changes remain localized. */
.icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; stroke-width: 1.8; }

/* Layout: reusable buttons and brand marks align consistently across public, authentication, and legal routes. */
.kk-brand { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .65rem; color: var(--kk-aubergine); font-size: 1rem; font-weight: 800; letter-spacing: -.025em; text-decoration: none; }
.kk-brand:hover { color: var(--kk-aubergine); text-decoration: none; }.kk-brand__mark { position: relative; display: grid; width: 2.45rem; height: 2.2rem; overflow: hidden; place-items: center; border-radius: .42rem; background: var(--kk-aubergine); color: white; }.kk-brand__mark::after { position: absolute; right: -.35rem; bottom: -.65rem; width: 1.4rem; height: 1.4rem; transform: rotate(35deg); background: var(--kk-coral); content: ""; }.kk-brand__mark span { position: relative; z-index: 1; }.kk-brand__name strong { color: var(--kk-primary); }.kk-brand--inverse { color: white; }.kk-brand--inverse:hover { color: white; }.kk-brand--inverse .kk-brand__mark { background: white; color: var(--kk-aubergine); }.kk-brand--inverse .kk-brand__name strong { color: var(--kk-gold); }
.kk-btn-primary,.kk-btn-secondary,.kk-btn-light { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .55rem; border-radius: var(--kk-radius-sm); padding-inline: 1.15rem; font-weight: 750; transition: transform .15s ease,box-shadow .15s ease,background-color .15s ease; }
.kk-btn-primary { border-color: var(--kk-primary); background: var(--kk-primary); color: white; box-shadow: 4px 4px 0 var(--kk-aubergine); }.kk-btn-primary:hover { transform: translateY(-1px); border-color: var(--kk-primary-dark); background: var(--kk-primary-dark); color: white; box-shadow: 2px 2px 0 var(--kk-aubergine); }.kk-btn-secondary { border-color: var(--kk-border-strong); background: transparent; color: var(--kk-aubergine); }.kk-btn-secondary:hover { border-color: var(--kk-aubergine); background: white; color: var(--kk-aubergine); }.kk-btn-light { border-color: white; background: white; color: var(--kk-aubergine); box-shadow: 4px 4px 0 var(--kk-coral); }.kk-btn-light:hover { transform: translateY(-1px); background: var(--kk-surface-soft); color: var(--kk-aubergine); }.kk-btn-primary:disabled { border-color: var(--kk-primary); background: var(--kk-primary); opacity: .62; box-shadow: none; transform: none; }

/* Feature cards: alternate purposeful accent borders while preserving one semantic card structure. */
.kk-feature-card { position: relative; display: flex; min-height: 13rem; gap: 1rem; padding: 1.5rem; overflow: hidden; border: 1px solid var(--kk-border); border-top: 4px solid var(--kk-primary); border-radius: var(--kk-radius-md); background: var(--kk-surface); box-shadow: var(--kk-shadow-sm); }.kk-feature-card::after { position: absolute; right: -2.25rem; bottom: -2.25rem; width: 5.5rem; height: 5.5rem; border: 1rem solid rgba(49,87,213,.07); border-radius: 50%; content: ""; }.kk-feature-card__icon { display: grid; width: 2.9rem; height: 2.9rem; flex: 0 0 auto; place-items: center; border-radius: .75rem; background: var(--kk-primary-soft); color: var(--kk-primary); }.kk-feature-card h3 { margin: .2rem 0 0; color: var(--kk-aubergine); font-size: 1rem; }.kk-feature-card p { position: relative; z-index: 1; margin: .65rem 0 0; color: var(--kk-text); font-size: .84rem; line-height: 1.65; }.kk-feature-card--coral { border-top-color: var(--kk-coral); }.kk-feature-card--coral .kk-feature-card__icon { background: var(--kk-error-soft); color: var(--kk-coral); }.kk-feature-card--teal { border-top-color: var(--kk-connected); }.kk-feature-card--teal .kk-feature-card__icon { background: var(--kk-connected-soft); color: var(--kk-connected); }.kk-feature-card--gold { border-top-color: var(--kk-gold); }.kk-feature-card--gold .kk-feature-card__icon { background: var(--kk-warning-soft); color: var(--kk-warning); }.kk-feature-card--violet { border-top-color: var(--kk-secondary); }.kk-feature-card--violet .kk-feature-card__icon { background: var(--kk-surface-tint); color: var(--kk-secondary); }.kk-feature-card--blue { border-top-color: #168aad; }.kk-feature-card--blue .kk-feature-card__icon { background: #e7f7fb; color: #11718e; }.kk-feature-card--navy { border-top-color: var(--kk-aubergine); }.kk-feature-card--navy .kk-feature-card__icon { background: #eee9f0; color: var(--kk-aubergine); }

/* Authentication: share a confident split layout while allowing login and signup cards to differ naturally in content density. */
.kk-auth-layout { display: grid; min-height: 100vh; grid-template-columns: minmax(26rem,.86fr) minmax(34rem,1.14fr); background: var(--kk-surface-soft); }.kk-auth-brand { position: relative; display: flex; min-height: 100vh; overflow: hidden; flex-direction: column; justify-content: space-between; padding: clamp(2rem,5vw,4.5rem); background: var(--kk-aubergine); color: white; }.kk-auth-brand__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.kk-auth-brand__top > span { padding: .4rem .65rem; border: 1px solid rgba(255,255,255,.25); border-radius: 2rem; color: rgba(255,255,255,.7); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }.kk-auth-brand__story { position: relative; z-index: 2; max-width: 36rem; margin-block: 4rem; }.kk-auth-brand__story h2 { max-width: 12ch; margin: 1.2rem 0 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(2.8rem,4.3vw,4.6rem); font-weight: 500; letter-spacing: -.045em; line-height: .99; }.kk-auth-brand__story > p:last-child { max-width: 28rem; margin: 1.5rem 0 0; color: rgba(255,255,255,.65); line-height: 1.75; }.kk-auth-steps { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(255,255,255,.18); list-style: none; }.kk-auth-steps li { display: flex; gap: .7rem; color: rgba(255,255,255,.8); font-size: .74rem; font-weight: 700; }.kk-auth-steps span { color: var(--kk-gold); font-family: ui-monospace,monospace; }.kk-auth-shape { position: absolute; pointer-events: none; }.kk-auth-shape--ring { top: 14%; right: -5rem; width: 13rem; height: 13rem; border: 2.5rem solid var(--kk-primary); border-radius: 50%; opacity: .72; }.kk-auth-shape--square { bottom: 24%; left: -3.5rem; width: 8.5rem; height: 8.5rem; transform: rotate(16deg); background: var(--kk-coral); opacity: .78; }
.kk-auth-main { position: relative; display: grid; min-width: 0; place-items: center; padding: 4.5rem var(--kk-page-gutter); }.kk-auth-main__content { width: min(100%,40rem); }.kk-auth-mobile-brand { display: none; }.kk-back-link { position: absolute; top: 1.5rem; right: var(--kk-page-gutter); display: inline-flex; min-height: 2.75rem; align-items: center; gap: .4rem; color: var(--kk-primary-dark); font-size: .8rem; font-weight: 750; text-decoration: none; }.kk-back-link:hover { text-decoration: underline; text-decoration-color: var(--kk-coral); text-underline-offset: .25rem; }
.kk-auth-card { overflow: hidden; border: 1px solid var(--kk-border); border-top: 4px solid var(--kk-coral); border-radius: var(--kk-radius-lg); background: var(--kk-surface); box-shadow: var(--kk-shadow-lg); }.kk-auth-card .card-body { padding: clamp(1.5rem,4vw,2.75rem); }.kk-auth-card h1 { max-width: 15ch; margin: .75rem 0 0; color: var(--kk-aubergine); font-family: Georgia,"Times New Roman",serif; font-size: clamp(2.1rem,4vw,3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.05; }.kk-auth-card__description { max-width: 34rem; margin: .85rem 0 1.8rem; color: var(--kk-text); font-size: .88rem; line-height: 1.65; }.kk-auth-form { display: grid; gap: 1rem; }.kk-form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }.kk-form-field { min-width: 0; }.kk-form-field .form-label { margin-bottom: .4rem; color: var(--kk-ink); font-size: .78rem; font-weight: 750; }.kk-form-field .form-control { min-height: 3rem; border-color: #cec7be; background: #fffefa; color: var(--kk-ink); }.kk-form-field .form-control::placeholder { color: #96939b; }.kk-form-field .form-control:hover { border-color: #aaa198; }.kk-form-field .form-control:focus { border-color: var(--kk-primary); background: white; box-shadow: 0 0 0 3px rgba(49,87,213,.12); }.kk-form-field .form-hint { margin-top: .35rem; color: var(--kk-muted); font-size: .68rem; }.kk-password-field { flex-wrap: nowrap; }.kk-password-field .form-control { min-width: 0; }.kk-password-toggle { min-width: 4.5rem; justify-content: center; gap: .3rem; border-color: #cec7be; color: var(--kk-primary-dark); font-size: .7rem; font-weight: 750; cursor: pointer; }.kk-password-toggle .icon { width: 1rem; height: 1rem; }.kk-form-options { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .78rem; }.kk-form-options a,.kk-auth-switch a,.kk-terms-check a { color: var(--kk-primary-dark); font-weight: 750; text-underline-offset: .2rem; }.kk-form-options .form-check { margin: 0; }.kk-terms-check { align-items: flex-start; margin: 0; color: var(--kk-text); font-size: .76rem; line-height: 1.55; }.kk-terms-check .form-check-input { margin-top: .2rem; }.form-check-input:checked { border-color: var(--kk-primary); background-color: var(--kk-primary); }.kk-submit-button { width: 100%; min-height: 3.1rem; margin-top: .15rem; }.kk-auth-switch { margin: .2rem 0 0; color: var(--kk-text); font-size: .8rem; text-align: center; }

/* Validation: pair high-contrast text and borders with explicit messages, never relying on colour as the only cue. */
.validation-message { display: block; margin-top: .35rem; color: var(--kk-error); font-size: .72rem; font-weight: 650; }.invalid { border-color: var(--kk-error); }.kk-alert { display: flex; align-items: flex-start; gap: .7rem; margin: 0; border-width: 1px 1px 1px 4px; border-color: var(--kk-error); border-radius: var(--kk-radius-sm); background: var(--kk-error-soft); color: var(--kk-error-strong); font-size: .78rem; line-height: 1.55; }.kk-alert--information { border-color: var(--kk-primary); background: var(--kk-primary-soft); color: #203a91; }.kk-alert__icon { display: grid; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .72rem; font-weight: 800; }

/* Responsive rules: the branded panel yields to a compact mobile header and form columns collapse before inputs become cramped. */
@media (max-width: 1023px) { .kk-auth-layout { grid-template-columns: 1fr; }.kk-auth-brand { display: none; }.kk-auth-main { display: block; padding-top: 5.5rem; }.kk-auth-main__content { margin-inline: auto; }.kk-auth-mobile-brand { position: absolute; top: 1rem; left: var(--kk-page-gutter); display: block; }.kk-back-link { top: 1rem; } }
@media (max-width: 640px) { .kk-auth-main { padding: 5.25rem .75rem 1.5rem; }.kk-auth-mobile-brand { left: 1rem; }.kk-back-link { right: 1rem; }.kk-back-link span { display: none; }.kk-back-link { font-size: .72rem; }.kk-form-columns { grid-template-columns: 1fr; }.kk-auth-card { border-radius: var(--kk-radius-md); box-shadow: var(--kk-shadow-sm); }.kk-auth-card .card-body { padding: 1.35rem; }.kk-auth-card__description { margin-bottom: 1.4rem; }.kk-form-options { align-items: flex-start; }.kk-password-toggle { min-width: 3.75rem; }.kk-password-toggle span { display: none; } }
@media (max-width: 390px) { .kk-auth-mobile-brand .kk-brand__name { font-size: .86rem; }.kk-auth-mobile-brand .kk-brand__mark { width: 2.15rem; }.kk-auth-card .card-body { padding: 1.15rem; } }

/* Accessibility: retain strong focus rings and sufficient target sizing for custom buttons, links, checkboxes, and disclosure controls. */
.btn:focus-visible,.form-control:focus-visible,.form-check-input:focus-visible,.kk-password-toggle:focus-visible,.kk-brand:focus-visible { outline: 3px solid rgba(49,87,213,.38); outline-offset: 2px; box-shadow: none; }.kk-password-toggle,.kk-back-link,.kk-auth-switch a { min-height: 2.75rem; }.kk-auth-switch a { display: inline-flex; align-items: center; }

/* Reduced motion: button lift and decorative transitions are non-essential and stop when reduced motion is preferred. */
@media (prefers-reduced-motion: reduce) { .kk-btn-primary,.kk-btn-secondary,.kk-btn-light { transform: none; transition: none; } }