/* KAVVI LANDING (2026-09-27) - see landing-20260927.src.js.
   Phone first; every colour is an app token, so light/dark follow the
   app's theme (both the explicit attribute and "system"). */

html.kvl-on #root { display: none !important; }
html.kvl-on, html.kvl-on body { background: var(--kv-canvas, #0a1211); }
html.kvl-wait .kvl { visibility: hidden; }

.kvl {
  --kvl-card: var(--kv-card, #14201f);
  --kvl-ring: color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 34%, var(--kv-line-3, rgba(255,255,255,.12)));
  --kvl-lift: 0 26px 70px -30px rgba(0, 0, 0, .75), 0 2px 10px -4px rgba(0, 0, 0, .35);
  --kvl-glow: color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 13%, transparent);
  --kvl-accent-ink: var(--kv-on-violet, var(--kv-accent-fill, #c8f5ad));
  --kvl-on-accent: #10201a;
  position: relative;
  isolation: isolate;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--kv-text, #f1f3e9);
  background:
    radial-gradient(120% 60% at 50% -10%, var(--kvl-glow), transparent 60%),
    var(--kv-canvas, #0a1211);
  font-family: var(--kv-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html[data-theme='light'] .kvl { --kvl-on-accent: #f4f7f0; --kvl-lift: 0 24px 60px -30px rgba(24, 44, 37, .35), 0 2px 8px -4px rgba(24, 44, 37, .14); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .kvl { --kvl-on-accent: #f4f7f0; --kvl-lift: 0 24px 60px -30px rgba(24, 44, 37, .35), 0 2px 8px -4px rgba(24, 44, 37, .14); }
}
.kvl *, .kvl *::before, .kvl *::after { box-sizing: border-box; }
.kvl :where(button) { font: inherit; color: inherit; }
.kvl[dir='rtl'] .kvl-flip { transform: scaleX(-1); }

.kvl-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* ---- top bar ---------------------------------------------------------- */
.kvl-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  inline-size: 100%;
  max-inline-size: 1120px;
  margin-inline: auto;
  padding: 14px 16px;
}
.kvl-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--kv-text, #f1f3e9); text-decoration: none; }
.kvl-mark { inline-size: 30px; block-size: 30px; flex: none; }
.kvl-wordmark { block-size: 22px; inline-size: auto; }
.kvl-wordmark--ar { block-size: 28px; margin-block-start: 6px; }
.kvl-top__actions { display: flex; align-items: center; gap: 8px; }
.kvl .kvl-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-block-size: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--kv-line-3, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--kvl-card) 55%, transparent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.kvl .kvl-ghost:hover { border-color: var(--kv-accent-fill, #c8f5ad); }
.kvl .kvl-ghost svg { inline-size: 16px; block-size: 16px; opacity: .8; }
.kvl .kvl-lang { font-weight: 500; }

/* ---- hero -------------------------------------------------------------- */
.kvl-main { flex: 1; inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding: 0 16px; }
.kvl-hero {
  max-inline-size: 700px;
  margin-inline: auto;
  padding-block: clamp(28px, 7vh, 96px) 8px;
  text-align: center;
}
.kvl-title {
  margin: 0;
  font-family: var(--kv-font-head);
  font-size: clamp(40px, 11.5vw, 78px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.kvl-title span, .kvl-title em { display: block; }
.kvl-title em:lang(en) {
  font-family: var(--kv-font-serif, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--kvl-accent-ink);
}
.kvl-title:lang(ar) { letter-spacing: 0; line-height: 1.22; font-size: clamp(38px, 11vw, 72px); }
.kvl-title em:lang(ar) { font-family: var(--kv-font-ar, inherit); font-style: normal; font-weight: 500; color: var(--kvl-accent-ink); }
.kvl-sub {
  max-inline-size: 34em;
  margin: 18px auto 26px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--kv-text-2, #c9d5c4);
  text-wrap: pretty;
}

/* The product shot: the new chat composer, typing real questions. */
.kvl .kvl-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  inline-size: 100%;
  /* Room for the pinned skill, so picking one never moves the page. */
  min-block-size: 170px;
  padding: 16px 12px 12px 18px;
  border-radius: 24px;
  border: 1px solid var(--kvl-ring);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 6%, var(--kvl-card)), var(--kvl-card) 70%);
  box-shadow: var(--kvl-lift), 0 0 0 7px color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 7%, transparent);
  text-align: start;
  cursor: text;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kvl[dir='rtl'] .kvl-composer { padding: 16px 18px 12px 12px; }
.kvl .kvl-composer:hover, .kvl .kvl-composer:focus-visible {
  border-color: var(--kv-accent-fill, #c8f5ad);
  box-shadow: var(--kvl-lift), 0 0 0 5px color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 22%, transparent);
  outline: none;
}
.kvl-composer__text { min-block-size: 52px; font-size: 16.5px; line-height: 1.6; color: var(--kv-text, #f1f3e9); }
.kvl-caret {
  display: inline-block;
  inline-size: 2px;
  block-size: 1.15em;
  margin-inline-start: 2px;
  vertical-align: -.2em;
  border-radius: 2px;
  background: var(--kv-accent-fill, #c8f5ad);
  animation: kvl-caret 1s steps(1) infinite;
}
@keyframes kvl-caret { 50% { opacity: 0; } }
.kvl-composer__row { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; margin-block-start: auto; }
.kvl-composer__text { display: block; inline-size: 100%; }
.kvl-composer__plus, .kvl-composer__send { display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 50%; }
.kvl-composer__plus { border: 1px solid var(--kv-line-3, rgba(255,255,255,.12)); color: var(--kv-text-2, #c9d5c4); }
.kvl-composer__send { inline-size: 40px; block-size: 40px; background: var(--kv-accent-fill, #c8f5ad); color: var(--kvl-on-accent); }
.kvl-composer svg { inline-size: 18px; block-size: 18px; }

/* The demo's skills: the same four chips as the chat home. Picking one
   pins it inside the composer, as the app does. */
.kvl-demo { display: grid; gap: 14px; }
.kvl-skill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  max-block-size: 0;
  padding: 0 10px;
  margin-block-end: -10px;
  border-radius: 999px;
  border: 1px solid transparent;
  overflow: hidden;
  opacity: 0;
  transform: translateY(4px) scale(.96);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--kvl-accent-ink);
  background: color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 14%, transparent);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2, .8, .2, 1), max-block-size .26s ease, padding .26s ease, margin .26s ease, border-color .22s ease;
}
.kvl-skill em { font-style: normal; }
.kvl-skill svg { inline-size: 13px; block-size: 13px; flex: none; }
.kvl-skill__icon { display: inline-grid; }
.kvl-skill > svg { opacity: .6; }
.kvl-demo.has-skill .kvl-skill {
  max-block-size: 30px;
  padding: 4px 10px;
  margin-block-end: 0;
  opacity: 1;
  transform: none;
  border-color: color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 40%, transparent);
}
.kvl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.kvl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--kv-line-3, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--kvl-card) 60%, transparent);
  color: var(--kv-text-2, #c9d5c4);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .16s ease, box-shadow .2s ease;
}
.kvl-chip svg { inline-size: 14px; block-size: 14px; color: var(--kvl-accent-ink); }
.kvl-chip:hover { border-color: var(--kv-accent-fill, #c8f5ad); }
.kvl-chip.is-pressing { transform: scale(.94); }
.kvl-chip.is-active {
  border-color: var(--kv-accent-fill, #c8f5ad);
  background: color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 16%, transparent);
  color: var(--kv-text, #f1f3e9);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 10%, transparent);
}
.kvl-composer__send { transition: transform .16s ease, box-shadow .2s ease; }
.kvl-composer__send.is-pressing { transform: scale(.88); box-shadow: 0 0 0 6px color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 25%, transparent); }
.kvl-composer__text { transition: opacity .3s ease, transform .3s ease; }
.kvl-demo.is-sent .kvl-composer__text { opacity: 0; transform: translateY(-8px); }
@media (max-width: 640px) {
  .kvl-hero { padding-block-start: clamp(12px, 3vh, 28px); }
  .kvl-title { font-size: clamp(36px, 10.4vw, 44px); }
  .kvl-title:lang(ar) { font-size: clamp(33px, 9.4vw, 40px); }
  .kvl-sub { margin: 12px auto 18px; font-size: 15.5px; line-height: 1.55; }
  .kvl .kvl-composer { min-block-size: 174px; }
  .kvl-demo { gap: 12px; }
  .kvl-cta { margin-block-start: 20px; }
  .kvl-chips { gap: 6px; }
  .kvl-chip { min-block-size: 32px; padding: 5px 10px; font-size: 12.5px; }
}

.kvl-cta { display: grid; justify-items: center; gap: 12px; margin-block-start: 26px; }
.kvl .kvl-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  inline-size: 100%;
  min-block-size: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--kv-accent-fill, #c8f5ad);
  color: var(--kvl-on-accent);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 70%, transparent);
  transition: transform .15s ease, filter .15s ease;
}
.kvl .kvl-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.kvl .kvl-primary svg { inline-size: 18px; block-size: 18px; }
.kvl-have { margin: 0; font-size: 14.5px; color: var(--kv-text-3, #aebdb4); }
.kvl .kvl-have button {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--kv-text, #f1f3e9);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 70%, transparent);
  text-underline-offset: 4px;
  cursor: pointer;
}
.kvl-free { margin: 18px auto 0; max-inline-size: 30em; font-size: 13.5px; line-height: 1.6; color: var(--kv-text-3, #aebdb4); }

/* ---- three steps ------------------------------------------------------- */
.kvl-steps {
  list-style: none;
  display: grid;
  gap: 10px;
  max-inline-size: 700px;
  margin: 56px auto 0;
  padding: 0;
}
.kvl-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--kv-line, rgba(255,255,255,.06));
  background: color-mix(in srgb, var(--kvl-card) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.kvl-step__hex {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 46px;
  block-size: 52px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 16%, var(--kvl-card));
  color: var(--kvl-accent-ink);
}
.kvl-step__hex svg { inline-size: 20px; block-size: 20px; }
.kvl-step__body { display: grid; gap: 2px; text-align: start; }
.kvl-step__body strong { display: flex; align-items: baseline; gap: 8px; font-size: 15.5px; font-weight: 700; }
.kvl-step__body small { font-size: 12px; font-weight: 700; color: var(--kvl-accent-ink); }
.kvl-step__body > span { font-size: 14px; line-height: 1.5; color: var(--kv-text-3, #aebdb4); }

/* ---- footer + phone dock ----------------------------------------------- */
.kvl-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  inline-size: 100%;
  max-inline-size: 1120px;
  margin: 64px auto 0;
  padding: 20px 16px calc(28px + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--kv-line, rgba(255,255,255,.06));
  font-size: 13px;
  color: var(--kv-text-3, #aebdb4);
}
.kvl-foot nav { display: flex; gap: 18px; }
.kvl-foot a { color: inherit; text-decoration: none; }
.kvl-foot a:hover { color: var(--kv-text, #f1f3e9); }

.kvl-dock { display: none; }
@media (max-width: 640px) {
  .kvl-foot { padding-block-end: calc(96px + env(safe-area-inset-bottom)); }
  .kvl-dock {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--kv-line, rgba(255,255,255,.06));
    background: color-mix(in srgb, var(--kv-canvas, #0a1211) 86%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transform: translateY(110%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
  }
  .kvl-dock.is-shown { transform: none; }
  .kvl .kvl-dock .kvl-primary { min-block-size: 48px; font-size: 16px; }
  .kvl .kvl-dock .kvl-ghost { min-block-size: 48px; padding-inline: 18px; }
}

/* ---- wider screens ----------------------------------------------------- */
@media (min-width: 641px) {
  .kvl-top { padding: 18px 28px; }
  .kvl-main { padding-inline: 28px; }
  .kvl-sub { font-size: 18px; }
  .kvl .kvl-composer { min-block-size: 178px; padding: 18px 14px 14px 22px; border-radius: 26px; }
  .kvl[dir='rtl'] .kvl-composer { padding: 18px 22px 14px 14px; }
  .kvl-composer__text { font-size: 17.5px; }
  .kvl-cta { grid-auto-flow: column; justify-content: center; align-items: center; gap: 22px; }
  .kvl .kvl-primary { inline-size: auto; }
  .kvl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); max-inline-size: 1000px; margin-block-start: 88px; gap: 14px; }
  .kvl-step { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
  .kvl-foot { padding-inline: 28px; }
}

/* ---- log in / sign up ---------------------------------------------------
   The app's own form, re-dressed like the landing: the honeycomb behind,
   the page's theme instead of a fixed dark page, a raised card instead of
   the paper one, the landing's mint controls. .kv-auth pins its own dark
   tokens and the card re-points them through the paper tokens, so both are
   handed back to the theme here. */
html.kvl-auth, html.kvl-auth body { background: var(--kv-canvas, #0a1211); }
html.kvl-auth .kvl-field--auth { z-index: 0; }
/* The app's wrappers paint the page colour over the field. */
html.kvl-auth #root, html.kvl-auth #root > div, html.kvl-auth .public-flow { background: transparent !important; }
html.kvl-auth .kv-auth {
  --kv-canvas: inherit; --kv-card: inherit; --kv-text: inherit; --kv-text-bright: inherit; --kv-text-2: inherit;
  --kv-text-3: inherit; --kv-text-muted: inherit; --kv-line: inherit; --kv-line-2: inherit; --kv-line-3: inherit;
  --kvl-card: var(--kv-card, #14201f);
  --kvl-accent-ink: var(--kv-on-violet, var(--kv-accent-fill, #c8f5ad));
  --kvl-on-accent: #10201a;
  --kvl-lift: 0 26px 70px -30px rgba(0, 0, 0, .75), 0 2px 10px -4px rgba(0, 0, 0, .35);
  --kv-paper: var(--kv-card, #14201f);
  --kv-paper-ink: var(--kv-text, #f1f3e9);
  --kv-paper-muted: var(--kv-text-3, #aebdb4);
  --kv-paper-line: var(--kv-line-3, rgba(255,255,255,.12));
  --kv-paper-soft: color-mix(in srgb, var(--kv-text, #f1f3e9) 5%, transparent);
  --kv-paper-field: color-mix(in srgb, var(--kv-canvas, #0a1211) 55%, var(--kv-card, #14201f));
  --kv-paper-control: var(--kv-line-3, rgba(255,255,255,.12));
  --kv-paper-accent: var(--kv-on-violet, var(--kv-accent-fill, #c8f5ad));
  color-scheme: inherit;
  color: var(--kv-text, #f1f3e9);
  background:
    radial-gradient(120% 55% at 50% -10%, color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 12%, transparent), transparent 60%),
    transparent;
}
html.kvl-auth[data-theme='light'] .kv-auth { --kvl-on-accent: #f4f7f0; --kvl-lift: 0 24px 60px -30px rgba(24, 44, 37, .35), 0 2px 8px -4px rgba(24, 44, 37, .14); }
@media (prefers-color-scheme: light) {
  html.kvl-auth:not([data-theme='dark']) .kv-auth { --kvl-on-accent: #f4f7f0; --kvl-lift: 0 24px 60px -30px rgba(24, 44, 37, .35), 0 2px 8px -4px rgba(24, 44, 37, .14); }
}
html.kvl-auth .kv-auth .kv-hero-fabric,
html.kvl-auth .kv-auth .kv-auth-story { display: none; }
html.kvl-auth .kv-auth > header { max-inline-size: 1120px; padding-block: 14px; }
html.kvl-auth .kv-auth > header .kavvi-logo { color: var(--kv-text, #f1f3e9); }
html.kvl-auth .kv-auth > header .kv-language {
  min-block-size: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--kv-line-3, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--kvl-card) 55%, transparent);
  font-size: 14px;
}
html.kvl-auth .kv-auth .kv-auth-layout {
  grid-template-columns: minmax(0, 440px);
  justify-content: center;
  align-items: start;
  min-block-size: 0;
  padding-block: clamp(4px, 5vh, 56px) 64px;
}
html.kvl-auth .kv-auth .kv-auth-card {
  --kv-accent-fill: inherit; --kv-on-violet: inherit; --kv-on-accent: inherit;
  padding: 26px 28px 24px;
  border-radius: 26px;
  border: 1px solid color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 26%, var(--kv-line-3, rgba(255,255,255,.12)));
  background: linear-gradient(180deg, color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 5%, var(--kvl-card)), var(--kvl-card) 45%);
  box-shadow: var(--kvl-lift), 0 0 0 7px color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 6%, transparent);
}
html.kvl-auth .kv-auth .kv-auth-tabs {
  padding: 4px;
  margin-block-end: 24px;
  border-radius: 999px;
  border: 1px solid var(--kv-line-3, rgba(255,255,255,.12));
  background: var(--kv-paper-soft);
}
html.kvl-auth .kv-auth .kv-auth-tabs button { min-block-size: 42px; border-radius: 999px; font-weight: 600; color: var(--kv-text-3, #aebdb4); }
html.kvl-auth .kv-auth .kv-auth-tabs button.is-on { background: var(--kv-accent-fill, #c8f5ad); color: var(--kvl-on-accent); }
html.kvl-auth .kv-auth .kv-auth-heading > p { color: var(--kvl-accent-ink); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; }
html.kvl-auth .kv-auth .kv-auth-heading h1 { font-size: clamp(28px, 7.4vw, 34px); color: var(--kv-text, #f1f3e9); }
html.kvl-auth .kv-auth .kv-auth-heading h1 .kv-type-accent { color: var(--kvl-accent-ink); }
html.kvl-auth .kv-auth .kv-auth-heading small { color: var(--kv-text-3, #aebdb4); font-size: 14.5px; }
html.kvl-auth .kv-auth .kv-auth-card form { gap: 16px; margin-block-start: 24px; }
html.kvl-auth .kv-auth .kv-auth-card form > label > span:first-child { font-size: 13.5px; font-weight: 600; color: var(--kv-text-2, #c9d5c4); }
html.kvl-auth .kv-auth .kv-auth-card input:not([type=checkbox]) {
  block-size: 52px;
  border-radius: 14px;
  border-color: var(--kv-line-3, rgba(255,255,255,.12));
  background: var(--kv-paper-field);
  color: var(--kv-text, #f1f3e9);
  transition: border-color .15s ease, box-shadow .15s ease;
}
html.kvl-auth .kv-auth .kv-auth-card input:not([type=checkbox]):focus {
  outline: none;
  border-color: var(--kv-accent-fill, #c8f5ad);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 20%, transparent);
}
html.kvl-auth .kv-auth .kv-auth-terms input { accent-color: var(--kv-accent-fill, #c8f5ad); }
html.kvl-auth .kv-auth .kv-auth-terms, html.kvl-auth .kv-auth .kv-auth-terms span { color: var(--kv-text-3, #aebdb4); }
html.kvl-auth .kv-auth .kv-auth-submit {
  min-block-size: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--kv-accent-fill, #c8f5ad);
  color: var(--kvl-on-accent);
  font-size: 16.5px;
  font-weight: 700;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 70%, transparent);
  transition: transform .15s ease, filter .15s ease;
}
html.kvl-auth .kv-auth .kv-auth-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
html.kvl-auth .kv-auth .kv-auth-switch { border-color: var(--kv-line, rgba(255,255,255,.06)); color: var(--kv-text-3, #aebdb4); }
html.kvl-auth .kv-auth .kv-auth-switch button { color: var(--kv-text, #f1f3e9); text-decoration-color: color-mix(in srgb, var(--kv-accent-fill, #c8f5ad) 70%, transparent); }
html.kvl-auth .kv-auth .kv-auth-secure { color: var(--kv-text-3, #aebdb4); font-size: 12.5px; }
html.kvl-auth .kv-auth .kv-password-field > button { color: var(--kv-text-3, #aebdb4); }
@media (max-width: 480px) {
  html.kvl-auth .kv-auth .kv-auth-card { padding: 20px 18px 18px; border-radius: 22px; }
  html.kvl-auth .kv-auth .kv-auth-layout { padding-block: 4px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .kvl-caret { animation: none; }
  .kvl-skill, .kvl-chip, .kvl-composer__text, .kvl-composer__send { transition: none !important; }
  .kvl *, .kvl-dock { transition: none !important; }
}