/* ==========================================================================
   AiHisab Help Center — "Final" design (v12, Oct 2026)
   Calm, confident and reliable, with a light AI layer.
   Loaded by lib/layout.php AFTER kb.css and kb-theme-ledger.css on public pages.
   Plain CSS: no Tailwind rebuild needed. Scoped to body.theme-dark (admin is untouched).
   To roll back: remove the kb-theme-final.css <link> in lib/layout.php.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
@property --kf-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --bg: #F6F4EE;
  --bg-soft: #F6F4EE;
  --panel: #FFFFFF;
  --panel-2: #FBFAF6;
  --line: #E1E7E4;
  --line-2: #D3DCD8;
  --text: #10201A;
  --body: #3E4D47;
  --muted: #5B6A64;
  --accent: #0E5E4B;
  --accent-ink: #08402F;
  --accent-soft: #E6EFEA;
  --mint: #14B8A6;
  --sky: #06B6D4;
  --amber: #7A3F06;
  --amber-soft: #FBF6EE;
  --dark: #0B2A22;
  --darker: #071F19;
  --ink-panel: #0B2A22;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ai-1: #0E5E4B;
  --ai-2: #14B8A6;
  --ai-3: #06B6D4;
  --ai-4: #8B87E6;
  --ai-grad: linear-gradient(110deg, #0E5E4B, #14B8A6 40%, #06B6D4 65%, #8B87E6);
  --grad: linear-gradient(#0E5E4B, #0E5E4B);
  --kf-ring: conic-gradient(from var(--kf-a), #14B8A6, #0E5E4B 22%, #06B6D4 45%, #8B87E6 65%, #0E5E4B 82%, #14B8A6);
  --lav: #8B87E6;
  --lav-soft: #EEEDFB;
  --teal-grad: linear-gradient(110deg, #0E5E4B, #14B8A6 55%, #06B6D4);
  --kf-aurora: radial-gradient(55% 75% at 8% 10%, rgba(20, 184, 166, .28), transparent 72%), radial-gradient(50% 80% at 92% 6%, rgba(139, 135, 230, .36), transparent 72%), radial-gradient(40% 50% at 55% 0%, rgba(6, 182, 212, .10), transparent 70%);
  --kf-shadow: 0 18px 40px -22px rgba(16, 32, 26, .28);
  --kf-radius: 16px;
}

/* ---------- 2. Base ---------- */
body.theme-dark { background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.theme-dark ::selection { background: #CFE9DE; color: var(--text); }
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3 { font-family: var(--serif); font-weight: 700 !important; letter-spacing: -.015em; color: var(--text); }
body.theme-dark h1 { line-height: 1.08; }
body.theme-dark .kb-muted { color: var(--muted); }
body.theme-dark .font-mono, body.theme-dark code, body.theme-dark kbd { font-family: var(--mono); }
body.theme-dark .text-slate-300, body.theme-dark .text-slate-200 { color: var(--body) !important; }
body.theme-dark .text-slate-400 { color: var(--muted) !important; }
body.theme-dark .text-teal-300, body.theme-dark .text-teal-300\/80, body.theme-dark .text-cyan-300,
body.theme-dark .text-violet-300, body.theme-dark .text-pink-300, body.theme-dark .text-teal-200 { color: var(--accent) !important; }

/* Gradient words: one calm green, no rainbow */
body.theme-dark .kb-grad-text {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--accent) !important;
  font-style: normal; font-weight: inherit; animation: none !important;
}

/* Background layers: aurora off; the grid becomes a faint dot grid at the top of the page only */
body.theme-dark .kb-aurora { display: none !important; }
body.theme-dark .kb-grid {
  background-image: radial-gradient(rgba(14, 94, 75, .13) 1px, transparent 1.2px) !important;
  background-size: 22px 22px !important;
  -webkit-mask-image: radial-gradient(ellipse 70% 45% at 70% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 45% at 70% 0%, #000 20%, transparent 75%);
}

/* ---------- 3. Utility strip + top bar ---------- */
.kf-util { background: var(--dark); color: #D7E6E0; font-size: 13px; position: relative; z-index: 41; }
.kf-util-in { max-width: 1200px; margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; justify-content: space-between; }
.kf-util b { color: #fff; font-weight: 600; }
.kf-util a { color: #D7E6E0; }
.kf-util a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kf-util-links { display: flex; gap: 20px; flex-wrap: wrap; }
.kf-live { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); display: inline-block; flex: none; }
.kf-util-txt { display: inline-flex; align-items: center; gap: 10px; }
.kf-short { display: none; }
@media (max-width: 760px) {
  .kf-util-in { padding: 7px 16px; }
  .kf-util-links, .kf-long { display: none; }
  .kf-short { display: inline; }
}

body.theme-dark .kb-topbar {
  background: rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px) !important; backdrop-filter: saturate(1.4) blur(14px) !important;
  border-bottom: 1px solid var(--line) !important; box-shadow: none !important;
}
body.theme-dark .kb-topbar::after { display: none; }
body.theme-dark .kb-topbar > div { max-width: 1200px !important; padding-left: 24px; padding-right: 24px; height: 68px; gap: 20px; }
body.theme-dark .kb-logo, body.theme-dark .kb-topbar .kb-logo {
  width: 40px; height: 40px; border-radius: 11px; background: var(--accent) !important; color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18) !important; animation: none !important; font-size: 17px;
}
body.theme-dark .kb-topbar .text-\[15px\] { font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.01em; }
body.theme-dark .kb-topbar .kb-grad-text { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; padding: 0; }
body.theme-dark .kb-topbar .tracking-\[\.18em\] { font-family: var(--sans) !important; text-transform: none; letter-spacing: 0 !important; font-size: 12px !important; color: var(--muted) !important; }

/* Text navigation with a sliding underline (no pill tray) */
body.theme-dark .kb-topbar nav.ml-auto { border: 0 !important; background: none !important; padding: 0 !important; gap: 4px !important; }
body.theme-dark .kb-topbar .kb-nav {
  position: relative; border-radius: 0 !important; padding: 8px 10px !important; background: none !important; box-shadow: none !important;
  color: var(--body) !important; font-size: 15px; font-weight: 500;
}
body.theme-dark .kb-topbar .kb-nav i { display: none; }
body.theme-dark .kb-topbar .kb-nav span { display: inline !important; }
body.theme-dark .kb-topbar .kb-nav::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
body.theme-dark .kb-topbar .kb-nav:hover { color: var(--text) !important; }
body.theme-dark .kb-topbar .kb-nav:hover::after, body.theme-dark .kb-topbar .kb-nav.is-active::after { transform: scaleX(1); }
body.theme-dark .kb-topbar .kb-nav.is-active { color: var(--accent-ink) !important; font-weight: 600; background: none !important; box-shadow: none !important; }
body.theme-dark .kb-topbar .kb-nav[data-pwa-install] i { display: inline; }

body.theme-dark .kb-cmd-trigger {
  height: 44px; width: 210px; border-radius: 11px !important; font-family: var(--sans) !important; font-size: 14px !important;
  background: #F7F9F8 !important; border: 1px solid var(--line-2) !important; color: var(--muted) !important;
}
body.theme-dark .kb-cmd-trigger:hover { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, .15) !important; }
body.theme-dark .kb-cmd-trigger kbd { font-family: var(--sans) !important; font-size: 12px; background: #fff !important; border: 1px solid var(--line-2) !important; box-shadow: none !important; color: var(--muted) !important; }

body.theme-dark .kb-app-btn, body.theme-dark .kb-topbar .kb-app-btn {
  position: relative; overflow: hidden; height: 44px; padding: 0 18px; border-radius: 11px !important; margin-left: 8px;
  background: var(--accent) !important; border: 0 !important; color: #fff !important; font-weight: 600; font-size: 14px;
  box-shadow: none !important; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
body.theme-dark .kb-app-btn:hover { background: var(--accent-ink) !important; transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(14, 94, 75, .45) !important; }
body.theme-dark .kb-topbar .kb-app-btn span { display: inline !important; }
@media (max-width: 1279px) { body.theme-dark .kb-topbar .kb-app-btn span { display: none !important; } body.theme-dark .kb-topbar .kb-app-btn { padding: 0 14px; } body.theme-dark .kb-cmd-trigger { width: 170px; } }

body.theme-dark .kb-icon-btn { width: 44px; height: 44px; border-radius: 11px; background: #fff !important; border: 1px solid var(--line-2) !important; color: var(--text) !important; }
body.theme-dark .kb-icon-btn:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
@media (max-width: 1023px) { body.theme-dark .kb-topbar > div { padding-left: 16px; padding-right: 16px; height: 64px; } }

/* ---------- 4. Command palette (Ctrl+K) ---------- */
body.theme-dark .kb-cmd-backdrop { background: rgba(16, 32, 26, .35) !important; }
body.theme-dark .kb-cmd-panel { background: #fff !important; color: var(--text) !important; border: 1.5px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--kf-ring) border-box !important; box-shadow: 0 40px 100px -30px rgba(16, 32, 26, .45), 0 0 40px -10px rgba(20, 184, 166, .35) !important; }
body.theme-dark .kb-cmd-input { border-bottom-color: var(--line) !important; }
body.theme-dark .kb-cmd-input input { color: var(--text) !important; font-family: var(--sans); }
body.theme-dark .kb-cmd-input i { color: var(--accent) !important; }
body.theme-dark .kb-cmd-item { color: var(--text) !important; }
body.theme-dark .kb-cmd-item.is-sel, body.theme-dark .kb-cmd-item:hover { background: var(--accent-soft) !important; }
body.theme-dark .kb-cmd-ico { background: #F2F5F4 !important; color: var(--accent) !important; }
body.theme-dark .kb-cmd-ico.is-ai { background: var(--accent) !important; color: #fff !important; }

/* ---------- 5. Mobile menu sheet + bottom tab bar ---------- */
body.theme-dark .kb-sheet-backdrop { background: rgba(16, 32, 26, .35) !important; }
body.theme-dark .kb-sheet-panel { background: #fff !important; border-top: 1px solid var(--line) !important; box-shadow: 0 -20px 60px -20px rgba(16, 32, 26, .35) !important; }
body.theme-dark .kb-sheet-link { background: #F7FAF8 !important; border: 1px solid var(--line) !important; min-height: 56px; }
body.theme-dark .kb-sheet-link i { color: var(--accent) !important; }
body.theme-dark .kb-sheet-link.is-active { border-color: var(--accent) !important; background: var(--accent-soft) !important; }

body.theme-dark .kb-tabbar {
  background: rgba(255, 255, 255, .96) !important; border-top: 1px solid var(--line) !important;
  box-shadow: 0 -10px 30px rgba(16, 32, 26, .08); padding: 6px 6px calc(8px + env(safe-area-inset-bottom)) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px) !important; backdrop-filter: saturate(1.4) blur(14px) !important;
}
body.theme-dark .kb-tab { color: var(--muted) !important; font-size: 11.5px; font-weight: 600; gap: 3px; justify-content: flex-end; }
body.theme-dark .kb-tab > i { width: 52px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 17px; transition: background .25s, color .25s; }
body.theme-dark .kb-tab.is-active { color: var(--accent-ink) !important; }
body.theme-dark .kb-tab.is-active > i { background: var(--accent-soft); color: var(--accent-ink) !important; filter: none !important; }
body.theme-dark .kb-tab:active > i { transform: scale(.92); }
body.theme-dark .kb-tab-ask { background: none !important; color: var(--accent-ink) !important; font-weight: 700; }
body.theme-dark .kb-tab-orb {
  width: 56px !important; height: 56px !important; margin-top: -26px !important; border-radius: 18px !important; color: #fff !important;
  border: 3px solid transparent; box-sizing: border-box;
  background: linear-gradient(var(--accent), var(--accent)) padding-box, conic-gradient(from var(--kf-a), #06B6D4, #14B8A6, #FFFFFF, #14B8A6, #06B6D4) border-box !important;
  box-shadow: 0 10px 24px rgba(14, 94, 75, .35) !important;
}
body.theme-dark .kb-tab-orb i { font-size: 20px; }

/* ---------- 6. Footer ---------- */
.kf-foot { background: var(--darker); color: #D7E6E0; margin-top: 0; }
.kf-foot-in { max-width: 1200px; margin: 0 auto; padding: 56px 24px 28px; }
.kf-foot-top { display: flex; flex-wrap: wrap; gap: 40px; }
.kf-foot-brand { flex: 1 1 280px; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.kf-foot-brand .kf-foot-name { font-weight: 800; font-size: 18px; color: #fff; display: flex; align-items: center; gap: 10px; }
.kf-foot-brand p { margin: 0; font-size: 14px; line-height: 1.6; color: #B7CEC5; }
.kf-foot-ask { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-weight: 600; font-size: 14px; background: transparent; cursor: pointer; }
.kf-foot-ask:hover { background: rgba(255, 255, 255, .08); }
.kf-foot-ask kbd { font-family: var(--sans); font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .25); color: #B7CEC5; }
.kf-foot-cols { flex: 999 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; font-size: 14px; }
.kf-foot-cols h4 { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8FB3A6; }
.kf-foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kf-foot-cols a { color: #D7E6E0; }
.kf-foot-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kf-foot-bot { margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 13px; color: #B7CEC5; }
.kf-foot-warn { color: #F3D9A8; display: inline-flex; gap: 8px; align-items: center; }
.kf-foot-live { display: inline-flex; gap: 8px; align-items: center; }
body.theme-dark .kf-foot .kb-logo { width: 34px; height: 34px; font-size: 15px; }
@media (max-width: 760px) { .kf-foot-in { padding: 44px 16px 24px; } .kf-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } }

/* ---------- 7. Shared components used by every public page ---------- */
body.theme-dark .kb-card {
  background: #fff !important; border: 1px solid var(--line) !important; border-radius: var(--kf-radius) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}
body.theme-dark .kb-card::before { display: none !important; }
body.theme-dark a.kb-card:hover, body.theme-dark .kb-card.is-hover:hover {
  transform: translateY(-3px) !important; border-color: #B9CCC4 !important; box-shadow: var(--kf-shadow) !important; background: #fff !important;
}
body.theme-dark .kb-card .text-lg.font-bold, body.theme-dark .kb-card .text-xl.font-bold, body.theme-dark .kb-card .text-2xl.font-bold { font-family: var(--sans) !important; font-weight: 700 !important; font-size: 1.15rem !important; letter-spacing: -.005em; }

body.theme-dark .kb-icon-tile { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border: 0 !important; border-radius: 12px; transition: background .25s, color .25s, transform .25s; }
body.theme-dark a.kb-card:hover .kb-icon-tile, body.theme-dark .kb-card:hover > .flex .kb-icon-tile { background: var(--accent) !important; color: #fff !important; transform: rotate(-4deg); }

body.theme-dark .kb-chip {
  font-family: var(--sans) !important; font-size: 14px !important; color: var(--body) !important; background: #fff !important;
  border: 1px solid var(--line-2) !important; padding: 8px 14px; min-height: 38px; box-shadow: none !important; transform: none !important;
}
body.theme-dark .kb-chip:hover { color: var(--accent-ink) !important; border-color: var(--accent) !important; background: var(--accent-soft) !important; }
body.theme-dark .kb-chip.is-on { color: #fff !important; background: var(--text) !important; border-color: var(--text) !important; }

body.theme-dark .kb-badge {
  font-family: var(--mono) !important; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink) !important; background: #fff !important; border: 1px solid #D3E3DC !important; overflow: visible;
}
body.theme-dark .kb-badge::after { display: none; }
body.theme-dark .kb-dot-live { background: var(--mint) !important; }

body.theme-dark .kb-section-title { font-family: var(--serif); font-weight: 700 !important; font-size: 1.6rem; color: var(--text); }
body.theme-dark .kb-section-title i { display: none; }

/* Learning-path cards on Library / Guides */
body.theme-dark .kb-path::after { background: var(--line) !important; height: 1px; }
body.theme-dark .kb-path-count { font-family: var(--sans) !important; font-weight: 800 !important; font-size: 1.6rem !important; color: var(--text) !important; }
body.theme-dark .kb-path-count small { font-family: var(--mono) !important; }
body.theme-dark .kb-path-link { background: #fff !important; border: 1px solid #EEF2F0 !important; color: var(--body) !important; min-height: 44px; }
body.theme-dark .kb-path-link:hover { background: #F2F7F5 !important; color: var(--accent-ink) !important; border-color: var(--line-2) !important; }
body.theme-dark .kb-path-link > i:first-child { color: var(--accent) !important; }
body.theme-dark .kb-step-no { background: var(--accent-soft) !important; color: var(--accent-ink) !important; border: 0 !important; font-family: var(--mono) !important; }
body.theme-dark .kb-topic-head::before { display: none; }
body.theme-dark .kb-lib-nav { background: rgba(255, 255, 255, .92) !important; border-bottom-color: var(--line) !important; top: 68px; }
@media (max-width: 1023px) { body.theme-dark .kb-lib-nav { top: 64px; } }
body.theme-dark .kb-lib-item:hover { background: var(--accent-soft) !important; }

/* Inputs, tables and tool outputs */
body.theme-dark .tool-i { background: #fff !important; border: 1px solid #C9D5D0 !important; border-radius: 11px; color: var(--text) !important; min-height: 44px; }
body.theme-dark .tool-i:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, .2); outline: none; }
body.theme-dark .out-box { background: #F7FAF8 !important; border: 1px solid var(--line) !important; }
body.theme-dark .out-big { background: var(--accent-soft) !important; border-color: #CFE0D7 !important; }
body.theme-dark .kb-table { background: #fff; border-color: var(--line) !important; }
body.theme-dark .kb-table th { background: #F7FAF8 !important; color: var(--text) !important; font-weight: 700; }
body.theme-dark .kb-table th, body.theme-dark .kb-table td { border-color: #EEF2F0 !important; color: var(--body); }
body.theme-dark .kb-table tr:hover td { background: #F2F7F5 !important; }

/* Article reading */
body.theme-dark .kb-progress { background: linear-gradient(90deg, var(--accent), var(--mint), var(--sky)) !important; box-shadow: 0 0 10px rgba(20, 184, 166, .6) !important; height: 3px; }
body.theme-dark .kb-h2 { font-family: var(--serif) !important; font-weight: 700 !important; font-size: 1.7rem; }
body.theme-dark .kb-h3 { font-family: var(--sans) !important; font-weight: 700 !important; font-size: 1.2rem; }
body.theme-dark .kb-p, body.theme-dark .kb-ul, body.theme-dark .kb-ol { color: var(--body) !important; font-size: 1.04rem; line-height: 1.8; }
body.theme-dark .kb-link { color: var(--accent) !important; }
body.theme-dark .kb-tip { background: var(--accent-soft) !important; border: 1px solid #CFE0D7 !important; border-radius: 12px; color: #1F2C26 !important; }
body.theme-dark .kb-code { background: #F2F5F4 !important; border-color: var(--line) !important; color: var(--accent-ink) !important; }
body.theme-dark .kb-pre { background: var(--dark) !important; color: #E6EDE9 !important; border-color: var(--dark) !important; }
body.theme-dark .kb-toc a { border-left-color: var(--line) !important; color: var(--muted) !important; }
body.theme-dark .kb-toc a.is-active { color: var(--accent-ink) !important; border-left-color: var(--accent) !important; background: var(--accent-soft) !important; }
body.theme-dark .kb-legal-note { background: var(--amber-soft); border-color: #F1E6D3; color: var(--amber); }

/* AI answer box (search results page) */
body.theme-dark .kb-answer { border-radius: 20px !important; border: 1.5px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--kf-ring) border-box !important;
  box-shadow: 0 30px 60px -24px rgba(16, 32, 26, .25), 0 0 40px -8px rgba(20, 184, 166, .3) !important; }
body.theme-dark .kb-answer.kb-glow-border::before { display: none; }
body.theme-dark .kb-answer-head { border-bottom: 1px solid #EEF2F0 !important; background: #FAFCFB; border-radius: 18px 18px 0 0; }
body.theme-dark .kb-answer-head .text-sm.font-semibold { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink) !important; }
body.theme-dark .kb-answer-lead { color: var(--text) !important; }
body.theme-dark .kb-mini-orb { background: var(--accent) !important; border-radius: 10px !important; box-shadow: none !important; }
body.theme-dark .kb-steps li { background: #F7FAF8 !important; border-color: var(--line) !important; color: var(--body); }
body.theme-dark .kb-steps li::before { background: var(--accent) !important; color: #fff !important; }
body.theme-dark .kb-points li::before { background: var(--mint) !important; box-shadow: none !important; }
body.theme-dark .kb-source { background: #F2F5F4 !important; border: 1px solid var(--line) !important; color: var(--body) !important; }
body.theme-dark a.kb-source:hover { border-color: var(--accent) !important; color: var(--accent-ink) !important; }

/* Focus ring */
body.theme-dark a:focus-visible, body.theme-dark button:focus-visible, body.theme-dark input:focus-visible,
body.theme-dark select:focus-visible, body.theme-dark textarea:focus-visible, body.theme-dark summary:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

/* ==========================================================================
   8. Home page (index.php) — kf-* blocks
   ========================================================================== */
.kf-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.kf-mono { font-family: var(--mono); letter-spacing: .02em; }
.kf-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 8px; }
.kf-eyebrow i.kf-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); display: inline-block; }
.kf-h2 { margin: 6px 0 0; font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; color: var(--text); letter-spacing: -.015em; }
.kf-sub { margin: 6px 0 0; font-size: 16px; color: var(--body); }
.kf-sec { padding-top: 88px; }
.kf-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.kf-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--accent); }
.kf-more:hover { color: var(--accent-ink); }
.kf-more i { transition: transform .2s; }
.kf-more:hover i { transform: translateX(3px); }

/* Hero */
.kf-hero { position: relative; background: var(--bg-soft); overflow: hidden; border-bottom: 1px solid var(--line); }
.kf-ledger { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#E3EBE7 1px, transparent 1px); background-size: 100% 40px;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .5) 55%, transparent); mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .5) 55%, transparent); }
.kf-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(14, 94, 75, .16) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at 75% 40%, #000, transparent 60%); mask-image: radial-gradient(ellipse at 75% 40%, #000, transparent 60%); }
.kf-margin { position: absolute; top: 0; bottom: 0; left: max(24px, calc(50% - 640px)); width: 1px; background: #CFE0D8; pointer-events: none; }
.kf-scan { position: absolute; left: 0; right: 0; height: 140px; top: -140px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(20, 184, 166, .10), transparent); }
.kf-hero-grid { position: relative; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 48px; }
.kf-hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.kf-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #fff; border: 1px solid #D3E3DC; color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.kf-pill > span { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 11px; }
.kf-h1 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(38px, 5vw, 60px); line-height: 1.05; letter-spacing: -.02em; color: var(--text); }
.kf-u { position: relative; white-space: nowrap; color: var(--accent); }
.kf-u svg { position: absolute; left: 0; bottom: -6px; width: 100%; height: 10px; }
.kf-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--body); max-width: 560px; }
.kf-hero--compact .kf-hero-grid { padding-top: 40px; padding-bottom: 32px; }
.kf-hero--compact .kf-hero-copy { flex-basis: 100%; max-width: 760px; margin: 0 auto; }

/* Ask box (replaces .kb-search on the home page; keeps #kb-q and #kb-suggest) */
.kf-ask { position: relative; display: flex; flex-direction: column; gap: 8px; }
.kf-ask label { font-size: 14px; font-weight: 600; color: var(--text); }
.kf-ask-box { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 16px; border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--kf-ring) border-box; box-shadow: 0 10px 30px rgba(16, 32, 26, .07), 0 0 28px -8px rgba(20, 184, 166, .4); }
.kf-ask-box:focus-within { box-shadow: 0 0 0 4px rgba(20, 184, 166, .18), 0 14px 36px -10px rgba(14, 94, 75, .35); }
.kf-ask-ico { padding-left: 10px; color: var(--accent); font-size: 18px; }
.kf-ask-box input { flex: 1; min-width: 0; border: 0; outline: none !important; background: transparent; font: inherit; font-size: 16px; color: var(--text); height: 50px; padding: 0 6px; }
.kf-ask-box input::placeholder { color: #6B7A74; }
.kf-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 11px;
  border: 0; background: var(--accent); color: #fff !important; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; }
.kf-btn:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(14, 94, 75, .45); }
.kf-btn i { transition: transform .2s; }
.kf-btn:hover i { transform: translateX(3px); }
.kf-btn--lg { min-height: 50px; padding: 0 22px; }
.kf-btn--light { background: #fff; color: var(--dark) !important; }
.kf-btn--light:hover { background: #fff; }
.kf-btn--ghost { background: transparent; border: 1px solid #C9D5D0; color: var(--text) !important; }
.kf-btn--ghost:hover { background: #fff; box-shadow: none; }
.kf-btn--ghost-d { background: transparent; border: 1px solid rgba(255, 255, 255, .3); }
.kf-btn--ghost-d:hover { background: rgba(255, 255, 255, .08); box-shadow: none; }
.kf-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); pointer-events: none; }
body.theme-dark .kf-ask .kb-suggest { top: calc(100% + 8px); background: #fff !important; border: 1px solid var(--line-2) !important; border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(16, 32, 26, .3) !important; }
body.theme-dark .kf-ask .kb-suggest a { border-bottom-color: #EEF2F0 !important; }
body.theme-dark .kf-ask .kb-suggest a:hover, body.theme-dark .kf-ask .kb-suggest button:hover { background: var(--accent-soft) !important; }
body.theme-dark .kf-ask .kb-suggest .text-white { color: var(--text) !important; }

.kf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kf-chips > span { font-size: 13px; color: var(--muted); margin-right: 4px; }
.kf-chip { font-size: 14px; padding: 8px 13px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--body); transition: border-color .2s, background .2s, color .2s; white-space: nowrap; }
.kf-chip:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* Demo answer card */
.kf-demo-wrap { flex: 1 1 400px; min-width: 0; max-width: 520px; position: relative; }
.kf-demo { position: relative; z-index: 1; border-radius: 20px; overflow: hidden; border: 1.5px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--kf-ring) border-box;
  box-shadow: 0 30px 60px -20px rgba(16, 32, 26, .22), 0 0 0 6px rgba(20, 184, 166, .06), 0 0 40px -6px rgba(20, 184, 166, .35); }
.kf-demo-top { padding: 10px 14px 10px 18px; border-bottom: 1px solid #EEF2F0; display: flex; align-items: center; justify-content: space-between; background: #FAFCFB; }
.kf-lights { display: flex; gap: 6px; } .kf-lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.kf-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--accent-ink); text-transform: uppercase; }
.kf-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); display: inline-block; }
.kf-dots-nav { display: flex; }
.kf-dots-nav button { width: 28px; height: 28px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; }
.kf-dots-nav span { width: 8px; height: 8px; border-radius: 99px; background: #C9D5D0; transition: width .3s, background .3s; display: block; }
.kf-dots-nav button[aria-current="true"] span { width: 22px; background: var(--accent); }
.kf-demo-body { padding: 20px 20px 8px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; box-sizing: border-box; }
.kf-q { align-self: flex-end; max-width: 88%; background: var(--text); color: #fff; padding: 12px 16px; border-radius: 16px 16px 4px 16px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.kf-a { display: flex; gap: 12px; align-items: flex-start; }
.kf-a-ico { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 14px; }
.kf-a-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.kf-a-txt p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); }
.kf-a-txt p b { color: var(--accent-ink); }
.kf-think { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.kf-think span { display: flex; gap: 5px; } .kf-think span i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: block; }
.kf-cites { display: flex; flex-wrap: wrap; gap: 8px; }
.kf-cites span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 7px; background: #F2F5F4; color: var(--body); border: 1px solid var(--line); }
.kf-caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: -2px; margin-left: 2px; }
.kf-demo-note { margin-top: 12px; padding: 11px 20px; background: var(--amber-soft); border-top: 1px solid #F1E6D3; font-size: 13px; color: var(--amber); display: flex; gap: 8px; align-items: center; }
.kf-float { position: absolute; z-index: 2; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; box-shadow: 0 10px 24px rgba(16, 32, 26, .1); font-size: 12px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.kf-float b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.kf-float--a { top: -22px; right: 28px; } .kf-float--a b { background: #E6EEF8; color: #1D4E89; }
.kf-float--b { bottom: 64px; left: -34px; } .kf-float--b b { background: #FBF0DF; color: var(--amber); }
.kf-net { position: absolute; pointer-events: none; }
.kf-net line { stroke: var(--mint); stroke-width: 1; stroke-dasharray: 4 6; opacity: .55; }
.kf-net circle { fill: var(--mint); }
.kf-net--a { top: -60px; right: -70px; width: 260px; height: 220px; }
.kf-net--b { bottom: -50px; left: -60px; width: 200px; height: 160px; }

/* Topic marquee */
.kf-marquee { position: relative; overflow: hidden; padding: 4px 0 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kf-track { display: flex; gap: 10px; width: max-content; }
.kf-track a { flex: none; font-size: 13px; font-weight: 500; padding: 8px 14px; border: 1px solid #DCE5E1; border-radius: 999px; background: rgba(255, 255, 255, .8); color: var(--body); white-space: nowrap; }
.kf-track a:hover { border-color: var(--accent); color: var(--accent-ink); }
.kf-marquee:hover .kf-track { animation-play-state: paused; }

/* Stats */
.kf-stats { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 56px; box-shadow: 0 8px 24px rgba(16, 32, 26, .04); }
.kf-stat { background: #fff; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; }
.kf-stat b { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.kf-stat span { font-size: 14px; color: var(--muted); }
a.kf-stat:hover b { color: var(--accent); }
.kf-stat--date b { font-size: 26px; padding-top: 4px; }

/* Learning paths */
.kf-paths { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 20px; }
.kf-path { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 16px; transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .25s, box-shadow .25s; }
.kf-path:hover { transform: translateY(-4px); border-color: #B9CCC4; box-shadow: var(--kf-shadow); }
.kf-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-size: 19px; flex: none; transition: background .25s, color .25s, transform .25s; }
.kf-path:hover .kf-ic, .kf-card:hover .kf-ic { background: var(--accent); color: #fff; transform: rotate(-4deg); }
.kf-path-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kf-path-n { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.kf-path-n small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kf-path h3 { margin: 0; font-family: var(--sans) !important; font-size: 20px; font-weight: 700 !important; letter-spacing: -.005em; }
.kf-path h3 a { color: var(--text); } .kf-path h3 a:hover { color: var(--accent); }
.kf-path p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.kf-bar { height: 4px; border-radius: 4px; background: #EEF2F0; overflow: hidden; } .kf-bar i { display: block; height: 100%; background: var(--mint); border-radius: 4px; transform-origin: left; }
.kf-subs { display: flex; flex-direction: column; border-top: 1px solid #EEF2F0; }
.kf-subs a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #EEF2F0; font-size: 14px; color: var(--body); transition: background .15s, color .15s, padding .15s; }
.kf-subs a:last-child { border-bottom: 0; }
.kf-subs a:hover { color: var(--accent-ink); background: #F2F7F5; padding-left: 10px; }
.kf-subs a span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.kf-subs a.kf-subs-more { font-weight: 600; color: var(--accent); }
.kf-ptoggle { display: none; }
.kf-pbody { display: flex; flex-direction: column; gap: 16px; flex: 1; }

/* Tools */
.kf-band { margin-top: 88px; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kf-band > .kf-wrap { padding-top: 80px; padding-bottom: 80px; }
.kf-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; margin-bottom: 20px; }
.kf-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 16px; color: var(--text); transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .25s, box-shadow .25s; }
.kf-card:hover { transform: translateY(-4px); border-color: #B9CCC4; box-shadow: var(--kf-shadow); }
.kf-card h3 { margin: 0; font-family: var(--sans) !important; font-size: 20px; font-weight: 700 !important; }
.kf-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
.kf-card-h { display: flex; align-items: center; gap: 12px; }
.kf-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.kf-inline input { flex: 1 1 200px; min-width: 0; height: 46px; border: 1px solid #C9D5D0; border-radius: 11px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--text); background: #fff; }
.kf-inline input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20, 184, 166, .2); }
.kf-inline .kf-btn { background: var(--text); }
.kf-note { font-size: 13px; color: var(--muted); }
.kf-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.kf-tool { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; color: var(--text); transition: transform .25s, border-color .25s, box-shadow .25s; }
.kf-tool:hover { transform: translateY(-4px); border-color: #B9CCC4; box-shadow: var(--kf-shadow); }
.kf-tool .kf-ic { width: 42px; height: 42px; font-size: 17px; background: #F2F5F4; }
.kf-tool:hover .kf-ic { background: var(--accent); color: #fff; transform: rotate(-4deg); }
.kf-tool b { display: block; font-size: 16px; }
.kf-tool small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* Popular + audit */
.kf-split { display: flex; flex-wrap: wrap; gap: 32px; }
.kf-split > :first-child { flex: 999 1 560px; min-width: 0; }
.kf-split > :last-child { flex: 1 1 340px; min-width: 0; }
.kf-h2s { margin: 0 0 20px; font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--text); }
.kf-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.kf-list li + li { border-top: 1px solid #EEF2F0; }
.kf-list a { display: flex; gap: 18px; padding: 18px 22px; align-items: flex-start; transition: background .15s, padding .15s; }
.kf-list a:hover { background: #F2F7F5; padding-left: 26px; }
.kf-rank { font-family: var(--serif); font-weight: 700; color: var(--mint); font-size: 22px; width: 30px; line-height: 1; flex: none; }
.kf-list-t { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.kf-list-t b { font-weight: 600; font-size: 16px; color: var(--text); }
.kf-list-t small { font-size: 14px; color: var(--muted); line-height: 1.45; }
.kf-views { flex: none; font-size: 12px; font-weight: 600; color: var(--body); background: #F2F5F4; padding: 4px 8px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kf-audit { border-radius: 18px; overflow: hidden; background: var(--dark); color: #D7E6E0; position: relative; }
.kf-audit-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 100% 40px; }
.kf-audit-h { position: relative; padding: 16px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.kf-audit-h > span { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.kf-audit-h b { color: #fff; font-variant-numeric: tabular-nums; }
.kf-audit-list { position: relative; list-style: none; margin: 0; padding: 4px 0; }
.kf-audit-scan { position: absolute; left: 0; right: 0; height: 40px; top: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(20, 184, 166, 0), rgba(20, 184, 166, .14), rgba(20, 184, 166, 0)); }
.kf-audit-list li { padding: 14px 20px; display: flex; gap: 12px; }
.kf-audit-list li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
.kf-sev { flex: none; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; font-weight: 700; padding: 3px 7px; border-radius: 5px; height: fit-content; text-transform: uppercase; letter-spacing: .04em; }
.kf-sev--critical { background: #F7B2A8; color: #4A0F06; } .kf-sev--high { background: #F3C77B; color: #3B1D02; }
.kf-sev--medium { background: #F3E39B; color: #3A3002; } .kf-sev--low { background: #A9C8F0; color: #0B2547; } .kf-sev--info { background: #8FE0C0; color: #062A1E; }
.kf-audit-list b { display: block; font-weight: 600; font-size: 15px; color: #fff; }
.kf-audit-list small { display: block; margin-top: 3px; font-size: 13px; color: #B7CEC5; line-height: 1.5; }
.kf-audit-f { position: relative; padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.kf-audit-f .kf-btn { width: 100%; }

/* Trust */
.kf-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.kf-trust > div { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: #fff; display: flex; flex-direction: column; gap: 12px; transition: transform .25s, border-color .25s, box-shadow .25s; }
.kf-trust > div:hover { transform: translateY(-4px); border-color: #B9CCC4; box-shadow: var(--kf-shadow); }
.kf-trust > div:hover .kf-ic { background: var(--accent); color: #fff; transform: rotate(-4deg); }
.kf-trust h3 { margin: 0; font-family: var(--sans) !important; font-size: 17px; font-weight: 700 !important; }
.kf-trust p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }

/* CTA band */
.kf-cta { position: relative; overflow: hidden; border-radius: 24px; background: var(--dark); color: #fff; padding: 56px 48px; display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; margin: 96px 0; }
.kf-cta .kf-audit-lines { opacity: 1; }
.kf-cta-margin { position: absolute; top: 0; bottom: 0; left: 40px; width: 1px; background: rgba(20, 184, 166, .35); }
.kf-cta h2 { margin: 0; font-family: var(--serif); font-weight: 700 !important; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; color: #fff !important; }
.kf-cta p { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: #B7CEC5; }
.kf-cta > .kf-cta-copy, .kf-cta > .kf-cta-btns { position: relative; }
.kf-cta-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.kf-cta .kf-net--c { right: 24px; top: 12px; width: 220px; height: 160px; opacity: .7; }

/* Results / topic pages keep their content; the hero above them is compact */
.kf-results { padding-top: 32px; }

/* ---------- 9. Motion (all of it switches off with reduced motion) ---------- */
@keyframes kf-spin { to { --kf-a: 360deg; } }
@keyframes kf-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes kf-sweep { 0% { left: -60%; } 60%, 100% { left: 130%; } }
@keyframes kf-scan { from { top: -140px; } to { top: 100%; } }
@keyframes kf-scan2 { 0% { top: 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes kf-dash { to { stroke-dashoffset: -40; } }
@keyframes kf-node { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes kf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kf-marq { to { transform: translateX(-50%); } }
@keyframes kf-blink { 50% { opacity: 0; } }
@keyframes kf-think { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes kf-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes kf-bar { from { transform: scaleX(0); } }
@keyframes kf-ping { 0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, .6); } 70% { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); } }
@keyframes kf-glow { 0%, 100% { box-shadow: 0 10px 24px rgba(14, 94, 75, .35), 0 0 0 0 rgba(20, 184, 166, .45); } 50% { box-shadow: 0 10px 24px rgba(14, 94, 75, .35), 0 0 0 8px rgba(20, 184, 166, 0); } }
@keyframes kf-row { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .kf-ask-box, .kf-demo, body.theme-dark .kb-answer, body.theme-dark .kb-cmd-panel { animation: kf-spin 6s linear infinite; }
  body.theme-dark .kb-tab-orb { animation: kf-spin 4s linear infinite, kf-glow 2.8s ease-in-out infinite !important; }
  .kf-shine::after { animation: kf-sweep 3.6s ease-in-out infinite; }
  .kf-scan { animation: kf-scan 7s linear infinite; }
  .kf-audit-scan { animation: kf-scan2 3.4s ease-in-out infinite; }
  .kf-net line { animation: kf-dash 3s linear infinite; }
  .kf-net circle { animation: kf-node 3s ease-in-out infinite; }
  .kf-net circle:nth-of-type(2n) { animation-delay: -1s; } .kf-net circle:nth-of-type(3n) { animation-delay: -2s; }
  .kf-float { animation: kf-float 6s ease-in-out infinite; } .kf-float--b { animation-delay: -2s; }
  .kf-track { animation: kf-marq 48s linear infinite; }
  .kf-caret { animation: kf-blink 1s steps(1) infinite; }
  .kf-think span i { animation: kf-think 1.2s infinite; } .kf-think span i:nth-child(2) { animation-delay: .15s; } .kf-think span i:nth-child(3) { animation-delay: .3s; }
  .kf-pop { animation: kf-pop .45s cubic-bezier(.2, .7, .2, 1) both; }
  .kf-live, .kf-tag i, .kf-eyebrow i.kf-dot { animation: kf-ping 2s infinite; }
  .kf-rise { animation: kf-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .kf-d1 { animation-delay: .08s; } .kf-d2 { animation-delay: .16s; } .kf-d3 { animation-delay: .26s; } .kf-d4 { animation-delay: .38s; } .kf-d5 { animation-delay: .5s; }
  .kf-u svg path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: kf-u 1.4s cubic-bezier(.2, .7, .2, 1) .4s forwards; }
  .kf-bar i { animation: kf-bar 1.6s cubic-bezier(.2, .7, .2, 1) both .3s; }
  .kf-audit-list li { animation: kf-row .5s ease both; }
  .kf-audit-list li:nth-child(2) { animation-delay: .1s; } .kf-audit-list li:nth-child(3) { animation-delay: .2s; } .kf-audit-list li:nth-child(4) { animation-delay: .3s; } .kf-audit-list li:nth-child(5) { animation-delay: .4s; } .kf-audit-list li:nth-child(6) { animation-delay: .5s; }
  /* Fast scroll reveal (content is never hidden without JavaScript: kb.css only hides .kb-reveal under html.js) */
  html.js body.theme-dark .kb-reveal { transition-duration: .45s !important; transform: translateY(16px); }
}
@keyframes kf-u { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .kf-track { flex-wrap: wrap; width: auto; } }

/* ---------- 10. Phones and tablets ---------- */
@media (max-width: 760px) {
  .kf-wrap { padding-left: 16px; padding-right: 16px; }
  .kf-hero-grid { padding-top: 36px; padding-bottom: 28px; gap: 32px; }
  .kf-float, .kf-net--a, .kf-net--b, .kf-cta .kf-net--c { display: none; }
  .kf-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .kf-chips::-webkit-scrollbar { display: none; }
  .kf-demo-body { min-height: 0; }
  .kf-stat { padding: 16px; } .kf-stat b { font-size: 24px; } .kf-stat--date b { font-size: 19px; padding-top: 4px; }
  .kf-stats { margin-bottom: 40px; }
  .kf-sec { padding-top: 64px; }
  .kf-band { margin-top: 64px; } .kf-band > .kf-wrap { padding-top: 56px; padding-bottom: 56px; }
  .kf-path { padding: 0; gap: 0; } .kf-path:hover { transform: none; box-shadow: none; }
  .kf-path-head, .kf-path h3 { display: none; }
  .kf-ptoggle { display: flex; width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; padding: 16px; align-items: center; gap: 14px; }
  .kf-ptoggle .kf-ic { width: 42px; height: 42px; font-size: 17px; }
  .kf-ptoggle b { display: block; font-size: 16px; color: var(--text); }
  .kf-ptoggle small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
  .kf-ptoggle > i:last-child { margin-left: auto; color: var(--muted); transition: transform .25s; }
  .kf-ptoggle[aria-expanded="true"] > i:last-child { transform: rotate(180deg); }
  .kf-pbody { display: none; padding: 0 16px 16px; }
  .kf-path.is-open .kf-pbody { display: flex; animation: kf-rise .3s ease both; }
  .kf-paths { gap: 12px; }
  .kf-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kf-tool { flex-direction: column; padding: 16px; gap: 10px; }
  .kf-card { padding: 20px; }
  .kf-list a { padding: 16px; gap: 12px; }
  .kf-views { display: none; }
  .kf-trust { gap: 12px; }
  .kf-trust > div { padding: 18px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
  .kf-trust > div p { flex-basis: 100%; }
  .kf-cta { padding: 36px 22px; border-radius: 18px; margin: 56px 0 40px; }
  .kf-h2s { font-size: 26px; }
}


/* Search bars on Library, Guides, GST Guide, HSN and Reference: same AI ring as the home ask box */
body.theme-dark .kb-search { border: 1.5px solid transparent !important; border-radius: 16px !important;
  background: linear-gradient(#fff, #fff) padding-box, var(--kf-ring) border-box !important; background-size: auto !important;
  box-shadow: 0 10px 30px rgba(16, 32, 26, .07), 0 0 28px -8px rgba(20, 184, 166, .4) !important; }
body.theme-dark .kb-search:focus-within { box-shadow: 0 0 0 4px rgba(20, 184, 166, .18), 0 14px 36px -10px rgba(14, 94, 75, .35) !important; }
body.theme-dark .kb-search input { font-family: var(--sans) !important; color: var(--text) !important; }
body.theme-dark .kb-search input::placeholder { font-family: var(--sans) !important; font-size: 1em !important; color: #6B7A74 !important; }
body.theme-dark .kb-search input:focus-visible { outline: none !important; }
body.theme-dark .kb-search .kb-search-ico { color: var(--accent) !important; }
body.theme-dark .kb-search > button, body.theme-dark .kb-search button[type="submit"] { background: var(--accent) !important; color: #fff !important; border-radius: 11px !important; animation: none !important; box-shadow: none !important; }
body.theme-dark .kb-search > button:hover { background: var(--accent-ink) !important; transform: translateY(-50%) !important; box-shadow: 0 8px 20px -6px rgba(14, 94, 75, .45) !important; }
@media (prefers-reduced-motion: no-preference) { body.theme-dark .kb-search { animation: kf-spin 6s linear infinite !important; } }
/* Orb on empty states: calm solid tile */
body.theme-dark .kb-orb::before { background: var(--kf-ring) !important; filter: none !important; }

/* Screen-reader-only label */
.kf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The ask box draws its own focus glow */
body.theme-dark .kf-ask-box input:focus-visible, body.theme-dark .kf-inline input:focus-visible { outline: none !important; }
body.theme-dark .kb-cmd-input input:focus-visible { outline: none !important; }

/* ==========================================================================
   11. Colour combination (v12.1): warm paper + mint and lavender glow,
       deep green to teal gradients. Same layout, colours only.
   ========================================================================== */
body.theme-dark { background: #F6F4EE; }
body.theme-dark .kb-aurora {
  display: block !important; position: fixed; inset: 0 0 auto 0; height: 80vh; z-index: -1 !important; pointer-events: none;
  background: var(--kf-aurora) !important; opacity: 1; filter: none; animation: none;
}
body.theme-dark .kb-aurora span { display: none; }
body.theme-dark .kb-topbar { background: rgba(250, 249, 245, .82) !important; }

/* Gradient words and figures */
body.theme-dark .kb-grad-text, .kf-u, .kf-rank {
  background: var(--teal-grad) !important; -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: #0E5E4B !important;
}
body.theme-dark .kb-topbar .kb-grad-text { background: none !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; }
.kf-u { padding-right: .04em; }

/* Hero sits on the paper with the mint + lavender glow */
.kf-hero { background: var(--kf-aurora), #F6F4EE; }
.kf-dots { background-image: radial-gradient(rgba(14, 94, 75, .14) 1px, transparent 1.2px); }

/* Primary buttons: deep green to teal */
.kf-btn, body.theme-dark .kb-app-btn, body.theme-dark .kb-topbar .kb-app-btn,
body.theme-dark .kb-search > button, body.theme-dark .kb-search button[type="submit"] {
  background: linear-gradient(120deg, #0E5E4B, #0F766E 55%, #14B8A6) !important;
}
.kf-btn:hover, body.theme-dark .kb-app-btn:hover, body.theme-dark .kb-search > button:hover {
  background: linear-gradient(120deg, #08402F, #0E5E4B 55%, #0F766E) !important;
  box-shadow: 0 10px 22px -8px rgba(20, 184, 166, .55) !important;
}
.kf-btn--light { background: #fff !important; color: #0B2A22 !important; }
.kf-btn--light:hover { background: #fff !important; }
.kf-btn--ghost, .kf-btn--ghost:hover { background: transparent !important; }
.kf-btn--ghost:hover { background: #fff !important; }
.kf-btn--ghost-d, .kf-btn--ghost-d:hover { background: transparent !important; }
.kf-btn--ghost-d:hover { background: rgba(255, 255, 255, .08) !important; }
.kf-inline .kf-btn { background: var(--text) !important; }

/* Icon tiles: soft mint-to-lavender, solid gradient on hover */
.kf-ic, body.theme-dark .kb-icon-tile { background: linear-gradient(135deg, #E1F3EF, #ECEBFA) !important; color: #0E5E4B !important; }
.kf-path:hover .kf-ic, .kf-card:hover .kf-ic, .kf-tool:hover .kf-ic, .kf-trust > div:hover .kf-ic,
body.theme-dark a.kb-card:hover .kb-icon-tile { background: linear-gradient(135deg, #0E5E4B, #14B8A6) !important; color: #fff !important; }
.kf-a-ico, body.theme-dark .kb-mini-orb, body.theme-dark .kb-cmd-ico.is-ai { background: linear-gradient(135deg, #0E5E4B, #0F766E 60%, #0E7490) !important; }
body.theme-dark .kb-logo, body.theme-dark .kb-topbar .kb-logo { background: linear-gradient(135deg, #0E5E4B, #0F766E 60%, #0E7490) !important; box-shadow: 0 0 0 1px rgba(20, 184, 166, .25), 0 6px 18px -6px rgba(20, 184, 166, .55) !important; }

/* Bars, dots and tags */
.kf-bar i { background: linear-gradient(90deg, #14B8A6, #06B6D4, #8B87E6); }
.kf-dots-nav button[aria-current="true"] span { background: linear-gradient(90deg, #0E5E4B, #14B8A6); }
.kf-eyebrow i.kf-dot { background: linear-gradient(135deg, #14B8A6, #8B87E6); }
.kf-float--a b { background: var(--lav-soft); color: #4F46E5; }
.kf-chip:hover, body.theme-dark .kb-chip:hover { border-color: #14B8A6 !important; background: #E6F6F3 !important; }
.kf-track a { background: rgba(255, 255, 255, .75); }

/* Tools band: a gentle mint-to-lavender wash instead of flat grey */
.kf-band { background: linear-gradient(180deg, #EEF6F3, #F1F0FA); border-color: #E4E0D5; }
.kf-stats { box-shadow: 0 12px 30px -16px rgba(99, 102, 241, .18); }

/* Dark panels pick up the same glow */
.kf-cta { background: radial-gradient(45% 80% at 10% 0%, rgba(20, 184, 166, .28), transparent 70%), radial-gradient(40% 80% at 95% 10%, rgba(139, 135, 230, .30), transparent 70%), #0B2A22; }
.kf-audit { background: radial-gradient(70% 40% at 100% 0%, rgba(139, 135, 230, .22), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(20, 184, 166, .18), transparent 70%), #0B2A22; }
.kf-foot { background: radial-gradient(40% 60% at 0% 0%, rgba(20, 184, 166, .14), transparent 70%), radial-gradient(35% 60% at 100% 0%, rgba(139, 135, 230, .16), transparent 70%), #071F19; }

/* Phone tab bar */
body.theme-dark .kb-tab.is-active > i { background: linear-gradient(135deg, #E1F3EF, #ECEBFA) !important; }
body.theme-dark .kb-tab-orb { background: linear-gradient(135deg, #0E5E4B, #0F766E 55%, #14B8A6) padding-box, conic-gradient(from var(--kf-a), #06B6D4, #14B8A6, #FFFFFF, #8B87E6, #06B6D4) border-box !important; }

/* ==========================================================================
   12. v12.2 — easier to use, more futuristic
   ========================================================================== */

/* Moving gradient mesh behind the hero */
.kf-hero { background: #F6F4EE; }
.kf-mesh { position: absolute; inset: -20% -10%; pointer-events: none; filter: blur(60px); opacity: .9;
  background:
    radial-gradient(32% 40% at 15% 25%, rgba(20, 184, 166, .32), transparent 70%),
    radial-gradient(30% 40% at 85% 15%, rgba(139, 135, 230, .38), transparent 70%),
    radial-gradient(24% 30% at 60% 70%, rgba(6, 182, 212, .14), transparent 70%); }
.kf-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(14, 94, 75, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 94, 75, .07) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 75%); }
.kf-ledger, .kf-dots { display: none; }
@keyframes kf-mesh { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0); } 50% { transform: translate3d(3%, 4%, 0) rotate(3deg); } }

/* Mode switch above the ask box */
.kf-modes { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 14px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(14, 94, 75, .12); align-self: flex-start; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kf-mode { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--body); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.kf-mode i { font-size: 13px; opacity: .8; }
.kf-mode:hover { color: var(--accent-ink); background: rgba(20, 184, 166, .1); }
.kf-mode.is-on { color: #fff; background: linear-gradient(120deg, #0E5E4B, #0F766E 55%, #14B8A6); box-shadow: 0 6px 16px -6px rgba(20, 184, 166, .6); }
.kf-mode.is-on i { opacity: 1; }

/* Ask box: glass, bigger, with voice + "/" hint */
.kf-ask-box { background: linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, .92)) padding-box, var(--kf-ring) border-box; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 7px; border-radius: 18px; }
.kf-ask-box input { height: 54px; font-size: 17px; }
.kf-mic { flex: none; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--line-2); background: #fff; color: var(--accent); cursor: pointer; display: grid; place-items: center; font-size: 15px; transition: border-color .2s, background .2s; }
.kf-mic:hover { border-color: var(--accent); background: var(--accent-soft); }
.kf-mic.is-live { color: #fff; background: #DC2626; border-color: #DC2626; animation: kf-ping 1.2s infinite; }
.kf-slash { font-family: var(--mono); font-size: 12px; padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--muted); background: #fff; margin-right: 2px; }
.kf-ask-box:focus-within .kf-slash { display: none; }
.kf-detect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 2px; font-size: 14px; color: var(--body); animation: kf-rise .3s ease both; }
.kf-detect b { color: var(--accent-ink); }
.kf-recent { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kf-recent > span { font-size: 13px; color: var(--muted); margin-right: 4px; }

/* Glass cards with a pointer-following spotlight */
.kf-path, .kf-card, .kf-tool, .kf-trust > div, .kf-stats, .kf-demo { position: relative; }
.kf-path::after, .kf-card::after, .kf-tool::after, .kf-trust > div::after, .kf-stat::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 184, 166, .16), rgba(139, 135, 230, .08) 45%, transparent 70%); }
.kf-path:hover::after, .kf-card:hover::after, .kf-tool:hover::after, .kf-trust > div:hover::after { opacity: 1; }
.kf-path, .kf-card, .kf-tool, .kf-trust > div { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kf-path:hover, .kf-card:hover, .kf-tool:hover, .kf-trust > div:hover { border-color: rgba(20, 184, 166, .5); box-shadow: 0 20px 44px -20px rgba(14, 94, 75, .35), 0 0 0 1px rgba(20, 184, 166, .15); }
.kf-path > *, .kf-card > *, .kf-tool > *, .kf-trust > div > * { position: relative; z-index: 1; }
.kf-stat { position: relative; overflow: hidden; }
.kf-stat::after { background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 184, 166, .14), transparent 70%); }

/* Numbers get a gradient and a soft pulse line */
.kf-stat b { background: linear-gradient(110deg, #0E5E4B, #0F766E 60%, #14B8A6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kf-stat::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #14B8A6, #06B6D4, #8B87E6); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.kf-stat:hover::before { transform: scaleX(1); }

/* Headline shimmer */
.kf-h1 .kf-u { background-image: linear-gradient(110deg, #0E5E4B 0%, #14B8A6 35%, #06B6D4 50%, #8B87E6 65%, #0E5E4B 100%) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; }
.kf-detect[hidden], .kf-recent[hidden], .kf-mic[hidden] { display: none !important; }

/* Floating dock (desktop) */
.kf-dock { position: fixed; left: 0; right: 0; top: 72px; z-index: 35; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; transform: translateY(-16px); opacity: 0; transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.kf-dock.is-on { transform: none; opacity: 1; pointer-events: auto; }
.kf-dock-in { width: 100%; max-width: 640px; display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 16px; border-radius: 16px; border: 1.5px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, .92)) padding-box, var(--kf-ring) border-box; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px -20px rgba(14, 94, 75, .45), 0 0 30px -10px rgba(139, 135, 230, .4); }
.kf-dock-in i { color: var(--accent); }
.kf-dock-in input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; height: 44px; color: var(--text); }
.kf-dock-in input:focus-visible { outline: none !important; }
@media (max-width: 1023px) { .kf-dock { display: none; } }

/* Demo card: glass + live status line */
.kf-demo { background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .96)) padding-box, var(--kf-ring) border-box; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.kf-demo-top { background: rgba(250, 252, 251, .8); }

@media (prefers-reduced-motion: no-preference) {
  .kf-mesh { animation: kf-mesh 18s ease-in-out infinite; }
  .kf-ask-box, .kf-dock-in { animation: kf-spin 6s linear infinite; }
  .kf-h1 .kf-u { animation: kf-flow 7s ease-in-out infinite alternate; }
}
@keyframes kf-flow { to { background-position: 100% 0; } }
@media (max-width: 760px) {
  .kf-modes { width: 100%; align-self: stretch; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .kf-modes::-webkit-scrollbar { display: none; }
  .kf-mode { flex: none; padding: 0 12px; font-size: 13px; }
  .kf-slash { display: none; }
  .kf-ask-box input { height: 48px; font-size: 16px; }
  .kf-ask-box .kf-btn--lg { padding: 0 14px; min-height: 46px; }
  .kf-ask-box .kf-btn--lg span { display: none; }
  .kf-ask-box .kf-btn--lg i { transform: none !important; }
}

/* ==========================================================================
   13. v12.3 — dark "command deck" hero, brighter page below
   ========================================================================== */
.kf-hero { background: #071F19; color: #E6EDE9; border-bottom: 0; }
.kf-mesh { opacity: 1; filter: blur(70px);
  background:
    radial-gradient(34% 44% at 12% 30%, rgba(20, 184, 166, .55), transparent 70%),
    radial-gradient(30% 42% at 88% 12%, rgba(139, 135, 230, .55), transparent 70%),
    radial-gradient(26% 34% at 55% 85%, rgba(6, 182, 212, .28), transparent 70%); }
.kf-grid { background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); }
.kf-margin { background: rgba(20, 184, 166, .25); }
.kf-scan { background: linear-gradient(to bottom, transparent, rgba(20, 184, 166, .16), transparent); }
/* Stars */
.kf-stars { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #A7F3EB, transparent),
    radial-gradient(1px 1px at 40% 80%, #fff, transparent), radial-gradient(1.2px 1.2px at 55% 45%, #C7C5F5, transparent), radial-gradient(1px 1px at 10% 75%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 88%, #fff, transparent), radial-gradient(1px 1px at 30% 10%, #A7F3EB, transparent);
  background-size: 100% 100%; }
@keyframes kf-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

.kf-pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #D7E6E0; }
.kf-pill > span { background: rgba(20, 184, 166, .25); color: #5EEAD4; }
.kf-h1 { color: #fff; }
.kf-h1 .kf-u { background-image: linear-gradient(110deg, #5EEAD4 0%, #14B8A6 30%, #67E8F9 50%, #A5B4FC 70%, #5EEAD4 100%) !important; }
.kf-u svg path { stroke: #5EEAD4 !important; }
.kf-lead { color: #B7CEC5; }
.kf-modes { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.kf-mode { color: #B7CEC5; }
.kf-mode:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.kf-mode.is-on { background: linear-gradient(120deg, #14B8A6, #06B6D4); color: #06201C; box-shadow: 0 8px 20px -8px rgba(20, 184, 166, .8); }
.kf-ask label { color: #D7E6E0; }
.kf-ask-box { background: linear-gradient(rgba(255, 255, 255, .97), rgba(255, 255, 255, .97)) padding-box, var(--kf-ring) border-box; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6), 0 0 50px -10px rgba(20, 184, 166, .55); }
.kf-ask-box:focus-within { box-shadow: 0 0 0 5px rgba(20, 184, 166, .25), 0 30px 70px -20px rgba(0, 0, 0, .6), 0 0 60px -8px rgba(20, 184, 166, .7); }
.kf-ask .kf-btn { background: linear-gradient(120deg, #0E5E4B, #14B8A6) !important; }
.kf-chips > span, .kf-recent > span { color: #8FB3A6; }
.kf-chip, .kf-recent .kf-chip, .kf-detect .kf-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #D7E6E0; }
.kf-chip:hover { background: rgba(20, 184, 166, .18); border-color: #14B8A6; color: #fff; }
.kf-detect { color: #B7CEC5; } .kf-detect b { color: #5EEAD4; }
.kf-float { background: rgba(11, 42, 34, .85); border-color: rgba(255, 255, 255, .14); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.kf-float--a b { background: rgba(139, 135, 230, .25); color: #C7C5F5; } .kf-float--b b { background: rgba(243, 199, 123, .2); color: #F3C77B; }
.kf-net line { stroke: #5EEAD4; opacity: .5; } .kf-net circle { fill: #5EEAD4; }
.kf-demo { background: linear-gradient(rgba(255, 255, 255, .96), rgba(255, 255, 255, .98)) padding-box, var(--kf-ring) border-box; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7), 0 0 0 8px rgba(20, 184, 166, .06), 0 0 70px -10px rgba(139, 135, 230, .45); }
.kf-track a { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #D7E6E0; }
.kf-track a:hover { background: rgba(20, 184, 166, .2); color: #fff; }
.kf-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.kf-stats { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kf-stat { background: rgba(255, 255, 255, .04); }
.kf-stat b { background: linear-gradient(110deg, #fff, #A7F3EB 60%, #C7C5F5); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kf-stat span { color: #B7CEC5; }
.kf-stat::after { background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(20, 184, 166, .22), transparent 70%); }
.kf-hero--compact { background: #071F19; }
.kf-hero--compact .kf-ask label { color: #D7E6E0; }
body.theme-dark .kf-ask .kb-suggest { background: #fff !important; }
/* Soft fade from the dark hero into the paper page */
.kf-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(20, 184, 166, .6), rgba(139, 135, 230, .6), transparent); }

/* Brighter page below: bolder section headings with gradient accents, cards with a gradient edge */
.kf-h2, .kf-h2s { font-size: clamp(32px, 3.4vw, 44px); }
.kf-h2s { font-size: 32px; }
.kf-eyebrow { color: #0F766E; }
.kf-path, .kf-card, .kf-tool, .kf-trust > div { border-top: 3px solid transparent; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)) padding-box, linear-gradient(90deg, #14B8A6, #06B6D4, #8B87E6) border-box; border-color: var(--line) !important; border-top-color: transparent !important; }
.kf-path:hover, .kf-card:hover, .kf-tool:hover, .kf-trust > div:hover { border-color: rgba(20, 184, 166, .5) !important; border-top-color: transparent !important; }
.kf-path .kf-ic, .kf-card .kf-ic, .kf-tool .kf-ic, .kf-trust .kf-ic { background: linear-gradient(135deg, #0E5E4B, #14B8A6 70%, #06B6D4) !important; color: #fff !important; box-shadow: 0 8px 18px -8px rgba(20, 184, 166, .7); }
.kf-path:hover .kf-ic, .kf-card:hover .kf-ic, .kf-tool:hover .kf-ic, .kf-trust > div:hover .kf-ic { background: linear-gradient(135deg, #14B8A6, #8B87E6) !important; }
.kf-band { background: linear-gradient(180deg, #F6F4EE, #EEF6F3 40%, #F1F0FA); }
.kf-rank { font-size: 26px; }
.kf-audit, .kf-cta { box-shadow: 0 40px 80px -40px rgba(7, 31, 25, .7), 0 0 60px -20px rgba(139, 135, 230, .35); }
.kf-audit-h > span, .kf-tag { color: #5EEAD4; }

@media (prefers-reduced-motion: no-preference) { .kf-stars { animation: kf-twinkle 4s ease-in-out infinite; } }
@media (max-width: 760px) {
  .kf-hero-grid { padding-top: 32px; }
  .kf-stats { background: rgba(255, 255, 255, .08); }
}
.kf-err { color: #FCA5A5; }
body.theme-dark .kf-hero .kf-h1 { color: #fff !important; }
body.theme-dark .kf-hero h2, body.theme-dark .kf-hero h3 { color: #fff; }
.kf-mesh { filter: blur(50px); inset: -10% -5%;
  background:
    radial-gradient(38% 50% at 10% 30%, rgba(20, 184, 166, .75), transparent 70%),
    radial-gradient(34% 48% at 90% 10%, rgba(139, 135, 230, .8), transparent 70%),
    radial-gradient(30% 40% at 60% 90%, rgba(6, 182, 212, .45), transparent 70%); }
.kf-float--b { bottom: auto; top: 44%; left: -44px; }
/* Atulya AI name + tagline */
.kf-pill b { color: #fff; font-weight: 700; }
.kf-tagline { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0F766E; padding: 2px 7px; border-radius: 5px; background: var(--accent-soft); vertical-align: 1px; }

/* ==========================================================================
   14. v12.4 — light, cool palette (ice white, sky, mint, soft lavender)
   Later rules win: this section replaces the dark hero from section 13.
   ========================================================================== */
:root {
  --bg: #F7FBFC; --bg-soft: #EEF6F9; --panel-2: #F4F9FB;
  --line: #DCE8EC; --line-2: #C9DAE0;
  --text: #0F2430; --body: #3B505B; --muted: #5F7580;
  --accent: #0E8A86; --accent-ink: #0B6B68; --accent-soft: #E3F5F4; --mint: #2DD4BF; --sky: #38BDF8;
  --dark: #0F3A47; --darker: #0B2E38;
  --kf-ring: conic-gradient(from var(--kf-a), #2DD4BF, #0E8A86 22%, #38BDF8 45%, #A5B4FC 65%, #0E8A86 82%, #2DD4BF);
  --kf-shadow: 0 18px 40px -22px rgba(15, 58, 71, .25);
}
body.theme-dark { background: #F7FBFC; color: var(--text); }
body.theme-dark .kb-aurora { background: radial-gradient(50% 70% at 8% 0%, rgba(45, 212, 191, .22), transparent 70%), radial-gradient(45% 70% at 92% 0%, rgba(165, 180, 252, .28), transparent 70%), radial-gradient(40% 50% at 50% 0%, rgba(56, 189, 248, .14), transparent 70%) !important; }
body.theme-dark .kb-topbar { background: rgba(255, 255, 255, .82) !important; border-bottom-color: var(--line) !important; }
.kf-util { background: #0F3A47; }

/* Hero back to light, with a cool icy glow */
.kf-hero, .kf-hero--compact { background: linear-gradient(180deg, #F3FAFC, #FFFFFF); color: var(--text); border-bottom: 1px solid var(--line); }
.kf-hero::after { display: none; }
.kf-mesh { filter: blur(70px); opacity: 1;
  background:
    radial-gradient(36% 50% at 10% 25%, rgba(45, 212, 191, .45), transparent 70%),
    radial-gradient(34% 48% at 90% 10%, rgba(165, 180, 252, .55), transparent 70%),
    radial-gradient(28% 40% at 55% 90%, rgba(56, 189, 248, .30), transparent 70%); }
.kf-stars { display: none; }
.kf-grid { background-image: linear-gradient(rgba(14, 138, 134, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 138, 134, .08) 1px, transparent 1px); }
.kf-margin { background: rgba(14, 138, 134, .18); }
.kf-scan { background: linear-gradient(to bottom, transparent, rgba(56, 189, 248, .14), transparent); }
.kf-pill { background: #fff; border-color: #CBE7EE; color: var(--accent-ink); }
.kf-pill b { color: var(--text); }
.kf-pill > span { background: var(--accent-soft); color: var(--accent); }
body.theme-dark .kf-hero .kf-h1 { color: var(--text) !important; }
.kf-h1 .kf-u { background-image: linear-gradient(110deg, #0E8A86 0%, #2DD4BF 30%, #38BDF8 55%, #818CF8 75%, #0E8A86 100%) !important; }
.kf-u svg path { stroke: #2DD4BF !important; }
.kf-lead { color: var(--body); }
.kf-modes { background: rgba(255, 255, 255, .85); border-color: #CBE7EE; }
.kf-mode { color: var(--body); }
.kf-mode:hover { color: var(--accent-ink); background: var(--accent-soft); }
.kf-mode.is-on { background: linear-gradient(120deg, #0E8A86, #2DD4BF); color: #fff; box-shadow: 0 8px 20px -8px rgba(14, 138, 134, .6); }
.kf-ask label { color: var(--text); }
.kf-ask-box { background: linear-gradient(#fff, #fff) padding-box, var(--kf-ring) border-box; box-shadow: 0 16px 40px -16px rgba(15, 58, 71, .25), 0 0 40px -10px rgba(45, 212, 191, .45); }
.kf-ask-box:focus-within { box-shadow: 0 0 0 5px rgba(45, 212, 191, .2), 0 16px 40px -16px rgba(15, 58, 71, .25), 0 0 50px -8px rgba(56, 189, 248, .5); }
.kf-ask .kf-btn, .kf-btn, body.theme-dark .kb-app-btn, body.theme-dark .kb-topbar .kb-app-btn, body.theme-dark .kb-search > button, body.theme-dark .kb-search button[type="submit"] { background: linear-gradient(120deg, #0E8A86, #14B8A6 60%, #2DD4BF) !important; }
.kf-btn:hover, body.theme-dark .kb-app-btn:hover, body.theme-dark .kb-search > button:hover { background: linear-gradient(120deg, #0B6B68, #0E8A86 60%, #14B8A6) !important; box-shadow: 0 10px 22px -8px rgba(14, 138, 134, .55) !important; }
.kf-btn--light { background: #fff !important; color: var(--dark) !important; }
.kf-btn--ghost, .kf-btn--ghost:hover { background: transparent !important; color: var(--text) !important; }
.kf-btn--ghost:hover { background: #fff !important; }
.kf-btn--ghost-d, .kf-btn--ghost-d:hover { background: transparent !important; }
.kf-inline .kf-btn { background: var(--text) !important; }
.kf-chips > span, .kf-recent > span { color: var(--muted); }
.kf-chip, .kf-recent .kf-chip, .kf-detect .kf-chip { background: #fff; border-color: var(--line-2); color: var(--body); }
.kf-chip:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.kf-detect { color: var(--body); } .kf-detect b { color: var(--accent-ink); } .kf-err { color: #B91C1C; }
.kf-float { background: #fff; border-color: var(--line); color: var(--text); }
.kf-float--a b { background: #EEF2FF; color: #4F46E5; } .kf-float--b b { background: #FFF4E0; color: #9A5B00; }
.kf-net line { stroke: #2DD4BF; opacity: .6; } .kf-net circle { fill: #2DD4BF; }
.kf-demo { background: linear-gradient(#fff, #fff) padding-box, var(--kf-ring) border-box; box-shadow: 0 30px 70px -24px rgba(15, 58, 71, .3), 0 0 0 8px rgba(45, 212, 191, .06), 0 0 60px -10px rgba(165, 180, 252, .45); }
.kf-demo-top { background: #F4F9FB; }
.kf-tag { color: var(--accent-ink); } .kf-tag i { background: var(--mint); }
.kf-a-ico, body.theme-dark .kb-mini-orb, body.theme-dark .kb-cmd-ico.is-ai, body.theme-dark .kb-logo, body.theme-dark .kb-topbar .kb-logo { background: linear-gradient(135deg, #0E8A86, #14B8A6 60%, #38BDF8) !important; box-shadow: 0 6px 18px -6px rgba(45, 212, 191, .55) !important; }
.kf-track a { background: rgba(255, 255, 255, .85); border-color: var(--line-2); color: var(--body); }
.kf-track a:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.kf-stats { background: var(--line); border-color: var(--line); box-shadow: 0 16px 40px -24px rgba(15, 58, 71, .3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.kf-stat { background: #fff; }
.kf-stat b { background: linear-gradient(110deg, #0F2430, #0E8A86 70%, #38BDF8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kf-stat span { color: var(--muted); }
.kf-stat::after { background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 212, 191, .18), transparent 70%); }
.kf-stat::before { background: linear-gradient(90deg, #2DD4BF, #38BDF8, #A5B4FC); }

/* Page below: cool whites and teal/sky accents */
.kf-eyebrow { color: var(--accent-ink); } .kf-eyebrow i.kf-dot { background: linear-gradient(135deg, #2DD4BF, #818CF8); }
.kf-path, .kf-card, .kf-tool, .kf-trust > div { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #2DD4BF, #38BDF8, #A5B4FC) border-box; border-color: var(--line) !important; border-top-color: transparent !important; }
.kf-path:hover, .kf-card:hover, .kf-tool:hover, .kf-trust > div:hover { border-color: rgba(45, 212, 191, .55) !important; border-top-color: transparent !important; box-shadow: 0 20px 44px -20px rgba(15, 58, 71, .3), 0 0 0 1px rgba(45, 212, 191, .15); }
.kf-path::after, .kf-card::after, .kf-tool::after, .kf-trust > div::after { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 212, 191, .16), rgba(165, 180, 252, .10) 45%, transparent 70%); }
.kf-path .kf-ic, .kf-card .kf-ic, .kf-tool .kf-ic, .kf-trust .kf-ic, .kf-ic, body.theme-dark .kb-icon-tile { background: linear-gradient(135deg, #E3F5F4, #E8F3FF) !important; color: var(--accent-ink) !important; box-shadow: none; }
.kf-path:hover .kf-ic, .kf-card:hover .kf-ic, .kf-tool:hover .kf-ic, .kf-trust > div:hover .kf-ic, body.theme-dark a.kb-card:hover .kb-icon-tile { background: linear-gradient(135deg, #0E8A86, #38BDF8) !important; color: #fff !important; }
.kf-bar i { background: linear-gradient(90deg, #2DD4BF, #38BDF8, #A5B4FC); }
.kf-dots-nav button[aria-current="true"] span { background: linear-gradient(90deg, #0E8A86, #2DD4BF); }
.kf-subs a:hover { background: #EEF7F9; }
.kf-list a:hover { background: #EEF7F9; }
.kf-rank { background: linear-gradient(110deg, #0E8A86, #38BDF8) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.kf-views { background: #EEF7F9; }
.kf-band { background: linear-gradient(180deg, #F7FBFC, #ECF6F9 40%, #EFF1FC); border-color: var(--line); }
.kf-sev--info { background: #99F6E4; color: #0B4A44; } .kf-sev--low { background: #BAE6FD; color: #0C3B57; }
.kf-audit { background: radial-gradient(70% 40% at 100% 0%, rgba(165, 180, 252, .28), transparent 70%), radial-gradient(60% 40% at 0% 100%, rgba(45, 212, 191, .22), transparent 70%), #0F3A47; box-shadow: 0 30px 60px -30px rgba(15, 58, 71, .6); }
.kf-audit-h > span { color: #5EEAD4; }
.kf-cta { background: radial-gradient(45% 80% at 10% 0%, rgba(45, 212, 191, .32), transparent 70%), radial-gradient(40% 80% at 95% 10%, rgba(165, 180, 252, .36), transparent 70%), #0F3A47; box-shadow: 0 30px 60px -30px rgba(15, 58, 71, .6); }
.kf-cta-margin { background: rgba(45, 212, 191, .4); }
.kf-foot { background: radial-gradient(40% 60% at 0% 0%, rgba(45, 212, 191, .16), transparent 70%), radial-gradient(35% 60% at 100% 0%, rgba(165, 180, 252, .2), transparent 70%), #0B2E38; }
.kf-foot-cols h4 { color: #7FB8C9; } .kf-foot-brand p, .kf-foot-bot { color: #B9D3DC; } .kf-foot-cols a { color: #DCEBF0; }
.kf-foot-warn { color: #F6D58F; }
.kf-tagline { color: var(--accent-ink); background: var(--accent-soft); }
.kf-dock-in { background: linear-gradient(#fff, #fff) padding-box, var(--kf-ring) border-box; box-shadow: 0 20px 50px -20px rgba(15, 58, 71, .4), 0 0 30px -10px rgba(165, 180, 252, .45); }
body.theme-dark .kb-tab.is-active > i { background: linear-gradient(135deg, #E3F5F4, #E8F3FF) !important; }
body.theme-dark .kb-tab-orb { background: linear-gradient(135deg, #0E8A86, #14B8A6 55%, #2DD4BF) padding-box, conic-gradient(from var(--kf-a), #38BDF8, #2DD4BF, #FFFFFF, #A5B4FC, #38BDF8) border-box !important; box-shadow: 0 10px 24px rgba(14, 138, 134, .35) !important; }
body.theme-dark .kb-search > button:hover { transform: translateY(-50%) !important; }
body.theme-dark .kb-grad-text { background-image: linear-gradient(110deg, #0E8A86, #2DD4BF 55%, #38BDF8) !important; -webkit-background-clip: text !important; background-clip: text !important; }
body.theme-dark .kb-topbar .kb-grad-text { background-image: none !important; }
body.theme-dark .kb-topbar .kb-nav::after { background: var(--accent); }
body.theme-dark .kb-topbar .kb-nav.is-active { color: var(--accent-ink) !important; }
body.theme-dark .kb-chip.is-on { background: var(--accent) !important; border-color: var(--accent) !important; }
body.theme-dark .kb-answer-head { background: #F4F9FB; }
@media (max-width: 760px) { .kf-stats { background: var(--line); } }