* {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

:root {
	--ki-primary: #0A5A94;
	--ki-dark: #111827;
	--ki-accent: #FFC107;
	--ki-light: #F3F9FF;
	--ki-text: #111827;
	--ki-muted: #6B7280;
	--ki-border: #E5E7EB;
	--ki-white: #fff
}

body {
	font-family: 'Poppins', system-ui, sans-serif;
	color: var(--ki-text);
	background: var(--ki-white);
	font-size: 15px
}

a {
	text-decoration: none;
	color: inherit
}

.ki-wrap {
	margin: 0 auto;
	max-width: 1300px;
}


/* HERO */
.ki-hero {
	background: var(--ki-dark);
	position: relative;
	overflow: hidden
}

.ki-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(10, 90, 148, 0.35) 0%, transparent 70%)
}

.ki-hero-inner {
	display: grid;
	/* Left column is fixed to the design width (610px) so the headline, copy,
	   stats row and logo chips wrap exactly like the design. The dashboard
	   takes the remaining width and is scaled to fit by homepagenew.js. */
	grid-template-columns: minmax(0, 610px) minmax(0, 1fr);
	align-items: center;
	gap: 60px;
	max-width: 1300px;
	margin: 0 auto;
	padding: 100px 0 96px;
	position: relative;
	z-index: 2
}

/* Keep the hero container the same width as the rest of the site (~1300px,
   centred) so it lines up with the header nav and every section below it. */

.ki-hero .ki-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
	color: #3B82F6;
	margin: 0 0 24px;
	max-width: none
}

.ki-hero-badge-dot {
	width: 6px;
	height: 6px;
	background: #22D3EE;
	border-radius: 50%;
	animation: pulse-dot 2s infinite
}

@keyframes pulse-dot {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: 0.4
	}
}

/* Design: 38px / 500 / 1.4 — breaks after "trusts". max-width holds that
   break even if the column is ever made wider. */
.ki-hero h1,
.ki-hero h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 24px;
    letter-spacing: normal;
}

.ki-hero h1 .highlight,
.ki-hero h2 .highlight {
	color: var(--ki-accent)
}

.ki-hero-sub {
	margin-bottom: 40px !important;
	color: rgba(255, 255, 255, 0.6);
	font-size: 16px;
	line-height: 1.4;
	max-width: 100%;
}

.ki-hero-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 0
}

.ki-btn-primary {
	background: var(--ki-primary);
	color: #fff;
	padding: 13px 28px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14.5px;
	border: 2px solid var(--ki-primary);
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-btn-primary:hover {
	background: var(--ki-primary);
	color: #fff;
	padding: 13px 28px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14.5px;
	border: 2px solid var(--ki-primary);
	transition: all 0.2s;
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-btn-outline {
	background: transparent;
	color: #fff;
	padding: 13px 28px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14.5px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-btn-outline:hover {
	background: transparent;
	color: #fff;
	padding: 13px 28px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14.5px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	display: inline-flex;
	align-items: center;
	gap: 8px
}

.ki-hero-social-proof {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5)
}

.ki-hero-social-proof strong {
	color: rgba(255, 255, 255, 0.85)
}

/* ── hero left column: aviation stats row + trusted-by logo strip ──
   Scoped under .ki-hero so these kh- classes can't leak into or be
   overridden by any other section on the page.
   Design: no vertical dividers between stats — a plain 40px gap, with a
   single hairline rule under the whole row. ── */
.ki-hero .kh-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	margin-bottom: 30px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ki-hero .kh-stat {
	display: flex;
	flex-direction: column;
}
.ki-hero .kh-stat-n {
	font-size: 30px;
	font-weight: 500;
	color: #fff;
	line-height: 1.2;
	letter-spacing: -0.5px;
}
.ki-hero .kh-stat-l {
	font-size: 13px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 6px;
}
.ki-hero .kh-trusted-label {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 14px;
}
.ki-hero .kh-logo-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin-bottom: 40px;
}
.ki-hero .kh-logo-chip {
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	color: #3B82F6;
	background: rgba(10, 90, 148, 0.14);
	border: 1px solid rgba(59, 130, 246, 0.28);
	border-radius: 4px;
	padding: 4px 11px;
	white-space: nowrap;
}

@media (max-width: 599px) {
	.ki-hero .kh-stats { gap: 14px 28px; }
	.ki-hero .kh-stat-n { font-size: 26px; }
}

@media (max-width: 980px) {
	.ki-hero-inner {
		padding: 50px 20px;
	}
	.ki-hero-inner {
    display: block;
	}

	.ki-wrap {
		margin: 0 auto;
		padding: 0 20px;
	}

	.revamherobutton-btn-primary-angled,
	.revamherobutton-custom-btn {
		padding: 10px !important;

	}

	.ki-btn-primary {

		padding: 10px !important;
	}

	.revamherobutton-custom-btn {
		font-size: 12px !important;
	}

	.ki-btn-primary {
		font-size: 12px !important;
	}

	.ki-hero-ctas {
		display: flex;
		gap: 14px;
		margin-bottom: 40px;
		flex-wrap: nowrap;
	}
}

.revamherobutton-custom-btn {
	background: transparent !important;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	position: relative;
	border-radius: 8px !important;
}

.revamherobutton-custom-btn::after {
	display: none !important;
}

.revamherobutton-custom-btn::before {
	display: none !important;
}

/* ==========================================================================
   KONNECT INSIGHTS — HERO DASHBOARD (aviation, matches reference image 2)
   Replaces the previous #ki-dash Figma-export CSS. Scoped under #ki-dash.
   The mock is drawn at a fixed 756×470 design size and scaled to the hero
   column by --kih-s (set by homepagenew.js; CSS breakpoints below cover the
   no-JS / tablet / mobile cases). No other section is affected.
   ========================================================================== */
.ki-hero-visual { min-width: 0 !important; }

/* ==========================================================================
   HERO DASHBOARD — defensive reset
   Neutralises the previous Figma dashboard CSS (absolute-positioned cards)
   if that block is still present earlier in homecss.css. Because this rule
   set is later in source order and equal specificity, it wins. That means
   you can simply PASTE THIS WHOLE FILE AT THE END of homecss.css — no need
   to hunt down and delete the old block.
   ========================================================================== */
#ki-dash .kih-app,
#ki-dash .kih-body,
#ki-dash .kih-main,
#ki-dash .kih-topbar,
#ki-dash .kih-kpi,
#ki-dash .kih-nav-item,
#ki-dash .kih-card {
	position: static !important;
	left: auto !important; right: auto !important;
	top: auto !important; bottom: auto !important;
	transform: none !important;
}
#ki-dash .kih-body,
#ki-dash .kih-main { width: auto !important; height: auto !important; }
#ki-dash .kih-kpi { width: auto !important; height: auto !important; }
#ki-dash .kih-card { filter: none !important; }
/* old placeholder boxes, if any markup remains */
#ki-dash .kih-ghost { display: none !important; }



#ki-dash {
	--kih-blue:   var(--ki-primary, #0A5A94);
	--kih-panel:  #0D1929;
	--kih-panel2: #0E1A29;
	--kih-hair:   rgba(255,255,255,.06);
	--kih-muted:  #64748B;
	--kih-slate:  #94A3B8;
	--kih-green:  #10B981;
	--kih-amber:  #F59E0B;
	--kih-red:    #F87171;
	--kih-s:      0.83;                 /* JS overwrites with the exact fit */
	display: block !important;
	width: 100% !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	-webkit-font-smoothing: antialiased !important;
}
#ki-dash *, #ki-dash *::before, #ki-dash *::after { box-sizing: border-box !important; }
#ki-dash p, #ki-dash h2 { margin: 0 !important; padding: 0 !important; }
#ki-dash a { text-decoration: none !important; }
#ki-dash .kih-i { display: block !important; flex: 0 0 auto !important; }

/* JS-off fallback scale (JS replaces --kih-s with the exact fit ≥1200px) */
@media (max-width: 1299px) { #ki-dash { --kih-s: 0.80; } }
@media (max-width: 1100px) { #ki-dash { --kih-s: 0.74; } }
@media (max-width: 1024px) { #ki-dash { --kih-s: 0.68; } }
@media (max-width:  980px) { #ki-dash { --kih-s: 0.62; } }

/* scale wrapper: reserves the scaled footprint so nothing overlaps below */
#ki-dash .kih-mock-wrap {
	width: calc(756px * var(--kih-s)) !important;
	height: calc(446px * var(--kih-s)) !important;
	overflow: visible !important;
}
#ki-dash .kih-mock {
	width: 756px !important;
	height: 446px !important;
	transform: scale(var(--kih-s)) !important;
	transform-origin: 0 0 !important;
}

/* ── app window ── */
#ki-dash .kih-app {
	width: 756px !important;
	height: 446px !important;
	background: var(--kih-panel) !important;
	border: 0.8px solid rgba(184,184,184,.42) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
}

/* ── top bar ── */
#ki-dash .kih-topbar {
	flex: 0 0 auto !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 16px !important;
	background: var(--kih-blue) !important;
	border-bottom: 0.8px solid rgba(255,255,255,.08) !important;
}
#ki-dash .kih-topbar-l { display: flex !important; align-items: center !important; gap: 10px !important; color: #fff !important; }
#ki-dash .kih-logo { display: block !important; width: 82px !important; height: auto !important; }
#ki-dash .kih-topbar-r { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 8px !important; }
#ki-dash .kih-search {
	display: flex !important; align-items: center !important; gap: 6px !important;
	padding: 5px 9px !important; border-radius: 7px !important;
	background: rgba(255,255,255,.08) !important; border: .5px solid rgba(255,255,255,.1) !important;
	color: #d5e2ee !important;
}
#ki-dash .kih-search-t { font-size: 7px !important; line-height: 1 !important; white-space: nowrap !important; }
#ki-dash .kih-bell { position: relative !important; color: #eaf2fa !important; }
#ki-dash .kih-dot { position: absolute !important; top: -1px !important; right: -1px !important; width: 3px !important; height: 3px !important; border-radius: 50% !important; background: #EF4444 !important; }
#ki-dash .kih-me {
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 16px !important; height: 16px !important; border-radius: 50% !important;
	background: rgba(255,255,255,.14) !important; border: .5px solid rgba(255,255,255,.25) !important;
	font-size: 6px !important; font-weight: 600 !important; color: #fff !important;
}
#ki-dash .kih-me-x { display: flex !important; flex-direction: column !important; }
#ki-dash .kih-me-n { display: inline-flex !important; align-items: center !important; gap: 2px !important; font-size: 6.5px !important; font-weight: 600 !important; line-height: 1.2 !important; color: #fff !important; white-space: nowrap !important; }
#ki-dash .kih-me-r { font-size: 5.5px !important; line-height: 1.2 !important; color: rgba(224,237,255,.65) !important; }

/* ── body + rail ── */
#ki-dash .kih-body { flex: 1 1 auto !important; display: flex !important; align-items: stretch !important; min-height: 0 !important; }
#ki-dash .kih-nav {
	flex: 0 0 auto !important; width: 34px !important;
	background: var(--kih-panel2) !important; border-right: 0.8px solid var(--kih-hair) !important;
	display: flex !important; flex-direction: column !important; align-items: center !important;
	gap: 4px !important; padding-top: 14px !important;
}
#ki-dash .kih-nav-item {
	display: flex !important; align-items: center !important; justify-content: center !important;
	width: 24px !important; height: 22px !important; border-radius: 6px !important;
	color: rgba(255,255,255,.5) !important;
}
#ki-dash .kih-nav-item.is-active { background: #0F3550 !important; color: #fff !important; box-shadow: inset 2px 0 0 #0386E5 !important; }

#ki-dash .kih-main { flex: 1 1 0 !important; min-width: 0 !important; padding: 14px !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }

/* ── KPI row ── */
#ki-dash .kih-kpis { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; }
#ki-dash .kih-kpi {
	display: flex !important; align-items: flex-start !important; gap: 9px !important;
	padding: 11px 12px !important; border-radius: 9px !important;
	background: #0F1D30 !important; border: 0.8px solid var(--kih-hair) !important;
}
#ki-dash .kih-kpi-ic {
	flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important;
	width: 22px !important; height: 22px !important; border-radius: 50% !important; color: #fff !important;
}
#ki-dash .kih-ic-blue  { background: #1E6FB8 !important; }
#ki-dash .kih-ic-green { background: #14B8A6 !important; }
#ki-dash .kih-ic-red   { background: #EF6B6B !important; }
#ki-dash .kih-kpi-tx { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
#ki-dash .kih-kpi-label { font-size: 7px !important; line-height: 1.3 !important; color: rgba(255,255,255,.55) !important; }
#ki-dash .kih-kpi-value { font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important; margin-top: 2px !important; }
#ki-dash .kih-v-white { color: #fff !important; }
#ki-dash .kih-v-red   { color: var(--kih-red) !important; }
#ki-dash .kih-kpi-delta { font-size: 6.5px !important; line-height: 1.2 !important; margin-top: 3px !important; white-space: nowrap !important; }
#ki-dash .kih-kpi-delta em { font-style: normal !important; color: rgba(255,255,255,.4) !important; }
#ki-dash .kih-up   { color: #34D399 !important; }
#ki-dash .kih-down { color: var(--kih-red) !important; }

/* ── content grid ── */
#ki-dash .kih-grid { flex: 1 1 auto !important; display: grid !important; grid-template-columns: 1.18fr 1fr 1fr !important; gap: 10px !important; min-height: 0 !important; }
#ki-dash .kih-col { display: flex !important; flex-direction: column !important; gap: 10px !important; min-width: 0 !important; }

#ki-dash .kih-card {
	background: #0F1D30 !important; border: 0.8px solid var(--kih-hair) !important;
	border-radius: 10px !important; padding: 11px 12px !important; min-width: 0 !important;
}
#ki-dash .kih-card-hd { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 9px !important; }
#ki-dash .kih-card-t { font-size: 10px !important; font-weight: 600 !important; line-height: 1.25 !important; color: #fff !important; }
#ki-dash .kih-card-s { font-size: 7px !important; line-height: 1.3 !important; color: var(--kih-muted) !important; margin-top: 2px !important; }
#ki-dash .kih-link { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 7.5px !important; color: var(--kih-slate) !important; white-space: nowrap !important; flex: 0 0 auto !important; }
#ki-dash .kih-select {
	display: inline-flex !important; align-items: center !important; gap: 4px !important;
	padding: 3px 7px !important; border-radius: 5px !important; flex: 0 0 auto !important;
	background: rgba(255,255,255,.05) !important; border: .5px solid rgba(255,255,255,.1) !important;
	font-size: 6.5px !important; color: #c1c1c1 !important; white-space: nowrap !important;
}

/* Passenger Feedback */
#ki-dash .kih-feed { display: flex !important; flex-direction: column !important; }
#ki-dash .kih-tabs { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-bottom: 11px !important; }
#ki-dash .kih-tab { font-size: 7px !important; line-height: 1 !important; padding: 5px 9px !important; border-radius: 999px !important; color: var(--kih-slate) !important; border: .5px solid rgba(255,255,255,.12) !important; white-space: nowrap !important; }
#ki-dash .kih-tab.is-active { background: rgba(0,112,243,.18) !important; border-color: rgba(0,112,243,.4) !important; color: #cfe4fb !important; }
#ki-dash .kih-fb { display: flex !important; flex-direction: column !important; gap: 2px !important; }
#ki-dash .kih-fb-row { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 8px 0 !important; border-top: 0.8px solid rgba(255,255,255,.05) !important; }
#ki-dash .kih-fb-row:first-child { border-top: 0 !important; }
#ki-dash .kih-av {
	flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important;
	width: 20px !important; height: 20px !important; border-radius: 50% !important; color: #fff !important; font-size: 7px !important; font-weight: 600 !important;
}
#ki-dash .kih-av-x     { background: #111 !important; }
#ki-dash .kih-av-amber { background: #F59E0B !important; }
#ki-dash .kih-av-wa    { background: #25D366 !important; }
#ki-dash .kih-av-slate { background: #64748B !important; }
#ki-dash .kih-fb-b { flex: 1 1 0 !important; min-width: 0 !important; }
#ki-dash .kih-fb-h { display: flex !important; align-items: center !important; gap: 6px !important; }
#ki-dash .kih-fb-n { font-size: 8px !important; font-weight: 600 !important; color: #fff !important; }
#ki-dash .kih-fb-t { font-size: 6.5px !important; color: var(--kih-muted) !important; }
#ki-dash .kih-fb-m { font-size: 7px !important; line-height: 1.5 !important; color: var(--kih-slate) !important; margin-top: 2px !important; }
#ki-dash .kih-tag { flex: 0 0 auto !important; font-size: 6px !important; font-weight: 500 !important; line-height: 1 !important; padding: 4px 7px !important; border-radius: 4px !important; white-space: nowrap !important; }
#ki-dash .kih-tag.is-pos { background: rgba(16,185,129,.18) !important; color: #34D399 !important; }
#ki-dash .kih-tag.is-neu { background: rgba(245,158,11,.18) !important; color: #FBBF24 !important; }
#ki-dash .kih-tag.is-neg { background: rgba(248,113,113,.18) !important; color: #F87171 !important; }

/* Top Issues */
#ki-dash .kih-iss-list { display: flex !important; flex-direction: column !important; gap: 9px !important; }
#ki-dash .kih-iss { display: flex !important; align-items: center !important; gap: 7px !important; }
#ki-dash .kih-iss-dot { flex: 0 0 auto !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; }
#ki-dash .kih-iss-n { flex: 1 1 0 !important; min-width: 0 !important; font-size: 7.5px !important; color: #e6edf5 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
#ki-dash .kih-iss-v { font-size: 8px !important; font-weight: 600 !important; color: #fff !important; }
#ki-dash .kih-iss-c { font-size: 6.5px !important; min-width: 26px !important; text-align: right !important; }
#ki-dash .kih-d-red    { background: #F87171 !important; }
#ki-dash .kih-d-purple { background: #A78BFA !important; }
#ki-dash .kih-d-blue   { background: #60A5FA !important; }
#ki-dash .kih-d-teal   { background: #2DD4BF !important; }
#ki-dash .kih-d-amber  { background: #FBBF24 !important; }
#ki-dash .kih-d-green  { background: #34D399 !important; }

/* Top Routes */
#ki-dash .kih-rt-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#ki-dash .kih-rt { display: flex !important; align-items: center !important; gap: 7px !important; }
#ki-dash .kih-rt-l { flex: 0 0 46px !important; font-size: 7px !important; color: var(--kih-slate) !important; white-space: nowrap !important; }
#ki-dash .kih-rt-track { flex: 1 1 0 !important; height: 5px !important; border-radius: 999px !important; background: rgba(255,255,255,.07) !important; overflow: hidden !important; }
#ki-dash .kih-rt-fill { display: block !important; height: 100% !important; width: var(--w) !important; border-radius: 999px !important; background: linear-gradient(90deg, #1E6FB8, #3B82F6) !important; }
#ki-dash .kih-rt-v { flex: 0 0 auto !important; min-width: 26px !important; text-align: right !important; font-size: 7px !important; font-weight: 600 !important; color: #fff !important; }

/* Sentiment donut */
#ki-dash .kih-senti-body { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: 4px !important; }
#ki-dash .kih-donut { position: relative !important; flex: 0 0 auto !important; width: 74px !important; height: 74px !important; }
#ki-dash .kih-donut svg { width: 74px !important; height: 74px !important; transform: rotate(-90deg) !important; }
#ki-dash .kih-ring-bg { fill: none !important; stroke: rgba(255,255,255,.08) !important; stroke-width: 4 !important; }
#ki-dash .kih-ring { fill: none !important; stroke-width: 4 !important; stroke-linecap: round !important; }
#ki-dash .kih-ring-pos { stroke: #10B981 !important; }
#ki-dash .kih-ring-neu { stroke: #F59E0B !important; }
#ki-dash .kih-ring-neg { stroke: #F87171 !important; }
#ki-dash .kih-donut-c { position: absolute !important; inset: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
#ki-dash .kih-donut-n { font-size: 13px !important; font-weight: 700 !important; color: #fff !important; line-height: 1 !important; }
#ki-dash .kih-donut-l { font-size: 6.5px !important; color: var(--kih-muted) !important; margin-top: 2px !important; }
#ki-dash .kih-senti-leg { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 7px !important; }
#ki-dash .kih-leg { display: flex !important; align-items: center !important; gap: 6px !important; }
#ki-dash .kih-leg-d { flex: 0 0 auto !important; width: 6px !important; height: 6px !important; border-radius: 2px !important; }
#ki-dash .kih-leg-n { flex: 1 1 0 !important; font-size: 7px !important; color: var(--kih-slate) !important; }
#ki-dash .kih-leg-v { font-size: 7.5px !important; font-weight: 600 !important; color: #fff !important; }

/* Social post card */
#ki-dash .kih-post { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; padding: 10px !important; }
#ki-dash .kih-post-hd { display: flex !important; align-items: center !important; gap: 7px !important; margin-bottom: 8px !important; }
#ki-dash .kih-post-id { display: flex !important; flex-direction: column !important; }
#ki-dash .kih-post-n { font-size: 7.5px !important; font-weight: 600 !important; color: #fff !important; line-height: 1.2 !important; }
#ki-dash .kih-post-loc { font-size: 6px !important; color: var(--kih-muted) !important; line-height: 1.2 !important; }
#ki-dash .kih-post-photo {
	display: block !important;
	width: 100% !important;
	border-radius: 6px !important;
	object-fit: cover !important;
	background: #10233b !important;   /* fallback tint while the image loads */
}
#ki-dash .kih-post-acts { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: 8px !important; color: #cfd8e3 !important; }
#ki-dash .kih-post-acts svg { display: block !important; }
#ki-dash .kih-post-bm { margin-left: auto !important; }

/* ── entrance animations (respect prefers-reduced-motion) ── */
@keyframes kih-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes kih-fup    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kih-fup-s  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes kih-slide  { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes kih-dotp   { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.6); } 70%,100% { box-shadow: 0 0 0 3px rgba(239,68,68,0); } }
@keyframes kih-rt     { from { width: 0; } to { width: var(--w); } }

#ki-dash .kih-topbar   { animation: kih-fade .4s ease-out var(--d) both; }
#ki-dash .kih-nav-item { animation: kih-slide .4s cubic-bezier(.16,1,.3,1) var(--d) both; }
#ki-dash .kih-kpi      { animation: kih-fup .5s cubic-bezier(.16,1,.3,1) var(--d) both; }
#ki-dash .kih-card     { animation: kih-fup-s .5s cubic-bezier(.16,1,.3,1) var(--d) both; }
#ki-dash .kih-fb-row   { animation: kih-fup-s .45s cubic-bezier(.16,1,.3,1) var(--d) both; }
#ki-dash .kih-dot      { animation: kih-dotp 2.2s ease-out 1s infinite; }
#ki-dash .kih-rt-fill  { animation: kih-rt .9s cubic-bezier(.16,1,.3,1) 1s both; }

@media (prefers-reduced-motion: reduce) {
	#ki-dash *, #ki-dash *::before, #ki-dash *::after { animation: none !important; }
	#ki-dash .kih-rt-fill { width: var(--w) !important; }
}

/* ── tablet / mobile scale steps ── */
@media (max-width: 1199px) {
	#ki-dash { --kih-s: 1.15 !important; }        /* fills the stacked hero width */
	#ki-dash .kih-mock-wrap { margin: 0 auto !important; }
}
@media (max-width: 999px) { #ki-dash { --kih-s: 0.98 !important; } }
@media (max-width: 859px) { #ki-dash { --kih-s: 0.88 !important; } }
@media (max-width: 767px) { #ki-dash { --kih-s: 0.66 !important; } }

/* height reinforcements so bars + photo never collapse under old fixed heights */
#ki-dash .kih-app  { height: 446px !important; }
#ki-dash .kih-body { height: auto !important; flex: 1 1 auto !important; }
#ki-dash .kih-main { height: auto !important; flex: 1 1 auto !important; }
#ki-dash .kih-rt-track { height: 5px !important; min-width: 0 !important; }
#ki-dash .kih-rt-fill  { height: 5px !important; }
#ki-dash .kih-post-photo { min-height: 62px !important; height: auto !important; flex: 1 1 auto !important; }

/* final robustness: fixed intrinsic sizes so nothing depends on parent height */
#ki-dash .kih-rt        { min-height: 8px !important; }
#ki-dash .kih-rt-track  { flex: 1 1 auto !important; height: 5px !important; align-self: center !important; background: rgba(255,255,255,.07) !important; }
#ki-dash .kih-rt-fill   { display: block !important; height: 5px !important; }
#ki-dash .kih-post      { min-height: 150px !important; }
#ki-dash .kih-post-photo{ flex: 0 0 auto !important; height: 92px !important; min-height: 92px !important; }

#ki-krc {
	--kx-bg:     #0c1220;
	--kx-black:  #030407;
	--kx-card:   #0f1929;
	--kx-line:   #1c2533;
	--kx-blue:   #0A5A94;
	--kx-blue-2: #0b6aae;
	--kx-dim:    #4b5b6e;
	--kx-mute:   #6f8298;
	--kx-text:   #b9c4cf;
	--kx-ai:     linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%);
	--kx-sticky-top: 100px; /* clears the site header */
 
	display: block;
	position: relative;
	background: var(--kx-bg);
	color: #fff;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	padding: 90px 0 100px;
}
 
/* local reset */
#ki-krc, #ki-krc *, #ki-krc *::before, #ki-krc *::after { box-sizing: border-box; }
#ki-krc :where(h2, p, span, div, b, strong, a, button, svg) { margin: 0; padding: 0; }
#ki-krc :where(h2, p) { font-family: inherit; text-transform: none; }
#ki-krc a { color: inherit; text-decoration: none; box-shadow: none; }
#ki-krc button {
	-webkit-appearance: none; appearance: none;
	font: inherit; color: inherit; background: none;
	border: 0; border-radius: 0; box-shadow: none; text-shadow: none;
	text-transform: none; letter-spacing: inherit; line-height: inherit;
	text-align: inherit; width: auto; height: auto; min-height: 0;
	cursor: pointer;
}
#ki-krc svg { display: inline-block; vertical-align: middle; }
#ki-krc :focus { outline: none; }
#ki-krc :focus-visible { outline: 2px solid #3A86FF; outline-offset: 2px; }
#ki-krc [hidden] { display: none !important; }
 
/* wrap — matches .ki-wrap */
#ki-krc .kx-wrap { max-width: 1300px; margin: 0 auto; padding: 0; }
@media (max-width: 1340px) { #ki-krc .kx-wrap { padding: 0 20px; } }
 
/* ── header ─────────────────────────────── */
#ki-krc .kx-eyebrow {
	font-size: 12px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: #7B8CFF;
	margin-bottom: 14px;
}
#ki-krc .kx-headline {
    margin-bottom: 14px;
    color: #FFF;
    font-family: Poppins;
    font-size: 44px;
    font-style: normal;
    font-weight: 600;
    line-height: 49.28px;
    letter-spacing: -1.32px;
}
#ki-krc .kx-sub {

	max-width: 760px;
	    color: #5A7A96;
    font-family: Poppins;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}
 
/* ── layout ─────────────────────────────── */
#ki-krc .kx-layout {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: 22px;
}
 
/* ── sidebar ────────────────────────────── */
#ki-krc .kx-sidebar {
	background: var(--kx-black);
	border: 1px solid var(--kx-line);
	border-radius: 16px;
	overflow: hidden;
	position: sticky;
	top: var(--kx-sticky-top);
}
#ki-krc .kx-side-head { padding: 22px 20px 20px; }
#ki-krc .kx-side-label {
	font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: #c9d3de;
	margin-bottom: 14px;
}
#ki-krc .kx-search {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px;
	background: #0b111b;
	border: 1px solid #1f2a3a;
	border-radius: 8px;
	font-size: 13px; color: #9aa8b8;
}
#ki-krc .kx-search svg { flex-shrink: 0; opacity: .7; }
 
#ki-krc .kx-tabs { display: flex; background: #0e141d; }
#ki-krc .kx-tab {
	flex: 1 1 0; display: block;
	padding: 12px 4px;
	font-size: 11.5px; font-weight: 500;
	color: #4f5f72; text-align: center;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}
#ki-krc .kx-tab:hover { color: #8fb0cc; }
#ki-krc .kx-tab.is-active { color: #3A86FF; border-bottom-color: var(--kx-blue); }
 
#ki-krc .kx-qlist { padding: 0 0 8px; }
#ki-krc .kx-qitem {
	display: flex; align-items: flex-start; gap: 14px;
	width: 100%;
	padding: 14px 20px;
	border-left: 2px solid transparent;
	transition: background .15s;
}
#ki-krc .kx-qitem:hover { background: rgba(10, 90, 148, .08); }
#ki-krc .kx-qitem.is-active {
	background: #0a2536;
	border-left-color: #1f7fd0;
}
#ki-krc .kx-qnum {
	flex-shrink: 0; min-width: 16px; margin-top: 3px;
	font-size: 10px; font-weight: 500; color: #4f5f72;
}
#ki-krc .kx-qitem.is-active .kx-qnum { color: #5e9fd6; }
#ki-krc .kx-qtext {
	font-size: 13px; font-weight: 500; line-height: 1.5;
	color: #6f8298;
	text-wrap-mode: wrap;
}
#ki-krc .kx-qitem.is-active .kx-qtext { color: #d6e3ee; }
 
/* ── chat panel ─────────────────────────── */
#ki-krc .kx-panel {
	display: flex; flex-direction: column;
	min-height: 560px;
	background: var(--kx-black);
	border: 1px solid #262c35;
	border-radius: 18px;
	overflow: hidden;
}
#ki-krc .kx-topbar {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 20px;
	background: #141619;
	border-bottom: 1px solid #22262c;
}
 
/* KRC logo tile — KI-AI gradient border, tint and text */
#ki-krc .kx-logo {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 6px 12px;
	border-radius: 6px;
	background: linear-gradient(96deg, rgba(58,134,255,.16), rgba(181,101,255,.16), rgba(255,143,171,.16));
}
#ki-krc .kx-logo::before {
	content: "";
	position: absolute; inset: 0;
	padding: 1px;
	border-radius: inherit;
	background: var(--kx-ai);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
}
#ki-krc .kx-logo span {
	font-size: 22px; font-weight: 700; line-height: 1.2;
	background: var(--kx-ai);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
 
#ki-krc .kx-status {
	display: flex; align-items: center; gap: 7px;
	margin-left: auto;
	font-size: 12px; font-weight: 500; color: #22c55e;
}
#ki-krc .kx-status-dot {
	display: block; width: 6px; height: 6px;
	border-radius: 50%; background: #22c55e;
	animation: kx-blink 2s ease infinite;
}
@keyframes kx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
#ki-krc .kx-time {
	font-size: 12px; color: #9aa4b0;
	font-variant-numeric: tabular-nums;
}
 
#ki-krc .kx-chat {
	flex: 1;
	display: flex; flex-direction: column; gap: 14px;
	padding: 22px 20px 36px;
}
 
/* user turn */
#ki-krc .kx-user {
	display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
#ki-krc .kx-user-head {
	display: flex; align-items: center; gap: 8px;
	font-size: 13px; color: #e6ebf0;
}
#ki-krc .kx-user-head svg { color: #e6ebf0; }
#ki-krc .kx-bubble {
	max-width: min(560px, 90%);
	padding: 9px 18px;
	border-radius: 20px;
	background: #2a2c30;
	font-size: 13.5px; line-height: 1.45;
	color: #e6ebf0;
}
 
/* assistant turn */
#ki-krc .kx-bot-head {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; color: #e6ebf0;
}
#ki-krc .kx-ai-icon {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: rgba(181,101,255,.1);
}
#ki-krc .kx-ai-icon::before {
	content: "";
	position: absolute; inset: 0;
	padding: 1.5px;
	border-radius: 50%;
	background: var(--kx-ai);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#ki-krc .kx-ai-icon span {
	font-size: 10px; font-weight: 700; line-height: 1;
	background: var(--kx-ai);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
 
#ki-krc .kx-reply { padding: 22px 8px 0 28px; }
 
#ki-krc .kx-answer-label {
	display: flex; align-items: center; gap: 10px;
	font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: #8a96a3;
	margin-bottom: 16px;
}
#ki-krc .kx-answer-label::before {
	content: ""; display: block;
	width: 22px; height: 1px; background: #5a6572;
}
#ki-krc .kx-answer {
	font-size: 16px; line-height: 1.75;
	color: var(--kx-text);
	max-width: 900px;
	margin-bottom: 18px;
}
#ki-krc .kx-answer strong { color: #fff; font-weight: 600; }
 
#ki-krc .kx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#ki-krc .kx-pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 12.5px; font-weight: 500; line-height: 1.4;
}
#ki-krc .kx-pill-red   { background: #3a1417; color: #ff6b6b; border-color: #4d1c20; }
#ki-krc .kx-pill-amber { background: #3a2a0a; color: #fbbf24; border-color: #4d380d; }
#ki-krc .kx-pill-green { background: #0c2e1a; color: #4ade80; border-color: #124127; }
#ki-krc .kx-pill-blue  { background: #0c2140; color: #60a5fa; border-color: #13305a; }
 
#ki-krc .kx-actions {
	display: flex; flex-wrap: wrap; gap: 12px;
	margin-top: 18px; padding-top: 22px;
	border-top: 1px solid #2c3139;
}
#ki-krc .kx-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 11px 22px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-size: 14px; font-weight: 600; line-height: 1.4;
	transition: background .17s, color .17s, border-color .17s;
}
#ki-krc .kx-btn-icon { display: block; flex-shrink: 0; width: 15px; height: 15px; }
#ki-krc .kx-btn-answer { background: var(--kx-blue); border-color: var(--kx-blue); color: #fff; }
#ki-krc .kx-btn-answer:hover { background: var(--kx-blue-2); border-color: var(--kx-blue-2); color: #fff; }
#ki-krc .kx-btn-dash { background: transparent; border-color: #1d3a55; color: #7fb2dc; }
#ki-krc .kx-btn-dash:hover { background: transparent; border-color: var(--kx-blue-2); color: #b4d4ee; }
 
/* typing indicator */
#ki-krc .kx-typing {
	display: inline-flex; gap: 5px;
	margin: 18px 0 0 28px;
	padding: 10px 14px;
	border-radius: 14px;
	background: #16181c;
}
#ki-krc .kx-typing span {
	display: block; width: 6px; height: 6px;
	border-radius: 50%; background: #8a96a3;
	animation: kx-dot 1s ease-in-out infinite;
}
#ki-krc .kx-typing span:nth-child(2) { animation-delay: .15s; }
#ki-krc .kx-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes kx-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
 
@keyframes kx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
#ki-krc .kx-enter { animation: kx-in .3s cubic-bezier(.16, 1, .3, 1) both; }
 
/* drawers */
#ki-krc .kx-drawer {
	margin-top: 20px;
	padding: 20px 22px;
	background: #0a0d12;
	border: 1px solid #1f242c;
	border-radius: 10px;
}
#ki-krc .kx-drawer-label {
	font-size: 11px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase;
	color: #6f7c8a;
	margin-bottom: 14px;
}
#ki-krc .kx-full-text { font-size: 14px; line-height: 1.75; color: #9aa7b4; }
 
#ki-krc .kx-dash-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
#ki-krc .kx-dm {
	padding: 14px 16px;
	background: #10141a;
	border: 1px solid #1f242c;
	border-radius: 8px;
}
#ki-krc .kx-dm-label { font-size: 11px; font-weight: 500; color: #6f7c8a; margin-bottom: 6px; }
#ki-krc .kx-dm-val { font-size: 22px; font-weight: 700; line-height: 1; color: #fff; }
#ki-krc .kx-val-red   { color: #f87171; }
#ki-krc .kx-val-amber { color: #fbbf24; }
#ki-krc .kx-val-green { color: #4ade80; }
#ki-krc .kx-dm-chg { margin-top: 6px; font-size: 11px; font-weight: 600; color: #6f7c8a; }
#ki-krc .kx-chg-bad  { color: #f87171; }
#ki-krc .kx-chg-good { color: #4ade80; }
 
#ki-krc .kx-chart-title {
	font-size: 11px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase;
	color: #6f7c8a;
	margin-bottom: 12px;
}
#ki-krc .kx-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
#ki-krc .kx-bar-lbl { min-width: 130px; font-size: 12px; color: #9aa7b4; }
#ki-krc .kx-bar-track { flex: 1; height: 6px; border-radius: 100px; background: #161b22; overflow: hidden; }
#ki-krc .kx-bar-fill {
	display: block; width: 0; height: 100%;
	border-radius: 100px;
	transition: width .6s cubic-bezier(.16, 1, .3, 1);
}
#ki-krc .kx-fill-red   { background: #f87171; }
#ki-krc .kx-fill-amber { background: #fbbf24; }
#ki-krc .kx-fill-blue  { background: #60a5fa; }
#ki-krc .kx-fill-green { background: #4ade80; }
#ki-krc .kx-bar-pct { min-width: 36px; text-align: right; font-size: 12px; color: #9aa7b4; font-variant-numeric: tabular-nums; }
 
/* ── bottom CTA ─────────────────────────── */
#ki-krc .kx-bottom {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	margin-top: 36px;
	padding: 26px 28px;
	background: var(--kx-card);
	border: 1px solid #1a2a3f;
	border-radius: 14px;
}
#ki-krc .kx-bottom-text { font-size: 15px; line-height: 1.6; color: #5f7690; max-width: 780px; }
#ki-krc .kx-bottom-text b { color: #cfe0ee; font-weight: 600; }
#ki-krc .kx-cta {
	display: inline-flex; align-items: center; gap: 10px;
	flex-shrink: 0; white-space: nowrap;
	padding: 14px 24px;
	border-radius: 8px;
	background: var(--kx-blue);
	font-size: 14px; font-weight: 600; line-height: 1.4; color: #fff;
	transition: background .17s;
}
#ki-krc .kx-cta:hover, #ki-krc .kx-cta:focus-visible { background: var(--kx-blue-2); color: #fff; }
 
/* ── responsive ─────────────────────────── */
@media (max-width: 1024px) {
	#ki-krc .kx-layout { grid-template-columns: 260px minmax(0, 1fr); }
	#ki-krc .kx-headline { font-size: 38px; }
	#ki-krc .kx-dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	#ki-krc { padding: 60px 0 70px; }
	#ki-krc .kx-layout { grid-template-columns: minmax(0, 1fr); }
	#ki-krc .kx-sidebar { position: static; }
	#ki-krc .kx-panel { min-height: 0; }
	#ki-krc .kx-headline { font-size: 32px; }
	#ki-krc .kx-sub { margin-bottom: 36px; }
}
@media (max-width: 560px) {
	#ki-krc .kx-headline { font-size: 26px; }
	#ki-krc .kx-headline br { display: none; }
	#ki-krc .kx-chat { padding: 18px 14px 24px; }
	#ki-krc .kx-reply { padding: 18px 0 0; }
	#ki-krc .kx-typing { margin-left: 0; }
	#ki-krc .kx-answer { font-size: 15px; }
	#ki-krc .kx-dash-grid { grid-template-columns: minmax(0, 1fr); }
	#ki-krc .kx-bar-lbl { min-width: 96px; }
	#ki-krc .kx-actions { flex-direction: column; }
	#ki-krc .kx-btn { justify-content: center; }
	#ki-krc .kx-bottom { flex-direction: column; align-items: flex-start; padding: 20px; }
	#ki-krc .kx-cta { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	#ki-krc *, #ki-krc *::before, #ki-krc *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
   THE PROBLEM SECTION
   Scoped entirely under #ki-problem with kp- prefixed classes, so it cannot
   collide with or be overridden by any other section's class names.
   Design: centred header (small uppercase label + 34px/600 title) over three
   blue-outlined cards with a pale number, 18px title and grey body copy.
   ========================================================================== */
#ki-problem {
	background: #FFFFFF !important;
	padding: 96px 0 !important;
	box-shadow: none !important;
}
#ki-problem .kp-wrap {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	box-sizing: border-box !important;
}
#ki-problem .kp-sh {
	max-width: none !important;
	margin: 0 auto 52px !important;
	text-align: center !important;
}
#ki-problem .kp-sh-label {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: #1A7BC4 !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}
#ki-problem .kp-sh-title {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 34px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.5px !important;
	color: #0B1628 !important;
	text-align: center !important;
	margin: 0 auto !important;
	padding: 0 !important;
}
#ki-problem .kp-prob-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 28px !important;
}
#ki-problem .kp-prob-card {
	background: #FFFFFF !important;
	border: 1px solid #0A5A94 !important;
	border-top-width: 2px !important;
	border-radius: 8px !important;
	padding: 24px 32px 32px !important;
	box-shadow: none !important;
	text-align: left !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
#ki-problem .kp-prob-num {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #D6E6F5 !important;
	margin: 0 0 20px !important;
}
/* max-width reproduces the design's two-line card titles */
#ki-problem .kp-prob-card h3 {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	color: #0B1628 !important;
	max-width: 288px !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}
#ki-problem .kp-prob-card p {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.7 !important;
	color: #7A8494 !important;
	margin: 0 !important;
	padding: 0 !important;
}

@media (max-width: 1340px) {
	#ki-problem .kp-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 1100px) {
	#ki-problem .kp-sh-title { font-size: 30px !important; }
	#ki-problem .kp-prob-card { padding: 24px 24px 28px !important; }
}
@media (max-width: 980px) {
	#ki-problem .kp-prob-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; }
	#ki-problem .kp-sh-title { font-size: 28px !important; }
	#ki-problem .kp-prob-card h3 { max-width: none !important; }
}
@media (max-width: 767px) {
	#ki-problem { padding: 64px 0 !important; }
	#ki-problem .kp-wrap { padding-left: 16px !important; padding-right: 16px !important; }
	#ki-problem .kp-sh { margin-bottom: 36px !important; }
	#ki-problem .kp-sh-title { font-size: 24px !important; }
	#ki-problem .kp-prob-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
	#ki-problem .kp-prob-num { font-size: 28px !important; margin-bottom: 14px !important; }
}

/* ==========================================================================
   CLIENT STORIES SECTION
   Scoped entirely under #ki-stories with ks- prefixed classes so it cannot
   collide with or be overridden by any other section. All colours are
   hardcoded (not shared :root vars). Drawer lives inside #ki-stories too.
   Design: centred header + centred filter pills, compact white cards with a
   square-ish category tag, blue arrow, and small Poppins module chips.
   ========================================================================== */
#ki-stories {
	background: #F3F9FF !important;
	padding: 92px 0 !important;
	overflow-x: clip !important;
}
#ki-stories .ks-wrap {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	box-sizing: border-box !important;
	min-width: 0 !important;
}

/* section header — centred, matches the Problem section header */
#ki-stories .ks-sh {
	max-width: 760px !important;
	margin: 0 auto 48px !important;
	text-align: center !important;
}
#ki-stories .ks-sh-label {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	color: #1A7BC4 !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}
#ki-stories .ks-sh-title {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 34px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.5px !important;
	color: #0B1628 !important;
	margin: 0 !important;
	padding: 0 !important;
}
#ki-stories .ks-sh-sub {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: #6B7280 !important;
	max-width: 620px !important;
	margin: 14px auto 0 !important;
	padding: 0 !important;
}

/* filter pills — centred */
#ki-stories .ks-filter-row {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 9px !important;
	margin-bottom: 34px !important;
}
#ki-stories .ks-filter-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	padding: 10px 20px !important;
	border-radius: 999px !important;
	border: 1px solid #E5E7EB !important;
	background: #FFFFFF !important;
	color: #4B5563 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease !important;
}
#ki-stories .ks-filter-btn.is-active,
#ki-stories .ks-filter-btn.is-active:hover,
#ki-stories .ks-filter-btn.is-active:focus {
	background: #0A5A94 !important;
	color: #FFFFFF !important;
	border-color: #0A5A94 !important;
	font-weight: 500 !important;
}
#ki-stories .ks-filter-btn:hover:not(.is-active),
#ki-stories .ks-filter-btn:focus:not(.is-active) {
	background: #FFFFFF !important;
	border-color: #0A5A94 !important;
	color: #0A5A94 !important;
}
#ki-stories .ks-filter-btn:focus-visible {
	outline: 2px solid #0A5A94 !important;
	outline-offset: 2px !important;
}

/* card grid */
#ki-stories .ks-card-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 22px !important;
	width: 100% !important;
	max-width: 100% !important;
}
/* cards are <button>s — reset theme button styles so nothing leaks in */
#ki-stories .ks-card {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	text-align: left !important;
	white-space: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	background: #FFFFFF !important;
	border: 1px solid #E3E8EF !important;
	border-radius: 8px !important;
	padding: 24px 25px !important;
	margin: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: auto !important;
	box-shadow: none !important;
	color: #0B1628 !important;
	cursor: pointer !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
#ki-stories .ks-card:hover,
#ki-stories .ks-card:focus {
	background: #FFFFFF !important;
	color: #0B1628 !important;
	border-color: #0A5A94 !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 26px rgba(10, 90, 148, .10) !important;
}
#ki-stories .ks-card:focus-visible {
	outline: 2px solid #0A5A94 !important;
	outline-offset: 2px !important;
}
#ki-stories .ks-card-top {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 16px !important;
}
#ki-stories .ks-cat-pill {
	display: inline-block !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	padding: 4px 12px !important;
	border-radius: 4px !important;
	letter-spacing: 0 !important;
}
#ki-stories .ks-cat-airline { background: #E0EDF8 !important; color: #0A5A94 !important; }
#ki-stories .ks-cat-airport { background: #FFF1CC !important; color: #A86F00 !important; }
#ki-stories .ks-cat-eco     { background: #EDE9FE !important; color: #5B21B6 !important; }
#ki-stories .ks-card-arrow {
	display: flex !important;
	color: #0A5A94 !important;
	transition: transform .18s ease !important;
}
#ki-stories .ks-card-arrow svg {
	width: 16px !important;
	height: 16px !important;
	display: block !important;
}
#ki-stories .ks-card:hover .ks-card-arrow {
	transform: translateX(3px) !important;
}
#ki-stories .ks-card-name {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 21px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px !important;
	color: #0B1628 !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	overflow-wrap: anywhere !important;
}
#ki-stories .ks-card-sub {
	font-size: 12.5px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	color: #0A5A94 !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	overflow-wrap: anywhere !important;
}
#ki-stories .ks-card-hook {
	flex: 1 1 auto !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	font-style: normal !important;
	line-height: 1.5 !important;
	color: #6B7280 !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	overflow-wrap: anywhere !important;
	text-wrap: pretty;
}
#ki-stories .ks-card-chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 7px !important;
	min-width: 0 !important;
}
#ki-stories .ks-chip {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 10px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: #6B7280 !important;
	background: #FFFFFF !important;
	border: 1px solid #E3E8EF !important;
	border-radius: 3px !important;
	padding: 4px 8px !important;
	white-space: nowrap !important;
}

/* ── drawer ── */
#ki-stories .ks-drawer-overlay {
	position: fixed !important;
	inset: 0 !important;
	background: rgba(11, 22, 40, .55) !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transition: opacity .3s ease, visibility .3s ease !important;
	z-index: 4000 !important;
}
#ki-stories .ks-drawer-overlay.is-open { opacity: 1 !important; visibility: visible !important; }
#ki-stories .ks-drawer {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	height: 100% !important;
	width: 78% !important;
	max-width: 900px !important;
	background: #FFFFFF !important;
	transform: translateX(100%) !important;
	/* Closed drawer: no shadow + hidden. It sits off-canvas at translateX(100%),
	   but a box-shadow would still bleed ~80px into the right edge of the page. */
	visibility: hidden !important;
	box-shadow: none !important;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease, visibility 0s linear .35s !important;
	z-index: 4001 !important;
	overflow-y: auto !important;
}
#ki-stories .ks-drawer.is-open {
	transform: translateX(0) !important;
	visibility: visible !important;
	box-shadow: -24px 0 60px rgba(0, 0, 0, .22) !important;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s ease, visibility 0s linear 0s !important;
}
#ki-stories .ks-drawer-head {
	position: sticky !important;
	top: 0 !important;
	background: #0B1628 !important;
	color: #FFFFFF !important;
	padding: 36px 48px 30px !important;
	z-index: 2 !important;
	border-bottom: 3px solid #0A5A94 !important;
}
#ki-stories .ks-drawer-close {
	position: absolute !important;
	top: 26px !important;
	right: 34px !important;
	background: rgba(255, 255, 255, .09) !important;
	border: none !important;
	color: #FFFFFF !important;
	width: 38px !important;
	height: 38px !important;
	border-radius: 50% !important;
	cursor: pointer !important;
	font-size: 19px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background .15s !important;
	line-height: 1 !important;
}
#ki-stories .ks-drawer-close:hover { background: rgba(255, 255, 255, .2) !important; }
#ki-stories .ks-drawer-cat {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px !important;
	color: #FFC107 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}
#ki-stories .ks-drawer-head h2 {
	font-size: 32px !important;
	font-weight: 800 !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	color: #FFFFFF !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	line-height: 1.15 !important;
}
#ki-stories .ks-drawer-meta { font-size: 14px !important; color: #9CA3AF !important; margin: 0 !important; padding: 0 !important; }
#ki-stories .ks-drawer-body { padding: 42px 48px 60px !important; }
#ki-stories .ks-db-block { margin-bottom: 34px !important; }
#ki-stories .ks-db-label {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px !important;
	color: #0A5A94 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
}
#ki-stories .ks-db-block p {
	font-size: 15.5px !important;
	color: #0B1628 !important;
	line-height: 1.72 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-stories .ks-db-outcomes { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#ki-stories .ks-db-outcomes li {
	display: flex !important;
	gap: 13px !important;
	margin-bottom: 13px !important;
	font-size: 15px !important;
	color: #0B1628 !important;
	align-items: flex-start !important;
	line-height: 1.6 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-stories .ks-db-outcomes li::before {
	content: '' !important;
	width: 15px !important;
	height: 15px !important;
	background: #10B981 !important;
	border-radius: 4px !important;
	flex-shrink: 0 !important;
	margin-top: 4px !important;
}
#ki-stories .ks-db-modules { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; }
#ki-stories .ks-db-mod {
	font-size: 12px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	background: #EFF6FF !important;
	color: #0A5A94 !important;
	padding: 6px 13px !important;
	border-radius: 6px !important;
	border: 1px solid #d5e7f5 !important;
}
#ki-stories .ks-db-quote {
	background: #EFF6FF !important;
	border-left: 4px solid #FFC107 !important;
	padding: 22px 26px !important;
	border-radius: 0 8px 8px 0 !important;
	font-style: italic !important;
	font-size: 16px !important;
	color: #0B1628 !important;
	margin-bottom: 34px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	line-height: 1.6 !important;
}

@media (max-width: 1340px) {
	#ki-stories .ks-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 1100px) {
	#ki-stories .ks-sh-title { font-size: 30px !important; }
}
@media (max-width: 980px) {
	#ki-stories .ks-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	#ki-stories .ks-sh-title { font-size: 28px !important; }
	#ki-stories .ks-drawer { width: 92% !important; }
}
@media (max-width: 767px) {
	#ki-stories { padding: 64px 0 !important; }
	#ki-stories .ks-wrap { padding-left: 16px !important; padding-right: 16px !important; }
	#ki-stories .ks-sh { margin-bottom: 32px !important; }
	#ki-stories .ks-sh-title { font-size: 24px !important; }
	#ki-stories .ks-sh-sub { font-size: 15px !important; }
	#ki-stories .ks-card { padding: 22px 20px !important; }
	#ki-stories .ks-card-grid { grid-template-columns: minmax(0, 1fr) !important; }
	#ki-stories .ks-drawer { width: 100% !important; max-width: none !important; }
	#ki-stories .ks-drawer-head { padding-left: 26px !important; padding-right: 26px !important; }
	#ki-stories .ks-drawer-body { padding-left: 26px !important; padding-right: 26px !important; }
}

/* ==========================================================================
   CHANNELS SECTION ("30+ channels and counting")
   Scoped under #ki-channels-sec. The shared .ki-section-title / .ki-section-sub
   helpers were removed in the trim, so they're re-declared here scoped to this
   section only (hardcoded values, no reliance on :root vars).
   ========================================================================== */
#ki-channels-sec {
	padding: 90px 0 !important;
	background: #fff !important;
	overflow: hidden !important;
}
#ki-channels-sec .ki-wrap {
	margin: 0 auto !important;
	max-width: 1300px !important;
	padding: 0 40px !important;
	box-sizing: border-box !important;
}
#ki-channels-sec .ki-section-title {
	font-size: 36px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #111827 !important;
	margin-bottom: 14px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-channels-sec .ki-section-sub {
	font-size: 17px !important;
	color: #6B7280 !important;
	line-height: 1.65 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-channels-sec .ki-channels-header {
	text-align: center !important;
	margin-bottom: 56px !important;
}
#ki-channels-sec .ki-channels-count {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-transform: uppercase !important;
	padding: 5px 16px !important;
	font-size: 13px !important;
	color: #0A5A94 !important;
	font-weight: 600 !important;
	margin-bottom: 16px !important;
	letter-spacing: .06em !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}

/* browser frame */
#ki-channels-sec .ki-browser {
	background: #fff !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 18px !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.06) !important;
	overflow: hidden !important;
	position: relative !important;
	max-width: 1100px !important;
	margin: 0 auto !important;
}
#ki-channels-sec .ki-browser-bar {
	background: #F8F9FA !important;
	border-bottom: 1px solid #E5E7EB !important;
	padding: 14px 20px !important;
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
}
#ki-channels-sec .ki-browser-url {
	flex: 1 !important;
	background: #fff !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 8px !important;
	padding: 6px 14px !important;
	font-size: 12px !important;
	color: #6B7280 !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	max-width: 670px !important;
	margin: 0 auto !important;
	justify-content: center !important;
}
#ki-channels-sec .ki-browser-url-lock {
	color: #0A5A94 !important;
	font-size: 11px !important;
}

/* channel grid inside browser */
#ki-channels-sec .ki-channel-grid-wrap {
	padding: 28px 28px 24px !important;
}
#ki-channels-sec .ki-channel-cat-label {
	font-size: 10px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.12em !important;
	color: #6B7280 !important;
	font-weight: 600 !important;
	margin-bottom: 10px !important;
	padding-left: 2px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-channels-sec .ki-channel-row {
	display: grid !important;
	grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
	gap: 10px !important;
	margin-bottom: 6px !important;
}
#ki-channels-sec .ki-channel-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 14px 6px 10px !important;
	transition: all 0.2s !important;
	cursor: pointer !important;
	justify-content: space-between !important;
	border-radius: 5px !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	background: #FFF !important;
	box-shadow: 0 5px 4px 0 rgba(0, 0, 0, 0.07) !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
#ki-channels-sec .ki-channel-item:hover {
	background: #F3F9FF !important;
	border-color: rgba(10, 90, 148, 0.15) !important;
	transform: translateY(-2px) !important;
}
#ki-channels-sec .ki-channel-icon {
	width: 44px !important;
	height: 44px !important;
	border-radius: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	flex-shrink: 0 !important;
}
#ki-channels-sec .ki-channel-icon img {
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}
#ki-channels-sec .ki-channel-name {
	font-size: 10.5px !important;
	color: #6B7280 !important;
	font-weight: 500 !important;
	text-align: center !important;
	line-height: 1.3 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}

/* floating bolt badge */
#ki-channels-sec .ki-channels-badge-wrap {
	position: absolute !important;
	top: -14px !important;
	right: 32px !important;
	z-index: 10 !important;
}
#ki-channels-sec .ki-channels-bolt {
	width: 50px !important;
	height: 50px !important;
	background: #111827 !important;
	border-radius: 50% !important;
	border: 4px solid #fff !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 26px !important;
	margin-top: 18px !important;
}

/* channel category divider */
#ki-channels-sec .ki-ch-divider {
	height: 1px !important;
	margin: 14px 0 16px !important;
}

/* responsive */
@media (max-width: 1340px) {
	#ki-channels-sec .ki-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 1199px) {
	#ki-channels-sec .ki-channel-row { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}
@media (max-width: 980px) {
	#ki-channels-sec .ki-channel-row { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
	#ki-channels-sec .ki-section-title { font-size: 28px !important; }
	#ki-channels-sec .ki-channels-bolt { margin-right: -20px !important; }
}
@media (max-width: 767px) {
	#ki-channels-sec { padding: 56px 0 !important; }
	#ki-channels-sec .ki-wrap { padding-left: 16px !important; padding-right: 16px !important; }
	#ki-channels-sec .ki-section-title { font-size: 26px !important; }
	#ki-channels-sec .ki-channel-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	#ki-channels-sec .ki-channel-grid-wrap { padding: 20px 16px !important; }
	#ki-channels-sec .ki-browser-url { font-size: 11px !important; }
}
@media (max-width: 480px) {
	#ki-channels-sec .ki-channel-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
}

/* ==========================================================================
   THE PLATFORM / CAPABILITIES SECTION
   Scoped under #ki-caps. Own header classes (ki-caps-label/title/sub) so
   nothing here depends on the shared .ki-section-* helpers, which no longer
   exist after the earlier trim.
   ========================================================================== */
#ki-caps {
	background: #fff !important;
	padding: 96px 0 !important;
}
#ki-caps .ki-wrap {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	box-sizing: border-box !important;
}
#ki-caps .ki-caps-header {
	max-width: 760px !important;
	margin: 0 auto 56px !important;
	text-align: center !important;
}
#ki-caps .ki-caps-label {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #0A5A94 !important;
	font-weight: 600 !important;
	margin-bottom: 12px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-caps .ki-caps-title {
	font-size: 36px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #111827 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-caps .ki-caps-sub {
	font-size: 17px !important;
	color: #6B7280 !important;
	line-height: 1.65 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-caps .ki-caps-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 18px !important;
}
#ki-caps .ki-cap-card {
	background: #F9FAFB !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 10px !important;
	padding: 24px !important;
	border-left: 3px solid #0A5A94 !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
#ki-caps .ki-cap-card--ai {
	border-left-color: #B565FF !important;
}
#ki-caps .ki-cap-card h4 {
	font-size: 15px !important;
	font-weight: 700 !important;
	margin: 0 0 9px !important;
	padding: 0 !important;
	color: #111827 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	line-height: 1.3 !important;
}
#ki-caps .ki-cap-card p {
	font-size: 12.5px !important;
	color: #6B7280 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.6 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}

@media (max-width: 1340px) {
	#ki-caps .ki-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 980px) {
	#ki-caps .ki-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	#ki-caps .ki-caps-title { font-size: 30px !important; }
}
@media (max-width: 600px) {
	#ki-caps { padding: 64px 0 !important; }
	#ki-caps .ki-wrap { padding-left: 16px !important; padding-right: 16px !important; }
	#ki-caps .ki-caps-grid { grid-template-columns: minmax(0, 1fr) !important; }
	#ki-caps .ki-caps-title { font-size: 26px !important; }
}

/* ==========================================================================
   KONNECT AI+ SECTION
   Scoped under #ki-aiplus-sec, own header + card classes, hardcoded colours.
   ========================================================================== */
#ki-aiplus-sec {
	background: #0B1628 !important;
	padding: 100px 0 !important;
}
#ki-aiplus-sec .ki-wrap {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	box-sizing: border-box !important;
}
#ki-aiplus-sec .ki-aiplus-header {
	max-width: 760px !important;
	margin: 0 auto 56px !important;
	text-align: center !important;
}
#ki-aiplus-sec .ki-aiplus-label {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	font-weight: 600 !important;
	margin-bottom: 14px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	display: inline-block !important;
	background: var(--KI-AI, linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%)) !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
#ki-aiplus-sec .ki-aiplus-title {
	font-size: 36px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #FFFFFF !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-aiplus-sec .ki-aiplus-sub {
	font-size: 17px !important;
	color: rgba(255, 255, 255, 0.55) !important;
	line-height: 1.65 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-aiplus-sec .ki-aiplus-cards {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
}
#ki-aiplus-sec .ki-aiplus-card {
	background: #111f35 !important;
	border: 1px solid #223753 !important;
	border-radius: 14px !important;
	padding: 30px !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
#ki-aiplus-sec .ki-aiplus-card-header {
	margin-bottom: 16px !important;
	min-height: 30px !important;
	display: flex !important;
	align-items: center !important;
}
#ki-aiplus-sec .ki-aiplus-logo {
	display: block !important;
	height: 28px !important;
	width: auto !important;
	max-width: 100% !important;
}
#ki-aiplus-sec .ki-aiplus-name {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	line-height: 1.2 !important;
}
/* AI Classification — gradient text, exact spec as requested */
#ki-aiplus-sec .ki-aiplus-name--gradient {
	background: var(--KI-AI, linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%)) !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
#ki-aiplus-sec .ki-aiplus-desc {
	font-size: 13.5px !important;
	color: rgba(255, 255, 255, 0.55) !important;
	line-height: 1.6 !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-aiplus-sec .ki-aiplus-mock {
	background: #0a1424 !important;
	border-radius: 10px !important;
	padding: 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
#ki-aiplus-sec .ki-aiplus-row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
}
#ki-aiplus-sec .ki-aiplus-row--nolabel { padding-left: 0 !important; }
#ki-aiplus-sec .ki-aiplus-tag {
	flex: 0 0 auto !important;
	width: 52px !important;
	padding-top: 6px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: .03em !important;
	color: rgba(255, 255, 255, 0.35) !important;
	line-height: 1.3 !important;
}
#ki-aiplus-sec .ki-aiplus-bubble {
	flex: 1 1 0 !important;
	min-width: 0 !important;
	background: #1a2f4a !important;
	color: #FFFFFF !important;
	padding: 9px 12px !important;
	border-radius: 8px !important;
	font-size: 12px !important;
	line-height: 1.55 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	overflow-wrap: anywhere !important;
	box-sizing: border-box !important;
}
#ki-aiplus-sec .ki-aiplus-bubble--sys {
	background: transparent !important;
	border: 1px dashed #2a3f58 !important;
	color: rgba(255, 255, 255, 0.5) !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 11px !important;
}
#ki-aiplus-sec .ki-aiplus-bubble--suggest {
	background: #0A5A94 !important;
	color: #FFFFFF !important;
}

@media (max-width: 1340px) {
	#ki-aiplus-sec .ki-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 980px) {
	#ki-aiplus-sec .ki-aiplus-cards { grid-template-columns: minmax(0, 1fr) !important; }
	#ki-aiplus-sec .ki-aiplus-title { font-size: 30px !important; }
}
@media (max-width: 600px) {
	#ki-aiplus-sec { padding: 64px 0 !important; }
	#ki-aiplus-sec .ki-wrap { padding-left: 16px !important; padding-right: 16px !important; }
	#ki-aiplus-sec .ki-aiplus-title { font-size: 26px !important; }
}

/* ==========================================================================
   THE CX HUB SECTION
   Scoped under #ki-cxhub, own header + card classes, hardcoded colours.
   ========================================================================== */
#ki-cxhub {
	background: #fff !important;
	padding: 96px 0 !important;
}
#ki-cxhub .ki-wrap {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	box-sizing: border-box !important;
}
#ki-cxhub .ki-cxhub-header {
	max-width: 760px !important;
	margin: 0 auto 56px !important;
	text-align: center !important;
}
#ki-cxhub .ki-cxhub-label {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #0A5A94 !important;
	font-weight: 600 !important;
	margin-bottom: 12px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-cxhub .ki-cxhub-title {
	font-size: 34px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #111827 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-cxhub .ki-cxhub-sub {
	font-size: 16px !important;
	color: #6B7280 !important;
	line-height: 1.65 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}

#ki-cxhub .ki-cxhub-visual {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
	gap: 32px !important;
	align-items: center !important;
}

/* left: fragmented stack */
#ki-cxhub .ki-cxhub-side-title {
	font-size: 14px !important;
	color: #374151 !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	font-weight: 600 !important;
	text-align: center !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-cxhub .ki-cxhub-tools {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}
#ki-cxhub .ki-cxhub-tool {
	background: #F9FAFB !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 8px !important;
	padding: 13px 18px !important;
	font-size: 13px !important;
	color: #6B7280 !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
#ki-cxhub .ki-cxhub-tool::before {
	content: '' !important;
	width: 7px !important;
	height: 7px !important;
	border-radius: 50% !important;
	background: #EF4444 !important;
	flex-shrink: 0 !important;
}

/* middle: arrow */
#ki-cxhub .ki-cxhub-arrow {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	color: #0A5A94 !important;
}
#ki-cxhub .ki-cxhub-arrow svg {
	width: 28px !important;
	height: 28px !important;
	display: block !important;
}
#ki-cxhub .ki-cxhub-arrow span {
	font-size: 11px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	color: #9CA3AF !important;
	letter-spacing: .04em !important;
}

/* right: hub card */
#ki-cxhub .ki-cxhub-card {
	background: #0B1628 !important;
	border-radius: 16px !important;
	padding: 36px 32px !important;
	text-align: center !important;
	box-shadow: 0 22px 48px rgba(11, 22, 40, 0.28) !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
#ki-cxhub .ki-cxhub-card-logo {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	color: rgba(255, 255, 255, 0.55) !important;
	margin-bottom: 14px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-cxhub .ki-cxhub-card-title {
	font-size: 24px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	line-height: 1.25 !important;
}
#ki-cxhub .ki-cxhub-card-desc {
	font-size: 13.5px !important;
	color: rgba(255, 255, 255, 0.55) !important;
	line-height: 1.6 !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-cxhub .ki-cxhub-modlist {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	justify-content: center !important;
}
#ki-cxhub .ki-cxhub-modlist span {
	font-size: 11px !important;
	font-weight: 500 !important;
	color: rgba(255, 255, 255, 0.75) !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 20px !important;
	padding: 6px 14px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	white-space: nowrap !important;
}
#ki-cxhub .ki-cxhub-mod--ai {
	color: #FFFFFF !important;
	background: linear-gradient(96deg, rgba(58, 134, 255, 0.35) -11.44%, rgba(181, 101, 255, 0.35) 41.88%, rgba(255, 143, 171, 0.35) 78.67%) !important;
	border: 1px solid rgba(181, 101, 255, 0.5) !important;
}

@media (max-width: 1340px) {
	#ki-cxhub .ki-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 900px) {
	#ki-cxhub .ki-cxhub-visual { grid-template-columns: minmax(0, 1fr) !important; }
	#ki-cxhub .ki-cxhub-arrow { transform: rotate(90deg) !important; margin: 4px 0 !important; }
}
@media (max-width: 600px) {
	#ki-cxhub { padding: 64px 0 !important; }
	#ki-cxhub .ki-wrap { padding-left: 16px !important; padding-right: 16px !important; }
	#ki-cxhub .ki-cxhub-title { font-size: 26px !important; }
}

/* ==========================================================================
   GO DEEPER / EXPLORE SECTION
   Scoped under #ki-explore, own classes, hardcoded colours.
   ========================================================================== */
#ki-explore {
	background: #fff !important;
	padding: 90px 0 !important;
}
#ki-explore .ki-wrap {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	box-sizing: border-box !important;
}
#ki-explore .ki-explore-header {
	text-align: center !important;
	margin-bottom: 48px !important;
}
#ki-explore .ki-explore-label {
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #0A5A94 !important;
	font-weight: 600 !important;
	margin-bottom: 12px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-explore .ki-explore-title {
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #111827 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-explore .ki-explore-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
}
#ki-explore .ki-explore-card {
	display: block !important;
	background: #fff !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 12px !important;
	padding: 26px !important;
	text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}
#ki-explore .ki-explore-card:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08) !important;
}
#ki-explore .ki-explore-card h4 {
	font-size: 16.5px !important;
	color: #0A5A94 !important;
	margin: 0 0 9px !important;
	padding: 0 !important;
	font-weight: 700 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	line-height: 1.3 !important;
}
#ki-explore .ki-explore-card p {
	font-size: 13.5px !important;
	color: #6B7280 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.55 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-explore .ki-explore-go {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #1a7bc4 !important;
	margin-top: 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-explore .ki-explore-go svg { display: inline-block !important; flex-shrink: 0 !important; }

@media (max-width: 1340px) {
	#ki-explore .ki-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 900px) {
	#ki-explore .ki-explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
	#ki-explore { padding: 56px 0 !important; }
	#ki-explore .ki-wrap { padding-left: 16px !important; padding-right: 16px !important; }
	#ki-explore .ki-explore-title { font-size: 26px !important; }
	#ki-explore .ki-explore-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ==========================================================================
   FINAL CTA SECTION
   Scoped under #ki-finalcta, own classes, hardcoded colours.
   ========================================================================== */
#ki-finalcta {
	background: #0B1628 !important;
	padding: 90px 0 !important;
}
#ki-finalcta .ki-wrap {
	max-width: 1300px !important;
	margin: 0 auto !important;
	padding: 0 40px !important;
	box-sizing: border-box !important;
}
#ki-finalcta .ki-finalcta-header {
	text-align: center !important;
	max-width: 760px !important;
	margin: 0 auto 46px !important;
}
#ki-finalcta .ki-finalcta-title {
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: #FFFFFF !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-finalcta .ki-finalcta-title--accent {
	color: #3B82F6 !important;
}
#ki-finalcta .ki-finalcta-sub {
	font-size: 15px !important;
	color: rgba(255, 255, 255, 0.5) !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-finalcta .ki-finalcta-cards {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
	max-width: 980px !important;
	margin: 0 auto !important;
}
#ki-finalcta .ki-finalcta-card {
	display: block !important;
	text-decoration: none !important;
	border-radius: 12px !important;
	padding: 26px 24px !important;
	background: #1a2f4a !important;
	border: 1px solid #2a3f58 !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	transition: transform .18s ease !important;
}
#ki-finalcta .ki-finalcta-card:hover {
	transform: translateY(-3px) !important;
}
#ki-finalcta .ki-finalcta-card--primary {
	background: #0A5A94 !important;
	border-color: #0A5A94 !important;
}
#ki-finalcta .ki-finalcta-card--ai {
	background: #1a1440 !important;
	border-color: #3a2a6b !important;
}
#ki-finalcta .ki-finalcta-card h4 {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 0 9px !important;
	padding: 0 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	line-height: 1.3 !important;
}
#ki-finalcta .ki-finalcta-card p {
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.6) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.55 !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-finalcta .ki-finalcta-krc {
	background: var(--KI-AI, linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%)) !important;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
#ki-finalcta .ki-finalcta-foot {
	text-align: center !important;
	margin-top: 40px !important;
	font-size: 12.5px !important;
	color: rgba(255, 255, 255, 0.35) !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}

@media (max-width: 1340px) {
	#ki-finalcta .ki-wrap { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 900px) {
	#ki-finalcta .ki-finalcta-cards { grid-template-columns: minmax(0, 1fr) !important; }
	#ki-finalcta .ki-finalcta-title { font-size: 26px !important; }
}
@media (max-width: 600px) {
	#ki-finalcta { padding: 56px 0 !important; }
	#ki-finalcta .ki-wrap { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ==========================================================================
   RESPONSIVE LAYER — trimmed to Hero + KRC in Action only
   (must come after every other rule so it wins on source order)
   ========================================================================== */

@media (max-width: 1340px) {
	.ki-wrap,
	.ki-hero-inner {
		padding-left: 24px;
		padding-right: 24px;
	}
	#ki-krc .kx-wrap { padding: 0 24px; }
}

@media (max-width: 1199px) {
	.ki-hero-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
		padding-top: 64px;
		padding-bottom: 72px;
		text-align: center;
	}
	.ki-hero-inner > div:first-child {
		max-width: 720px;
		margin: 0 auto;
	}
	.ki-hero-badge { justify-content: center; }
	.ki-hero h1,
	.ki-hero h2 {
		margin-left: auto;
		margin-right: auto;
	}
	.ki-hero-sub {
		max-width: 620px;
		margin-left: auto;
		margin-right: auto;
	}
	/* stats + chips follow the centred stacked layout */
	.ki-hero .kh-stats,
	.ki-hero .kh-logo-strip { justify-content: center; }
	.ki-hero .kh-stat { align-items: center; }
	.ki-hero-ctas {
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-bottom: 28px;
	}
	.ki-hero-social-proof { justify-content: center; }

	.ki-hero-visual {
		display: block;
		width: 100%;
	}
	/* Dashboard size is set here (not by the fit script) so it always fills
	   the tablet width. !important beats the inline value the script sets. */
	#ki-dash { --kih-s: 1.25 !important; }          /* 945px wide */
	#ki-dash .kih-mock-wrap { margin: 0 auto !important; }
}

/* ── stacked-hero dashboard sizes (each fits inside 100vw − 48px) ───── */
@media (max-width: 999px) { #ki-dash { --kih-s: 1.05 !important; } }  /* 794px */
@media (max-width: 859px) { #ki-dash { --kih-s: 0.95 !important; } }  /* 718px */
@media (max-width: 767px) { #ki-dash { --kih-s: 0.72 !important; } }  /* 544px */

@media (max-width: 1024px) {
	#ki-krc { padding: 72px 0 80px; }
	#ki-krc .kx-layout { grid-template-columns: minmax(0, 1fr); }
	#ki-krc .kx-sidebar { position: static; }
	#ki-krc .kx-panel { min-height: 0; }
	#ki-krc .kx-headline {
		font-size: 36px;
		line-height: 1.2;
		letter-spacing: -.02em;
	}
	#ki-krc .kx-sub { max-width: 640px; }

	/* questions sit side by side on tablets instead of a long single list */
	#ki-krc .kx-qlist {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		padding-bottom: 0;
	}
}

@media (max-width: 900px) {
	.ki-hero h1,
	.ki-hero h2 { font-size: 36px; }
}

@media (max-width: 767px) {
	.ki-hero h1,
	.ki-hero h2 { font-size: 32px; line-height: 1.3; letter-spacing: -.5px; }
	.ki-hero-sub { font-size: 15.5px; }

	/* KRC */
	#ki-krc { padding: 56px 0 64px; }
	#ki-krc .kx-headline { font-size: 28px; }
	#ki-krc .kx-headline br { display: none; }
	#ki-krc .kx-sub { font-size: 15.5px; line-height: 1.6; }
	#ki-krc .kx-qlist { display: block; padding-bottom: 8px; }
	#ki-krc .kx-bubble { max-width: 100%; }
}

@media (max-width: 599px) {
	
	.ki-hero-inner {
		padding-top: 40px;
		padding-bottom: 48px;
		text-align: left;
	}
	.ki-hero-badge,
	.ki-hero-ctas,
	.ki-hero-social-proof,
	.ki-hero .kh-stats,
	.ki-hero .kh-logo-strip { justify-content: flex-start; }
	.ki-hero .kh-stat { align-items: flex-start; }
		.ki-hero h1,
	.ki-hero h2,
	.ki-hero-sub { margin-left: 0; margin-right: 0; }
	.ki-hero-ctas { margin-bottom: 0; }
}

@media (max-width: 480px) {
	.ki-wrap,
	.ki-hero-inner {
		padding-left: 16px;
		padding-right: 16px;
	}
	#ki-krc .kx-wrap { padding: 0 16px; }

	.ki-hero h1,
	.ki-hero h2 { font-size: 28px; }
	.ki-hero-ctas { gap: 10px; }

	/* KRC */
	#ki-krc .kx-headline { font-size: 24px; }
	#ki-krc .kx-side-head { padding: 18px 16px 16px; }
	#ki-krc .kx-qitem { padding: 12px 16px; }
	#ki-krc .kx-topbar { padding: 12px 14px; }
	#ki-krc .kx-logo span { font-size: 18px; }
}

/* ==========================================================================
   MOTION + POLISH LAYER
   Progressive enhancement driven by assets/js/homepagenew.js.
   - `html.ki-js` is added by the one-line inline script at the top of the
     template (and again by the JS file as a fallback). Nothing below hides
     content unless that class is present, so the page is fully readable
     with JavaScript disabled.
   - `[data-reveal]` + `.is-in` are set by the JS reveal system.
   - Every animation is switched off under prefers-reduced-motion.
   ========================================================================== */

@keyframes ki-rise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}
@keyframes ki-pop {
	0%   { opacity: 0; transform: translateY(6px) scale(.96); }
	60%  { opacity: 1; transform: translateY(0) scale(1.01); }
	100% { opacity: 1; transform: none; }
}

/* ---- generic scroll reveal ------------------------------------------------ */
html.ki-js [data-reveal] { opacity: 0; }
html.ki-js [data-reveal].is-in {
	opacity: 1;
	animation: ki-rise .75s cubic-bezier(.16, 1, .3, 1) var(--rv-d, 0ms) backwards;
}
html.ki-js [data-reveal].is-in.no-anim { animation: none; }

/* ---- hero: background, entrance stagger ---------------------------------- */
.ki-hero::before {
	z-index: 1;
	animation: ki-aurora 16s ease-in-out infinite alternate;
}
@keyframes ki-aurora {
	from { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
	to   { transform: translate3d(5%, -4%, 0) scale(1.1); opacity: .85; }
}
/* (Hero grid overlay removed — the aurora glow alone is the background.) */
html.ki-js .ki-hero-inner > div:first-child > * {
	animation: ki-rise .8s cubic-bezier(.16, 1, .3, 1) backwards;
}
html.ki-js .ki-hero-inner > div:first-child > :nth-child(1) { animation-delay: .05s; }
html.ki-js .ki-hero-inner > div:first-child > :nth-child(2) { animation-delay: .15s; }
html.ki-js .ki-hero-inner > div:first-child > :nth-child(3) { animation-delay: .25s; }
html.ki-js .ki-hero-inner > div:first-child > :nth-child(4) { animation-delay: .35s; }
html.ki-js .ki-hero-inner > div:first-child > :nth-child(5) { animation-delay: .42s; }
html.ki-js .ki-hero-inner > div:first-child > :nth-child(6) { animation-delay: .48s; }
html.ki-js .ki-hero-inner > div:first-child > :nth-child(7) { animation-delay: .56s; }
html.ki-js .ki-hero-visual {
	animation: ki-rise 1s cubic-bezier(.16, 1, .3, 1) .3s backwards;
}

/* hero buttons — real hover states */
.ki-btn-primary,
.ki-btn-outline {
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.ki-btn-primary:hover {
	background: #0B6AAE;
	border-color: #0B6AAE;
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(10, 90, 148, .38);
}
.ki-btn-outline:hover {
	border-color: rgba(255, 255, 255, .75);
	background: rgba(255, 255, 255, .04);
	transform: translateY(-1px);
}

/* hero "Trusted by" marquee (built by JS; static wrap without JS) */
.ki-hero .kh-logo-strip.is-marquee {
	display: block;
	overflow: hidden;
	gap: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ki-hero .kh-marquee-track {
	display: flex;
	width: max-content;
	animation: kh-mq var(--kh-mq-dur, 28s) linear infinite;
	will-change: transform;
}
.ki-hero .kh-marquee-track .kh-logo-chip { margin-right: 10px; }
.ki-hero .kh-logo-strip.is-marquee:hover .kh-marquee-track { animation-play-state: paused; }
@keyframes kh-mq { to { transform: translateX(-50%); } }

/* ---- problem ------------------------------------------------------------- */
#ki-problem .kp-prob-card {
	transition: transform .22s ease, box-shadow .22s ease !important;
}
#ki-problem .kp-prob-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 16px 36px rgba(10, 90, 148, .12) !important;
}
#ki-problem .kp-prob-num { transition: color .25s ease !important; }
#ki-problem .kp-prob-card:hover .kp-prob-num { color: #0A5A94 !important; }

/* ---- channels ------------------------------------------------------------ */
#ki-channels-sec .ki-channel-icon { transition: transform .2s ease !important; }
#ki-channels-sec .ki-channel-item:hover .ki-channel-icon { transform: translateY(-2px) scale(1.06) !important; }
#ki-channels-sec .ki-channels-bolt { animation: ki-bolt 3.2s ease-in-out infinite; }
@keyframes ki-bolt {
	0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .2), 0 0 0 0 rgba(255, 193, 7, .0); }
	50%      { box-shadow: 0 8px 24px rgba(0, 0, 0, .2), 0 0 0 10px rgba(255, 193, 7, .16); }
}

/* ---- platform / capabilities -------------------------------------------- */
#ki-caps .ki-cap-card {
	position: relative !important;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
#ki-caps .ki-cap-card:hover {
	transform: translateY(-4px) !important;
	border-color: #0A5A94 !important;
	box-shadow: 0 16px 36px rgba(10, 90, 148, .12) !important;
}
#ki-caps .ki-cap-card--ai:hover { border-color: #B565FF !important; }
#ki-caps .ki-cap-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	margin-bottom: 14px !important;
	border-radius: 10px !important;
	background: #E6F0F8 !important;
	color: #0A5A94 !important;
	transition: background .22s ease, color .22s ease, transform .22s ease !important;
}
#ki-caps .ki-cap-icon svg { width: 20px !important; height: 20px !important; display: block !important; }
#ki-caps .ki-cap-card:hover .ki-cap-icon { background: #0A5A94 !important; color: #FFFFFF !important; transform: scale(1.05) !important; }
#ki-caps .ki-cap-card--ai .ki-cap-icon { background: #F1E9FF !important; color: #8A4DE0 !important; }
#ki-caps .ki-cap-card--ai:hover .ki-cap-icon { background: linear-gradient(96deg, #3A86FF, #B565FF, #FF8FAB) !important; color: #FFFFFF !important; }

/* ---- Konnect AI+ live chat demo ------------------------------------------ */
#ki-aiplus-sec .ki-aiplus-card {
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
#ki-aiplus-sec .ki-aiplus-card:hover {
	transform: translateY(-4px) !important;
	border-color: #2F4E78 !important;
	box-shadow: 0 20px 44px rgba(0, 0, 0, .3) !important;
}
#ki-aiplus-sec .ki-aiplus-row { position: relative !important; }
#ki-aiplus-sec .ki-aiplus-card.is-demo .ki-aiplus-row:not(.is-on) { visibility: hidden !important; }
#ki-aiplus-sec .ki-aiplus-card.is-demo .ki-aiplus-row.is-on > * {
	animation: ki-pop .38s cubic-bezier(.16, 1, .3, 1) backwards;
}
#ki-aiplus-sec .ki-aiplus-typing {
	position: absolute !important;
	left: 62px !important;
	top: 0 !important;
	display: none !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 11px 14px !important;
	border-radius: 8px !important;
	background: #1a2f4a !important;
	visibility: visible !important;
}
#ki-aiplus-sec .ki-aiplus-row--nolabel .ki-aiplus-typing { left: 0 !important; }
#ki-aiplus-sec .ki-aiplus-typing.is-on { display: inline-flex !important; }
#ki-aiplus-sec .ki-aiplus-typing i {
	display: block !important;
	width: 5px !important;
	height: 5px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .6) !important;
	animation: ki-typing 1s ease-in-out infinite;
}
#ki-aiplus-sec .ki-aiplus-typing i:nth-child(2) { animation-delay: .15s; }
#ki-aiplus-sec .ki-aiplus-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ki-typing {
	0%, 80%, 100% { opacity: .3; transform: translateY(0); }
	40%           { opacity: 1;  transform: translateY(-3px); }
}
#ki-aiplus-sec .ki-aiplus-card.is-done .ki-aiplus-bubble--suggest {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 20px rgba(10, 90, 148, .35) !important;
	transition: box-shadow .4s ease !important;
}

/* ---- CX hub: fragmented tools assemble into the hub ---------------------- */
#ki-cxhub .ki-cxhub-tool {
	transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1), border-color .2s ease !important;
}
#ki-cxhub.is-demo .ki-cxhub-tool:not(.is-on) { opacity: 0 !important; transform: translateX(-18px) !important; }
#ki-cxhub .ki-cxhub-modlist span {
	transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.34, 1.56, .64, 1) !important;
}
#ki-cxhub.is-demo .ki-cxhub-modlist span:not(.is-on) { opacity: 0 !important; transform: scale(.7) !important; }
#ki-cxhub.is-unified .ki-cxhub-arrow svg { animation: ki-arrow 1.6s ease-in-out infinite; }
@keyframes ki-arrow {
	0%, 100% { transform: translateX(0); opacity: 1; }
	50%      { transform: translateX(6px); opacity: .6; }
}
#ki-cxhub.is-unified .ki-cxhub-card {
	box-shadow: 0 22px 48px rgba(11, 22, 40, .28), 0 0 0 1px rgba(10, 90, 148, .35), 0 0 60px rgba(10, 90, 148, .25) !important;
	transition: box-shadow .8s ease !important;
}

/* ---- explore ------------------------------------------------------------- */
#ki-explore .ki-explore-go svg { transition: transform .2s ease !important; }
#ki-explore .ki-explore-card:hover .ki-explore-go svg { transform: translateX(4px) !important; }
#ki-explore .ki-explore-card:hover { border-color: #0A5A94 !important; }

/* ---- final CTA glow ------------------------------------------------------ */
#ki-finalcta { position: relative !important; overflow: hidden !important; }
#ki-finalcta::before {
	content: '';
	position: absolute;
	left: 50%;
	top: -40%;
	width: 900px;
	height: 600px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(10, 90, 148, .45) 0%, rgba(59, 130, 246, .18) 35%, transparent 70%);
	pointer-events: none;
	animation: ki-glow 10s ease-in-out infinite alternate;
}
@keyframes ki-glow {
	from { transform: translateX(-50%) scale(1); opacity: .9; }
	to   { transform: translateX(-46%) scale(1.12); opacity: 1; }
}
#ki-finalcta .ki-wrap { position: relative !important; z-index: 1 !important; }
#ki-finalcta .ki-finalcta-card {
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
#ki-finalcta .ki-finalcta-card:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35) !important;
	border-color: rgba(255, 255, 255, .22) !important;
}

/* ---- reduced motion: static page, everything visible --------------------- */
@media (prefers-reduced-motion: reduce) {
	html.ki-js [data-reveal],
	html.ki-js .ki-hero-inner > div:first-child > *,
	html.ki-js .ki-hero-visual { opacity: 1; animation: none !important; }
	.ki-hero::before,
	#ki-finalcta::before,
	#ki-channels-sec .ki-channels-bolt,
	#ki-cxhub.is-unified .ki-cxhub-arrow svg,
	.ki-hero .kh-marquee-track { animation: none !important; }
	#ki-aiplus-sec .ki-aiplus-card.is-demo .ki-aiplus-row:not(.is-on) { visibility: visible !important; }
	#ki-cxhub.is-demo .ki-cxhub-tool:not(.is-on),
	#ki-cxhub.is-demo .ki-cxhub-modlist span:not(.is-on) { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   HERO DASHBOARD — decorative planes
   Two PNGs overlay the dashboard's top-right and bottom-left corners and fly
   continuously (drift + gentle bob), like the reference. Sizes are given in
   design px and ride the same --kih-s scale as the mock so they stay in
   proportion at every breakpoint. pointer-events off so they never block
   clicks; hidden under prefers-reduced-motion (shown static).
   ========================================================================== */
#ki-dash .kih-mock-wrap { position: relative !important; overflow: visible !important; }

#ki-dash .kih-plane {
	position: absolute !important;
	pointer-events: none !important;
	z-index: 6 !important;
	height: auto !important;
	filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)) !important;
	will-change: transform !important;
}

/* top-right plane — nose points right, flies rightward */
#ki-dash .kih-plane-tr {
    width: calc(350px * var(--kih-s)) !important;
    top: calc(-157px * var(--kih-s)) !important;
    right: calc(-114px * var(--kih-s)) !important;
    animation: kih-fly-r 9s ease-in-out infinite !important;
}
/* bottom-left plane — nose points left, flies leftward */
#ki-dash .kih-plane-bl {
 width: 300px!important;
    bottom: calc(-54px * var(--kih-s)) !important;
    left: calc(-81px * var(--kih-s)) !important;
	animation: kih-fly-l 11s ease-in-out infinite !important;
}

/* top-right plane keeps its natural orientation — nose points RIGHT */
@keyframes kih-fly-r {
	0%   { transform: translate(0,0) rotate(0deg); }
	25%  { transform: translate(10px,-8px) rotate(-1.5deg); }
	50%  { transform: translate(20px,4px) rotate(1deg); }
	75%  { transform: translate(9px,-6px) rotate(-1deg); }
	100% { transform: translate(0,0) rotate(0deg); }
}
/* bottom-left plane keeps its natural orientation — nose points LEFT */
@keyframes kih-fly-l {
	0%   { transform: translate(0,0) rotate(0deg); }
	25%  { transform: translate(10px,6px) rotate(1deg); }
	50%  { transform: translate(22px,-5px) rotate(-1.5deg); }
	75%  { transform: translate(8px,5px) rotate(1deg); }
	100% { transform: translate(0,0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	#ki-dash .kih-plane-tr,
	#ki-dash .kih-plane-bl { animation: none !important; transform: none !important; }
}

/* on the small stacked hero the planes would crowd the card — ease them in */
@media (max-width: 767px) {
	#ki-dash .kih-plane-tr { width: calc(160px * var(--kih-s)) !important; right: calc(-10px * var(--kih-s)) !important; }
	#ki-dash .kih-plane-bl { width: calc(150px * var(--kih-s)) !important; left: calc(-24px * var(--kih-s)) !important; }
}
@media (max-width: 599px) {
	#ki-dash .kih-plane { display: none !important; }   /* hero-visual is hidden here anyway */
}
/* ==========================================================================
   HERO DASHBOARD  —  single self-contained block (Figma "Case Study" 566:448)
   This is the ONLY dashboard CSS. It replaces every old #ki-dash / .kih-*
   rule that used to live in homecss.css — delete those (see notes).
   Scale is driven by --kih-s: homepagenew.js sets it on desktop; the media
   queries below are the no-JS / tablet / mobile fallbacks.
   ========================================================================== */
.ki-hero-visual { min-width: 0 !important; }

#ki-dash {
	--kih-s: 0.99;                 /* JS overwrites with the exact fit on desktop */
	display: block !important;
	width: 100% !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	-webkit-font-smoothing: antialiased !important;
}
#ki-dash *, #ki-dash *::before, #ki-dash *::after { box-sizing: border-box !important; }

/* no-JS desktop fallbacks */
@media (max-width: 1299px) { #ki-dash { --kih-s: 0.95; } }
@media (max-width: 1100px) { #ki-dash { --kih-s: 0.88; } }
@media (max-width: 1024px) { #ki-dash { --kih-s: 0.82; } }
@media (max-width:  980px) { #ki-dash { --kih-s: 0.74; } }

/* stacked-hero (tablet / mobile) — full-width column, so a larger scale fits */
@media (max-width: 1199px) { #ki-dash { --kih-s: 1.25 !important; } }
@media (max-width:  999px) { #ki-dash { --kih-s: 1.05 !important; } }
@media (max-width:  859px) { #ki-dash { --kih-s: 0.95 !important; } }
@media (max-width:  767px) { #ki-dash { --kih-s: 0.72 !important; } }

#ki-dash .kd-wrap {
	position: relative;
	width: calc(736px * var(--kih-s, .83));
	height: calc(469px * var(--kih-s, .83));
	margin: 0 auto;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 6px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}
#ki-dash .kd-stage {
	position: absolute;
	left: 0;
	top: 0;
	width: 736px;
	height: 469px;
	transform: scale(var(--kih-s, .83));
	transform-origin: 0 0;

	/* ★ plane placement — tweak these three numbers per plane if you swap the PNGs ★ */
	--tr-x: 520.945px;  --tr-y: -60.088px;   --tr-w: 315.055px;   /* top-right plane   */
	--bl-x: -60.58px;   --bl-y: 375.14px;  --bl-w: 370.65px;    /* bottom-left plane */

	--kd-jak: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
	--kd-dm:  'DM Sans', 'Poppins', system-ui, sans-serif;
}
#ki-dash .kd-mock { position: absolute; inset: 0; }

/* light reset (zero specificity, so every rule below wins) */
#ki-dash .kd-wrap *,
#ki-dash .kd-wrap *::before,
#ki-dash .kd-wrap *::after { box-sizing: border-box; }
#ki-dash .kd-wrap :where(div, span, nav, i, svg, img) { margin: 0; padding: 0; }
#ki-dash .kd-wrap svg { display: block; flex: none; overflow: visible; }
#ki-dash .kd-wrap i { font-style: normal; }

/* ── generic card ─────────────────────────────────────────────────────── */
#ki-dash .kd-card {
	position: absolute;
	z-index: 2;
	background: #0d1929;
	color: #fff;
	animation: kd-fup .55s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms) both;
}

/* ══════════════════ BANNER (app window) ══════════════════ */
#ki-dash .kd-banner {
	position: absolute;
	z-index: 1;
	left: 100.109px;
	top: 84.378px;
	width: 544.392px;
	height: 308.926px;
	background: #0d1929;
	border-radius: 13.118px;
	overflow: hidden;
	animation: kd-fade .6s ease-out both;
}
#ki-dash .kd-banner::after {          /* the 0.656px window border, drawn above the children */
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 .656px rgba(184, 184, 184, .48);
	pointer-events: none;
	z-index: 5;
}

/* top bar */
#ki-dash .kd-topbar {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 27.935px;
	padding: 0 13.118px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #0a5a94;
	border-bottom: .656px solid rgba(255, 255, 255, .08);
}
#ki-dash .kd-tb-l { display: flex; align-items: center; color: #fff; }
#ki-dash .kd-tb-menu { width: 7.472px; height: 7.472px; margin-right: 7.912px; }
#ki-dash .kd-tb-logo {
	display: block;
	width: 61.537px;
	height: 10.853px;
	max-width: none;
	object-fit: contain;
	filter: brightness(0) invert(1);   /* makes the blue logo white on the blue bar */
}
#ki-dash .kd-tb-r { display: flex; align-items: center; gap: 4.664px; }
#ki-dash .kd-search {
	display: flex;
	align-items: center;
	gap: 4.373px;
	height: 10.247px;
	padding: 2.332px 3.498px;
	background: rgba(255, 255, 255, .05);
	border: .292px solid rgba(255, 255, 255, .08);
	border-radius: 5.83px;
	color: #d5d5d5;
}
#ki-dash .kd-search svg { width: 4.372px; height: 4.372px; }
#ki-dash .kd-search-t {
	display: block;
	width: 57.427px;
	font-size: 3.498px;
	line-height: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#ki-dash .kd-bell { position: relative; width: 5px; height: 6.166px; display: flex; align-items: center; justify-content: center; color: #e7e7e7; }
#ki-dash .kd-bell svg { width: 4.664px; height: 4.664px; }
#ki-dash .kd-bell-dot {
	position: absolute;
	right: -.62px; top: -.58px;
	width: 1.749px; height: 1.749px;
	border-radius: .875px;
	background: #ef4444;
	animation: kd-dotp 2.2s ease-out 1s infinite;
}
#ki-dash .kd-me { display: flex; align-items: center; gap: 2.915px; }
#ki-dash .kd-me-av {
	display: flex; align-items: center; justify-content: center;
	width: 9.328px; height: 9.328px;
	border-radius: 4.664px;
	background: rgba(255, 255, 255, .1);
	border: .292px solid rgba(255, 255, 255, .2);
	font: 600 3.498px/1 'Inter', 'Poppins', system-ui, sans-serif;
	color: #fff;
}
#ki-dash .kd-me-x { display: flex; flex-direction: column; min-width: 25.726px; }
#ki-dash .kd-me-n { display: flex; align-items: center; gap: 1.4px; font-size: 3.498px; font-weight: 600; line-height: 4.198px; white-space: nowrap; color: #fff; }
#ki-dash .kd-me-n svg { width: 2.09px; height: 2.09px; }
#ki-dash .kd-me-r { font-size: 2.915px; line-height: 3.498px; white-space: nowrap; color: rgba(224, 237, 255, .65); }

/* body = rail + main */
#ki-dash .kd-body {
	position: absolute;
	left: -.657px; top: 28.203px;
	width: 545.048px; height: 280.723px;
	display: flex;
}
#ki-dash .kd-nav {
	position: relative;
	flex: 0 0 32.795px;
	height: 100%;
	background: #0e1a29;
	border-right: .656px solid rgba(255, 255, 255, .06);
}
#ki-dash .kd-nav-top {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 70.509px;
	background: #0d1929;
	border-right: .656px solid rgba(255, 255, 255, .06);
}
#ki-dash .kd-nav-list { position: absolute; left: 2.624px; width: 27.825px; }
#ki-dash .kd-nl-1 { top: 10.495px; }
#ki-dash .kd-nl-2 { top: 56.59px; }
#ki-dash .kd-nav-item {
	display: flex; align-items: center;
	height: 17.797px;
	padding-left: 8.976px;
	color: rgba(255, 255, 255, .55);
}
#ki-dash .kd-nav-item svg { width: 10.221px; height: 10.221px; }
#ki-dash .kd-nav-item.is-active { background: #0f3550; color: #fff; box-shadow: inset 1.704px 0 0 #0386e5; }
#ki-dash .kd-main { position: relative; flex: 1 1 0; height: 100%; }

/* faint placeholder panels */
#ki-dash .kd-ghost { position: absolute; background: #0e1e35; opacity: .3; border-radius: 11.344px; }
#ki-dash .kd-g1 { left: 6.429px;   top: 80.526px;  width: 212.518px; height: 187.561px; }
#ki-dash .kd-g2 { left: 223.488px; top: 80.526px;  width: 142.183px; height: 187.561px; }
#ki-dash .kd-g3 { left: 370.209px; top: 80.526px;  width: 142.183px; height: 93.78px; }
#ki-dash .kd-g4 { left: 370.209px; top: 179.599px; width: 142.183px; height: 93.78px; }

/* KPI cards */
#ki-dash .kd-kpi {
	position: absolute;
	top: 13.118px;
	width: 119.865px;
	height: 54.011px;
	display: flex;
	align-items: flex-start;
	gap: 8.679px;
	padding: 6.56px 7.871px;
	background: #0d1929;
	border: .656px solid rgba(255, 255, 255, .06);
	border-radius: 5.247px;
	filter: drop-shadow(0 1.089px 1.089px rgba(255, 255, 255, .18));
	animation: kd-fup .55s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms) both;
}
#ki-dash .kd-k1 { left: 6.558px; }
#ki-dash .kd-k2 { left: 132.982px; }
#ki-dash .kd-k3 { left: 259.407px; }
#ki-dash .kd-k4 { left: 385.829px; }
#ki-dash .kd-kpi-ic {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 19.094px; height: 19.094px;
	border-radius: 50%;
	color: #fff;
}
#ki-dash .kd-kpi-ic svg { width: 8.679px; height: 8.679px; }
#ki-dash .kd-kpi-tx { display: flex; flex-direction: column; min-width: 0; }
#ki-dash .kd-kpi-l { font-size: 6.559px; line-height: 10px; white-space: nowrap; color: rgba(255, 255, 255, .4); }
#ki-dash .kd-kpi-v { font-size: 8.679px; line-height: 13px; font-weight: 800; white-space: nowrap; color: #fff; }
#ki-dash .kd-kpi-d { font-size: 7.16px; line-height: 11px; font-weight: 600; white-space: nowrap; color: #10b981; }
#ki-dash .kd-kpi-d--down { font-family: var(--kd-jak); font-size: 6.943px; line-height: 9px; color: #ef4444; }
#ki-dash .kd-kpi-s { font-size: 6.509px; line-height: 10px; white-space: nowrap; color: #486996; }

/* ══════════════════ PASSENGER FEEDBACK ══════════════════ */
#ki-dash .kd-feed {
	left: 37.109px; top: 195.515px;
	width: 318.924px; height: 211.003px;
	padding: 13.604px 9.825px 15.871px;
	border: .756px solid rgba(255, 255, 255, .06);
	border-radius: 12.092px;
	filter: drop-shadow(0 1.124px 1.124px rgba(255, 255, 255, .18));
}
#ki-dash .kd-feed-hd { display: flex; flex-direction: column; padding-bottom: 4.912px; }
#ki-dash .kd-feed-row { display: flex; align-items: center; justify-content: space-between; height: 12px; }
#ki-dash .kd-feed-t { font-size: 7.86px; line-height: 12px; font-weight: 600; white-space: nowrap; color: #fff; }
#ki-dash .kd-feed-link { display: flex; align-items: center; gap: 3.023px; font-size: 8.313px; line-height: 12px; white-space: nowrap; color: #94a3b8; }
#ki-dash .kd-feed-link svg { width: 9.825px; height: 5.6px; }
#ki-dash .kd-feed-s { display: block; font-size: 5.895px; line-height: 9px; white-space: nowrap; color: #64748b; }

#ki-dash .kd-chips { display: flex; gap: 5.215px; margin-top: 3.023px; }
#ki-dash .kd-chip {
	padding: 3.259px 7.822px;
	border: .652px solid #0e346a;
	border-radius: 13.037px;
	background: #04132b;
	font-size: 7.17px;
	line-height: 11px;
	white-space: nowrap;
	color: #6482ad;
}
#ki-dash .kd-chip.is-active { background: #0284c7; border-color: #0284c7; color: #fff; }

#ki-dash .kd-feed-list { margin-top: 3.023px; padding-top: 9.069px; }
#ki-dash .kd-fb {
	display: flex;
	align-items: flex-start;
	gap: 7.558px;
	height: 40.055px;
	padding: 7.558px;
	border-bottom: .756px solid #062e4a;
	animation: kd-fup .45s cubic-bezier(.16, 1, .3, 1) both;
}
#ki-dash .kd-fb:nth-child(1) { animation-delay: 1.0s; }
#ki-dash .kd-fb:nth-child(2) { animation-delay: 1.08s; }
#ki-dash .kd-fb:nth-child(3) { animation-delay: 1.16s; }
#ki-dash .kd-fb-av {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 24.184px; height: 24.184px;
	border-radius: 50%;
	color: #fff;
}
#ki-dash .kd-fb-av svg { width: 13.037px; height: 13.037px; }
#ki-dash .kd-av-x    { background: #000; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); }
#ki-dash .kd-av-star { background: #f59e0b; }
#ki-dash .kd-av-wa   { background: #25d366; }
#ki-dash .kd-av-wa svg { width: 12.168px; height: 12.168px; }
#ki-dash .kd-fb-b { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.512px; }
#ki-dash .kd-fb-h { display: flex; align-items: center; justify-content: space-between; height: 10px; }
#ki-dash .kd-fb-n { font-size: 6.877px; line-height: 10px; font-weight: 600; white-space: nowrap; color: #fff; }
#ki-dash .kd-fb-t { font-size: 4.912px; line-height: 7px; white-space: nowrap; color: #64748b; }
#ki-dash .kd-fb-r { display: flex; align-items: flex-start; gap: 1.5px; }
#ki-dash .kd-fb-m { flex: 1 1 0; min-width: 0; font-size: 4.912px; line-height: 9.825px; white-space: nowrap; overflow: hidden; color: #94a3b8; }
#ki-dash .kd-tag {
	flex: none;
	padding: 1.512px 6.046px;
	border: .756px solid transparent;
	border-radius: 3.023px;
	font-size: 3.93px;
	line-height: 6px;
	font-weight: 500;
	white-space: nowrap;
}
#ki-dash .kd-tag.is-pos { background: rgba(16, 185, 129, .2);  border-color: rgba(16, 185, 129, .3); color: #10b981; }
#ki-dash .kd-tag.is-neu { background: rgba(245, 158, 11, .2);  border-color: rgba(245, 158, 11, .3); color: #f59e0b; }
#ki-dash .kd-tag.is-neg { background: rgba(248, 113, 113, .2); border-color: #f87171; color: #f87171; }

/* ══════════════════ TOP ISSUES ══════════════════ */
#ki-dash .kd-issues {
	left: 364.529px; top: 194.647px;
	width: 133.66px; height: 113.259px;
	padding: 6.822px;
	border: .341px solid rgba(255, 255, 255, .1);
	border-radius: 4.775px;
	font-family: var(--kd-jak);
}
#ki-dash .kd-is-hd { display: flex; align-items: center; justify-content: space-between; height: 7px; }
#ki-dash .kd-is-t { font-family: 'Poppins', system-ui, sans-serif; font-size: 4.775px; line-height: 7px; font-weight: 700; color: #fff; }
#ki-dash .kd-is-link { display: flex; align-items: center; gap: 3.472px; font-family: 'Poppins', system-ui, sans-serif; font-size: 4.093px; line-height: 6px; font-weight: 600; color: #38bdf8; }
#ki-dash .kd-is-link svg { width: 8.679px; height: 5px; }
#ki-dash .kd-is-list { margin-top: 5.457px; }
#ki-dash .kd-is {
	display: flex; align-items: center; justify-content: space-between;
	height: 14.457px;
	margin-top: 3.411px;
	padding: 0 3.414px 0 3.411px;
	background: #031126;
	border-radius: 2.729px;
}
#ki-dash .kd-is.is-first { height: 15.004px; margin-top: 0; }
#ki-dash .kd-is-l { display: flex; align-items: center; gap: 3.411px; font-size: 3.752px; line-height: 5px; white-space: nowrap; color: #fff; }
#ki-dash .kd-is-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 8.186px; height: 8.186px; border-radius: 50%; }
#ki-dash .kd-is-ic--lg { width: 9.547px; height: 9.547px; }
#ki-dash .kd-is-ic svg { width: 5.2px; height: 5.2px; }
#ki-dash .kd-is-ic--lg svg { width: 6.2px; height: 6.2px; }
#ki-dash .kd-is-r { display: flex; flex-direction: column; align-items: flex-end; }
#ki-dash .kd-is-v { font-size: 3.752px; line-height: 5px; font-weight: 700; color: #fff; }
#ki-dash .kd-is-c { font-size: 3.411px; line-height: 4px; }
#ki-dash .kd-up { color: #ef4444; }
#ki-dash .kd-dn { color: #10b981; }

/* ══════════════════ SENTIMENT BY TOUCHPOINT ══════════════════ */
#ki-dash .kd-senti {
	left: 505.133px; top: 195.515px;
	width: 173.63px; height: 90.483px;
	padding: 10.721px;
	border: .536px solid rgba(255, 255, 255, .1);
	border-radius: 7.505px;
	font-family: var(--kd-jak);
}
#ki-dash .kd-senti-t { font-size: 7.505px; line-height: 9px; font-weight: 700; white-space: nowrap; color: #fff; }
#ki-dash .kd-senti-body { display: flex; align-items: center; gap: 10.721px; margin-top: 5.361px; }
#ki-dash .kd-donut { position: relative; flex: none; width: 53.607px; height: 53.607px; }
#ki-dash .kd-donut svg { width: 53.607px; height: 53.607px; transform: rotate(-90deg); }
#ki-dash .kd-ring { fill: none; stroke-width: 6; stroke-linecap: butt; }
#ki-dash .kd-ring-bg  { stroke: rgba(255, 255, 255, .08); }
#ki-dash .kd-ring-pos { stroke: #10b981; }
#ki-dash .kd-ring-neu { stroke: #f59e0b; }
#ki-dash .kd-ring-neg { stroke: #ef4444; }
#ki-dash .kd-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#ki-dash .kd-donut-n { font-size: 8.041px; line-height: 10px; font-weight: 800; white-space: nowrap; color: #fff; }
#ki-dash .kd-donut-l { font-size: 4.825px; line-height: 6px; white-space: nowrap; color: #10b981; }
#ki-dash .kd-senti-leg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4.289px; }
#ki-dash .kd-leg { display: flex; align-items: center; justify-content: space-between; height: 7px; }
#ki-dash .kd-leg-n { display: flex; align-items: center; gap: 3.216px; font-size: 5.897px; line-height: 7px; white-space: nowrap; color: #819ec7; }
#ki-dash .kd-leg-d { flex: none; display: block; width: 4.289px; height: 4.289px; border-radius: 2.144px; }
#ki-dash .kd-leg-v { font-size: 5.897px; line-height: 7px; font-weight: 700; white-space: nowrap; color: #fff; }

/* ══════════════════ TOP FLIGHT ROUTES ══════════════════ */
#ki-dash .kd-routes {
	left: 364.529px; top: 312.685px;
	width: 156.226px; height: 124.648px;
	padding: 7.973px;
	display: flex; flex-direction: column; gap: 6.379px;
	border: .399px solid rgba(255, 255, 255, .1);
	border-radius: 5.581px;
}
#ki-dash .kd-rt-hd { display: flex; align-items: center; justify-content: space-between; height: 9px; }
#ki-dash .kd-rt-t { font-size: 5.788px; line-height: 9px; font-weight: 700; white-space: nowrap; color: #fff; }
#ki-dash .kd-rt-sel { display: flex; align-items: center; gap: 2px; font-size: 4.823px; line-height: 7px; white-space: nowrap; color: #6482ad; }
#ki-dash .kd-rt-sel svg { width: 4px; height: 2.6px; }
#ki-dash .kd-rt { display: flex; flex-direction: column; gap: 1.929px; }
#ki-dash .kd-rt.is-first { padding-top: 2.894px; }
#ki-dash .kd-rt-row { display: flex; align-items: center; justify-content: space-between; height: 8px; font-size: 5.306px; line-height: 8px; font-weight: 600; white-space: nowrap; color: #fff; }
#ki-dash .kd-rt-track { height: 2.894px; border-radius: 1.929px; background: #031126; overflow: hidden; }
#ki-dash .kd-rt-fill {
	display: block;
	height: 100%;
	width: var(--w);
	border-radius: 1.929px;
	background: #0284c7;
	animation: kd-grow .9s cubic-bezier(.16, 1, .3, 1) 1.1s both;
}

/* ══════════════════ INSTAGRAM POST ══════════════════ */
#ki-dash .kd-post {
	left: 530.303px; top: 292.723px;
	width: 129.844px; height: 166.807px;
	display: flex; flex-direction: column;
	border-radius: 6.011px;
	overflow: hidden;
	box-shadow: 0 1.743px 6.1px rgba(182, 182, 182, .25);
	font-family: var(--kd-dm);
}
#ki-dash .kd-post::after {
	content: "";
	position: absolute; inset: 0;
	border: .651px solid rgba(255, 255, 255, .1);
	border-radius: inherit;
	pointer-events: none;
}
#ki-dash .kd-post-hd { flex: none; display: flex; align-items: center; gap: 3.487px; height: 20.165px; padding: 0 6.733px; background: #0d1929; }
#ki-dash .kd-post-av { width: 14.395px; height: 14.395px; }
#ki-dash .kd-post-id { display: flex; flex-direction: column; gap: .12px; }
#ki-dash .kd-post-n { font-size: 3.704px; line-height: 5px; font-weight: 700; color: #fff; white-space: nowrap; }
#ki-dash .kd-post-loc { font-size: 3.05px; line-height: 4px; color: #fff; white-space: nowrap; }
#ki-dash .kd-post-img { flex: none; display: block; width: 129.844px; height: 129.844px; max-width: none; object-fit: cover; background: #10233b; }
#ki-dash .kd-post-acts { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 5.771px; background: #0d1929; color: #fff; }
#ki-dash .kd-post-acts svg { width: 8.382px; height: 8.382px; }
#ki-dash .kd-post-set { display: flex; align-items: center; gap: 3.486px; }

/* ══════════════════ PLANES (same PNGs + same fly animation) ══════════════════ */
#ki-dash .kd-plane {
	position: absolute;
	z-index: 6;
	height: auto;
	max-width: none;
	pointer-events: none;
	filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
	will-change: transform;
}
#ki-dash .kd-plane-tr { left: var(--tr-x); top: var(--tr-y); width: var(--tr-w); animation: kd-fly-r 9s  ease-in-out infinite; }
#ki-dash .kd-plane-bl { left: var(--bl-x); top: var(--bl-y); width: var(--bl-w); animation: kd-fly-l 11s ease-in-out infinite; }

/* ══════════════════ KEYFRAMES ══════════════════ */
@keyframes kd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kd-fup  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kd-grow { from { width: 0; } to { width: var(--w); } }
@keyframes kd-dotp { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); } 70%, 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0); } }
/* identical to the previous kih-fly-r / kih-fly-l */
@keyframes kd-fly-r {
	0%   { transform: translate(0, 0) rotate(0deg); }
	25%  { transform: translate(10px, -8px) rotate(-1.5deg); }
	50%  { transform: translate(20px, 4px) rotate(1deg); }
	75%  { transform: translate(9px, -6px) rotate(-1deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes kd-fly-l {
	0%   { transform: translate(0, 0) rotate(0deg); }
	25%  { transform: translate(10px, 6px) rotate(1deg); }
	50%  { transform: translate(22px, -5px) rotate(-1.5deg); }
	75%  { transform: translate(8px, 5px) rotate(1deg); }
	100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	#ki-dash .kd-wrap *, #ki-dash .kd-wrap *::before, #ki-dash .kd-wrap *::after { animation: none !important; }
	#ki-dash .kd-plane { transform: none !important; }
}
/* ── Trusted-by ticker ── */
.kh-ticker-wrap {
  overflow: hidden;
  margin-bottom:40px;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.kh-ticker-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: kh-ticker-scroll 28s linear infinite;
}
.kh-ticker-wrap:hover .kh-ticker-track {
  animation-play-state: paused;
}
@keyframes kh-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

 
.ki-hero-visual { min-width: 0 !important; }
 
#ki-dash {
  --kv-navy:  #0d1929;
  --kv-panel: #0f1d30;
  --kv-blue:  #0a5a94;
  --kv-hair:  rgba(255,255,255,.07);
  --kv-slate: #94a3b8;
  --kv-muted: #64748b;
  --kv-green: #10b981;
  --kv-amber: #f59e0b;
  --kv-red:   #f87171;
  --kv-s: 0.86;                 /* static fallback; JS/CQ refine it */
  display: block !important;
  width: 100% !important;
  font-family: 'Poppins', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}
#ki-dash *, #ki-dash *::before, #ki-dash *::after { box-sizing: border-box !important; }
#ki-dash :where(p,span,div,nav,h2,h3,i) { margin: 0; padding: 0; }
#ki-dash svg { display: block; flex: none; }
#ki-dash img { display: block; max-width: none; }
#ki-dash i  { font-style: normal; }
 
/* ISOLATION: neutralise theme/plugin CSS leaks inside the mock. Same
   specificity as the component rules but declared BEFORE them, so those rules
   still win for whatever they explicitly set — only un-set props get reset. */
#ki-dash .kv-stage *, #ki-dash .kv-stage *::before, #ki-dash .kv-stage *::after {
  box-sizing: border-box; margin: 0; padding: 0; border: 0;
  background: transparent; box-shadow: none; outline: 0; min-width: 0; min-height: 0;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 400; font-style: normal;
  line-height: normal; letter-spacing: normal; text-transform: none;
  text-decoration: none; text-align: left; list-style: none; text-indent: 0;
}
 
#ki-dash .kv-frame  { container-type: inline-size; width: 100%; }
#ki-dash .kv-holder {
  position: relative;
  width: 100%;
  height: calc(668px * var(--kv-s, .86));
}
@container (min-width: 0px) {          /* only applies where container units work */
  #ki-dash .kv-holder { --kv-s: min(1, calc(100cqw / 701px)); }
}
#ki-dash .kv-stage {
  position: absolute; left: 0; top: 0;
  width: 701px; height: 668px;
  transform: scale(var(--kv-s, .86));
  transform-origin: top left;
  overflow: visible;
  color: #fff;
}
 
/* ── WINDOW SHELL (topbar + rail + empty dark body) ─────────────────── */
#ki-dash .kv-window {
  position: absolute; left: 47px; top: 65px;
  width: 536px; height: 480px;
  background: var(--kv-navy);
  border: .8px solid rgba(184,184,184,.42);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  z-index: 1;
  animation: kv-fade .6s ease-out both;
}
#ki-dash .kv-topbar {
  height: 36px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; background: var(--kv-blue);
  border-bottom: .8px solid rgba(255,255,255,.08);
}
#ki-dash .kv-tb-l { display: flex; align-items: center; gap: 10px; color: #fff; }
#ki-dash .kv-tb-menu { width: 14px; height: 14px; }
#ki-dash .kv-tb-logo { width: 90px; height: auto; filter: brightness(0) invert(1); }
#ki-dash .kv-tb-r { display: flex; align-items: center; gap: 9px; }
#ki-dash .kv-search {
  display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 9px;
  background: rgba(255,255,255,.10); border: .5px solid rgba(255,255,255,.14);
  border-radius: 6px; color: #d5e2ee;
}
#ki-dash .kv-search svg { width: 10px; height: 10px; }
#ki-dash .kv-search span { font-size: 7.5px; white-space: nowrap; opacity: .85; }
#ki-dash .kv-bell { position: relative; color: #eaf2fa; }
#ki-dash .kv-bell svg { width: 13px; height: 13px; }
#ki-dash .kv-bell-dot { position: absolute; top: -1px; right: -1px; width: 5px; height: 5px; border-radius: 50%; background: #ef4444; }
#ki-dash .kv-tb-av {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: .5px solid rgba(255,255,255,.28);
  font-size: 8px; font-weight: 600; color: #fff;
}
#ki-dash .kv-body { display: flex; height: calc(100% - 36px); }
#ki-dash .kv-rail {
  flex: 0 0 42px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 14px 0; background: #0e1a29; border-right: .8px solid var(--kv-hair);
}
#ki-dash .kv-rail-i {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border-radius: 7px; color: rgba(255,255,255,.5);
}
#ki-dash .kv-rail-i svg { width: 15px; height: 15px; }
#ki-dash .kv-rail-i.is-active { background: #0f3550; color: #fff; box-shadow: inset 2px 0 0 #0386e5; }
 
/* ── KPI 2x2 (overlaid on the window body) ──────────────────────────── */
#ki-dash .kv-kpis {
  position: absolute; left: 96px; top: 119px; width: 314px; height: 146px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px;
  z-index: 2;
}
#ki-dash .kv-kpi {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; overflow: hidden;
  background: var(--kv-panel); border: .8px solid var(--kv-hair); border-radius: 10px;
  animation: kv-fup .5s cubic-bezier(.16,1,.3,1) both;
}
#ki-dash .kv-kpi-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; }
#ki-dash .kv-kpi-ic svg { width: 13px; height: 13px; }
#ki-dash .kv-kpi-tx { min-width: 0; display: flex; flex-direction: column; }
#ki-dash .kv-kpi-l  { font-size: 9.5px; line-height: 1.2; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ki-dash .kv-kpi-v  { font-size: 15px; font-weight: 800; line-height: 1.2; color: #fff; }
#ki-dash .kv-kpi-d  { font-size: 9.5px; font-weight: 600; line-height: 1.1; margin-top: 2px; color: var(--kv-green); }
#ki-dash .kv-kpi-d.is-down { color: var(--kv-red); }
#ki-dash .kv-kpi-s  { font-size: 8.5px; line-height: 1.1; color: #486996; margin-top: 1px; }
 
/* ── shared card look ───────────────────────────────────────────────── */
#ki-dash .kv-card {
  position: absolute; z-index: 2;
  background: var(--kv-panel); border: .8px solid var(--kv-hair);
  border-radius: 12px; overflow: hidden;
  animation: kv-fup .55s cubic-bezier(.16,1,.3,1) both;
}
 
/* ── SENTIMENT ──────────────────────────────────────────────────────── */
#ki-dash .kv-senti { left: 47px; top: 278px; width: 221px; height: 115px; padding: 13px 14px; }
#ki-dash .kv-senti-t { font-size: 12px; font-weight: 600; color: #fff; }
#ki-dash .kv-senti-body { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
#ki-dash .kv-donut { position: relative; flex: none; width: 68px; height: 68px; }
#ki-dash .kv-donut svg { width: 68px; height: 68px; transform: rotate(-90deg); }
#ki-dash .kv-ring { fill: none; stroke-width: 5; }
#ki-dash .kv-ring-bg  { stroke: rgba(255,255,255,.08); }
#ki-dash .kv-ring-pos { stroke: var(--kv-green); }
#ki-dash .kv-ring-neu { stroke: var(--kv-amber); }
#ki-dash .kv-ring-neg { stroke: #ef4444; }
#ki-dash .kv-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#ki-dash .kv-donut-n { font-size: 13px; font-weight: 800; color: #fff; line-height: 1; }
#ki-dash .kv-donut-l { font-size: 7.5px; color: var(--kv-green); margin-top: 2px; }
#ki-dash .kv-senti-leg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#ki-dash .kv-leg { display: flex; align-items: center; justify-content: space-between; }
#ki-dash .kv-leg-n { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--kv-slate); }
#ki-dash .kv-leg-d { width: 6px; height: 6px; border-radius: 2px; flex: none; }
#ki-dash .kv-leg-v { font-size: 10px; font-weight: 700; color: #fff; }
 
/* ── TOP ISSUES (5 rows w/ icon + value + delta) ────────────────────── */
#ki-dash .kv-issues { left: 98px; top: 406px; width: 170px; height: 144px; padding: 9px; }
#ki-dash .kv-is-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
#ki-dash .kv-is-t  { font-size: 11px; font-weight: 600; color: #fff; }
#ki-dash .kv-is-link { display: flex; align-items: center; gap: 4px; font-size: 8.5px; color: #38bdf8; }
#ki-dash .kv-is-link svg { width: 11px; height: 6px; }
#ki-dash .kv-is-list { display: flex; flex-direction: column; gap: 2px; }
#ki-dash .kv-is { display: flex; align-items: center; gap: 6px; padding: 2px 5px; background: #0b1b30; border-radius: 5px; }
#ki-dash .kv-is-ic { flex: none; display: flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 5px; color: #fff; }
#ki-dash .kv-is-ic svg { width: 9px; height: 9px; }
#ki-dash .kv-is-n { flex: 1 1 0; min-width: 0; font-size: 9px; color: #e6edf5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ki-dash .kv-is-r { flex: none; text-align: right; line-height: 1.1; }
#ki-dash .kv-is-v { font-size: 9px; font-weight: 700; color: #fff; }
#ki-dash .kv-is-c { font-size: 6.5px; font-weight: 600; }
#ki-dash .kv-up { color: #f87171; }
#ki-dash .kv-dn { color: #34d399; }
 
/* ── CUSTOMER FEEDBACK (elevated panel, pokes past window right) ─────── */
#ki-dash .kv-feed {
  left: 282px; top: 278px; width: 395px; height: 269px;
  padding: 16px 18px; display: flex; flex-direction: column;
  background: #101f33; box-shadow: 0 24px 50px rgba(0,0,0,.4); z-index: 3;
}
#ki-dash .kv-feed-hd { display: flex; align-items: center; justify-content: space-between; }
#ki-dash .kv-feed-t  { font-size: 13px; font-weight: 600; color: #fff; }
#ki-dash .kv-feed-link { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--kv-slate); }
#ki-dash .kv-feed-link svg { width: 13px; height: 8px; }
#ki-dash .kv-feed-s { font-size: 9.5px; color: var(--kv-muted); margin-top: 4px; }
#ki-dash .kv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 4px; }
#ki-dash .kv-chip {
  font-size: 9px; line-height: 1; padding: 5px 8px; border-radius: 999px;
  color: #6482ad; background: #04132b; border: .6px solid #0e346a; white-space: nowrap;
}
#ki-dash .kv-chip.is-active { background: #0284c7; border-color: #0284c7; color: #fff; }
#ki-dash .kv-fb-list { display: flex; flex-direction: column; }
#ki-dash .kv-fb { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: .8px solid rgba(255,255,255,.05); }
#ki-dash .kv-fb:first-child { border-top: 0; }
#ki-dash .kv-fb-av { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; }
#ki-dash .kv-fb-av svg { width: 15px; height: 15px; }
#ki-dash .kv-av-x    { background: #000; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); }
#ki-dash .kv-av-star { background: #f59e0b; }
#ki-dash .kv-av-wa   { background: #25d366; }
#ki-dash .kv-fb-b { flex: 1 1 0; min-width: 0; }
#ki-dash .kv-fb-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#ki-dash .kv-fb-n { font-size: 11px; font-weight: 600; color: #fff; }
#ki-dash .kv-fb-t { font-size: 9px; color: var(--kv-muted); white-space: nowrap; }
#ki-dash .kv-fb-r { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
#ki-dash .kv-fb-m { flex: 1 1 0; min-width: 0; font-size: 10px; line-height: 1.45; color: var(--kv-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ki-dash .kv-tag { flex: none; font-size: 8.5px; font-weight: 500; line-height: 1; padding: 4px 8px; border-radius: 5px; border: .8px solid transparent; white-space: nowrap; }
#ki-dash .kv-tag.is-pos { background: rgba(16,185,129,.18);  border-color: rgba(16,185,129,.35); color: #34d399; }
#ki-dash .kv-tag.is-neu { background: rgba(245,158,11,.18);  border-color: rgba(245,158,11,.35); color: #fbbf24; }
#ki-dash .kv-tag.is-neg { background: rgba(248,113,113,.18); border-color: rgba(248,113,113,.5);  color: #f87171; }
 
/* ── SOCIAL POST (top-right, overlaps window corner) ────────────────── */
#ki-dash .kv-post {
  position: absolute; left: 434px; top: 50px; width: 166px;
  background: var(--kv-navy); border: .8px solid rgba(255,255,255,.10);
  border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,.45);
  z-index: 4; animation: kv-fup .6s cubic-bezier(.16,1,.3,1) .15s both;
}
#ki-dash .kv-post-hd { display: flex; align-items: center; gap: 7px; padding: 8px 10px; }
#ki-dash .kv-post-av { width: 22px; height: 22px; flex: none; }
#ki-dash .kv-post-id { display: flex; flex-direction: column; }
#ki-dash .kv-post-n  { font-size: 9px; font-weight: 700; color: #fff; }
#ki-dash .kv-post-loc{ font-size: 7.5px; color: var(--kv-muted); }
#ki-dash .kv-post-img { width: 100%; height: 130px; object-fit: cover; background: #10233b; }
#ki-dash .kv-post-acts { display: flex; align-items: center; gap: 11px; padding: 8px 10px; color: #cfd8e3; }
#ki-dash .kv-post-acts svg { width: 13px; height: 13px; }
#ki-dash .kv-post-bm { margin-left: auto; }
 
/* ── CAR (bottom-left) — drop your SUV PNG in the <img> src ─────────── */
#ki-dash .kv-car {
  position: absolute; z-index: 5; height: auto; pointer-events: none;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.45)); will-change: transform;
}
#ki-dash .kv-car-bl { left: 0; top: 462px; width: 300px; animation: kv-float 6s ease-in-out infinite; }
 
/* animations */
@keyframes kv-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes kv-fup   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes kv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { #ki-dash * { animation: none !important; } }
 
#ki-grow {
	--gw-bg:    #0A0E17;
	--gw-line:  rgba(255, 255, 255, 0.08);
	--gw-text:  #FFFFFF;
	--gw-muted: rgba(255, 255, 255, 0.72);
	--gw-dim:   rgba(255, 255, 255, 0.55);
	--gw-ai:    linear-gradient(96deg, #3A86FF -11.44%, #B565FF 41.88%, #FF8FAB 78.67%);

	display: block;
	position: relative;
	background: var(--gw-bg);
	color: var(--gw-text);
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	padding: 96px 0 100px;
}

#ki-grow, #ki-grow *, #ki-grow *::before, #ki-grow *::after { box-sizing: border-box; }
#ki-grow :where(h2, h3, p, ul, li, span, strong) { margin: 0; padding: 0; }
#ki-grow :where(h2, h3, p) { font-family: inherit; text-transform: none; color: inherit; }
#ki-grow :where(ul) { list-style: none; }
#ki-grow :where(li)::before { content: none; }

#ki-grow .gw-wrap { max-width: 1300px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

/* ── header ─────────────────────────────── */
#ki-grow .gw-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	align-items: end;
	gap: 40px;
	padding-bottom: 34px;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(199, 221, 255, 0.25);
}
#ki-grow .gw-eyebrow {
	color: #FFF;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
#ki-grow .gw-title {
	color: #FFF;
	font-family: Poppins;
	font-size: 36px;
	font-style: normal;
	font-weight: 600;
	line-height: 43.2px;
}
#ki-grow .gw-intro {
	color: #FFF;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 25.6px;
}

/* ── stage cards ────────────────────────── */
#ki-grow .gw-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

#ki-grow .gw-card {
	--c-bg:     #181C26;
	--c-border: rgba(255, 255, 255, 0.10);
	--c-accent: #FFFFFF;
	--c-body:   rgba(255, 255, 255, 0.85);
	--c-foot:   rgba(255, 255, 255, 0.72);
	--c-badge-bg:     transparent;
	--c-badge-border: rgba(255, 255, 255, 0.35);
	--c-badge-text:   rgba(255, 255, 255, 0.9);

	display: flex;
	flex-direction: column;
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border-radius: 24px;
	border: 0.5px solid rgba(229, 229, 229, 0.25);
	min-width: 0;
}
#ki-grow .gw-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

#ki-grow .gw-card--scale {
	--c-bg:     #0B1F33;
	--c-border: #1D4568;
	--c-accent: #FFFFFF;
	--c-body:   #3F8FD2;
	--c-foot:   #3A7FB8;
	--c-badge-border: #2C6A9E;
	--c-badge-text:   #9CC6EA;
}

#ki-grow .gw-card--best {
	--c-bg:     #3A3213;
	--c-border: #7C6522;
	--c-accent: #FFC21A;
	--c-body:   #F5B800;
	--c-foot:   #F5B800;
	--c-badge-bg:     rgba(255, 194, 26, 0.18);
	--c-badge-border: #A8841E;
	--c-badge-text:   #FFC21A;
}

#ki-grow .gw-card-body {
	flex: 1 1 auto;
	padding: 30px 28px 26px;
	min-width: 0;
}

#ki-grow .gw-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 26px;
}
#ki-grow .gw-card-label {
	color: #FFF;
	font-family: Poppins;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.88px;
	text-transform: uppercase;
}
#ki-grow .gw-card--scale .gw-card-label { color: #FFFFFF; }

#ki-grow .gw-badge {
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--c-badge-bg);
	border: 1px solid var(--c-badge-border);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--c-badge-text);
	white-space: nowrap;
}

#ki-grow .gw-card-title {
	margin-bottom: 24px;
	color: var(--c-accent);
	font-family: Poppins;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: -0.44px;
	overflow-wrap: anywhere;
}

#ki-grow .gw-card-desc {
	color: var(--c-body);
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	overflow-wrap: anywhere;
}

#ki-grow .gw-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin-top: 24px;
}
#ki-grow .gw-list li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--c-body);
	font-family: Poppins;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 14.6px;
	overflow-wrap: anywhere;
}

#ki-grow .gw-check {
	flex-shrink: 0;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.9;
}

#ki-grow .gw-card-foot {
	padding: 16px 28px 18px;
	border-top: 1px solid var(--c-border);
	color: var(--c-foot);
	font-family: Poppins;
	font-size: 12.5px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
#ki-grow .gw-card-foot strong {
	font-weight: 600;
	color: var(--c-accent);
}

/* ── progress row ───────────────────────── */
#ki-grow .gw-progress {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 170px minmax(0, 1fr);
	align-items: center;
	gap: 32px;
	margin: 60px 0 0px;
	padding: 0 30px;
}
#ki-grow .gw-progress p {
	color: #FFF;
	font-family: Poppins;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}
#ki-grow .gw-progress strong { font-weight: 600; color: #FFFFFF; }
#ki-grow .gw-progress-r { text-align: right; }

#ki-grow .gw-arrow {
	position: relative;
	display: block;
	height: 1.5px;
	background: linear-gradient(90deg, #1E6CB0 0%, #6E8A7A 55%, #FFC21A 100%);
}
#ki-grow .gw-arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 9px;
	height: 9px;
	border-top: 1.5px solid #FFC21A;
	border-right: 1.5px solid #FFC21A;
	transform: translateY(-50%) rotate(45deg);
	transform-origin: center;
}

/* ── modules ────────────────────────────── */
#ki-grow .gw-modules-label {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 16px;
}
#ki-grow .gw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#ki-grow .gw-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: 6px;
	background: #1A1D24;
	border: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.9);
	white-space: nowrap;
}

/* ==========================================================================
   RESPONSIVE — #ki-grow
   ========================================================================== */
@media (max-width: 1340px) {
	#ki-grow .gw-wrap { padding: 0 24px; }
}

@media (max-width: 1024px) {
	#ki-grow { padding: 72px 0 84px; }
	#ki-grow .gw-head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 18px;
		padding-bottom: 28px;
		margin-bottom: 32px;
	}
	#ki-grow .gw-title { font-size: 30px; line-height: 1.25; }
	#ki-grow .gw-intro { max-width: none; }
	#ki-grow .gw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	#ki-grow .gw-progress {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		text-align: left;
		margin: 48px 0 64px;
		padding: 0;
	}
	#ki-grow .gw-progress-r { text-align: left; }
	#ki-grow .gw-arrow { display: none; }
}

@media (max-width: 767px) {
	#ki-grow { padding: 56px 0 64px; }
	#ki-grow .gw-wrap { padding: 0 16px; }
	#ki-grow .gw-title { font-size: 25px; line-height: 1.3; letter-spacing: -0.3px; }
	#ki-grow .gw-title br { display: none; }
	#ki-grow .gw-intro { font-size: 14.5px; line-height: 1.6; }
	#ki-grow .gw-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	#ki-grow .gw-card-body { padding: 24px 20px 20px; }
	#ki-grow .gw-card-title { font-size: 20px; margin-bottom: 16px; }
	#ki-grow .gw-card-foot { padding: 14px 20px 16px; }
	#ki-grow .gw-progress { margin: 40px 0 56px; }
	#ki-grow .gw-modules-label { margin-bottom: 12px; }
}

@media (max-width: 480px) {
	#ki-grow .gw-eyebrow { font-size: 11px; letter-spacing: 1px; }
	#ki-grow .gw-card-top { gap: 8px; }
	#ki-grow .gw-chip { font-size: 12px; padding: 6px 11px; }
}
/* ==========================================================================
   OMNI-CHANNEL TICKETING SECTION
   Scoped entirely under #ki-omni with ko- prefixed classes.
   ========================================================================== */
#ki-omni {
	background: #0F172A !important;
	padding: 96px 0 !important;
	overflow: hidden !important;
}
#ki-omni, #ki-omni *, #ki-omni *::before, #ki-omni *::after { box-sizing: border-box !important; }
#ki-omni .ko-wrap { max-width: 1300px !important; margin: 0 auto !important; padding: 0 40px !important; }
#ki-omni .ko-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 611px) minmax(0, 1fr) !important;
	gap: 72px !important;
	align-items: center !important;
}
#ki-omni .ko-eyebrow {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: .02em !important;
	color: #1A7BC4 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
}
#ki-omni .ko-title {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 36px !important;
	font-weight: 600 !important;
	line-height: 1.16 !important;
	letter-spacing: -1px !important;
	color: #FFFFFF !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
}
#ki-omni .ko-sub {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.7 !important;
	color: #6B7280 !important;
	margin: 0 0 28px !important;
	padding: 0 !important;
	max-width: 611px !important;
}
#ki-omni .ko-features { display: flex !important; flex-direction: column !important; gap: 26px !important; margin-bottom: 30px !important; }
#ki-omni .ko-feature { display: flex !important; gap: 14px !important; align-items: flex-start !important; }
#ki-omni .ko-feature-ic {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 10px !important;
	background: rgba(29,78,216,0.25) !important;
	color: #FFFFFF !important;
	transition: background .2s ease, transform .2s ease !important;
}
#ki-omni .ko-feature-ic svg { width: 22px !important; height: 22px !important; display: block !important; }
#ki-omni .ko-feature:hover .ko-feature-ic { background: #1D4ED8 !important; transform: translateY(-2px) !important; }
#ki-omni .ko-feature-tx { flex: 1 1 0 !important; min-width: 0 !important; }
#ki-omni .ko-feature-tx h4 {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}
#ki-omni .ko-feature-tx p {
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: rgba(255,255,255,0.5) !important;
	margin: 0 !important;
	padding: 0 !important;
}
#ki-omni .ko-cta {
	display: inline-flex !important;
	align-items: center !important;
	background: #1D4ED8 !important;
	color: #FFFFFF !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	padding: 14px 28px !important;
	border-radius: 9px !important;
	text-decoration: none !important;
	transition: background .2s ease, transform .2s ease !important;
}
#ki-omni .ko-cta:hover { background: #1E40AF !important; transform: translateY(-2px) !important; color: #FFFFFF !important; }

/* ── app mockup ── */
#ki-omni .ko-visual { min-width: 0 !important; }
#ki-omni .ko-app {
	background: #FFFFFF !important;
	border: 1px solid rgba(184,184,184,0.48) !important;
	border-radius: 17px !important;
	overflow: hidden !important;
	box-shadow: 0 30px 70px rgba(0,0,0,0.35) !important;
	font-family: 'Poppins', system-ui, sans-serif !important;
}
#ki-omni .ko-app-topbar { background: #0A5A94 !important; padding: 10px 18px !important; }
#ki-omni .ko-app-logo { height: 16px !important; width: auto !important; display: block !important; filter: brightness(0) invert(1) !important; }
#ki-omni .ko-app-body { display: flex !important; align-items: stretch !important; min-height: 0 !important; }
#ki-omni .ko-app-rail {
	flex: 0 0 44px !important;
	background: #FFFFFF !important;
	border-right: 1px solid #EEF2F7 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 14px 0 !important;
}
#ki-omni .ko-rail-i { display: flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 26px !important; border-radius: 6px !important; color: #9CA3AF !important; }
#ki-omni .ko-rail-i svg { width: 15px !important; height: 15px !important; }
#ki-omni .ko-rail-i.is-active { background: #C2E6FF !important; color: #0386E5 !important; box-shadow: inset 2px 0 0 #0386E5 !important; }
#ki-omni .ko-app-main { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; }
#ki-omni .ko-app-hd {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #6B7280 !important;
	padding: 12px 18px !important;
	border-bottom: 1px solid #E1ECF7 !important;
}
#ki-omni .ko-tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	background: #FAFBFD !important;
	border-bottom: 1px solid #E1ECF7 !important;
	padding: 0 6px !important;
}
#ki-omni .ko-tab {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	font-size: 10.5px !important;
	font-weight: 600 !important;
	color: #6B7280 !important;
	padding: 10px 12px !important;
	border-bottom: 2px solid transparent !important;
	white-space: nowrap !important;
}
#ki-omni .ko-tab svg { width: 13px !important; height: 13px !important; flex: 0 0 auto !important; }
#ki-omni .ko-tab img { width: 13px !important; height: 13px !important; object-fit: contain !important; flex: 0 0 auto !important; }
#ki-omni .ko-tab.is-active { color: #0A5A94 !important; border-bottom-color: #0A5A94 !important; }
#ki-omni .ko-channels { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 12px 14px !important; }
#ki-omni .ko-channel {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 13px 15px !important;
	border-radius: 10px !important;
	border: 1px solid #E1ECF7 !important;
	background: #FFFFFF !important;
}
#ki-omni .ko-channel.is-total { background: #F3F9FF !important; border-color: #0A5A94 !important; }
#ki-omni .ko-channel-ic { flex: 0 0 auto !important; width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #F3F4F6 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
#ki-omni .ko-channel-ic img { width: 20px !important; height: 20px !important; object-fit: contain !important; }
#ki-omni .ko-ic-x { background: #000000 !important; }
#ki-omni .ko-ic-x img { width: 14px !important; height: 14px !important; filter: brightness(0) invert(1) !important; }
#ki-omni .ko-channel-n { flex: 1 1 0 !important; min-width: 0 !important; font-size: 14px !important; font-weight: 600 !important; color: #111827 !important; }
#ki-omni .ko-channel-v { font-size: 14px !important; font-weight: 700 !important; color: #111827 !important; }
#ki-omni .ko-channel-v.is-red { color: #F87171 !important; }

#ki-omni .ko-ticket {
	margin: 4px 14px 10px !important;
	padding: 14px !important;
	background: #0A1628 !important;
	border: 1px solid rgba(59,130,246,0.18) !important;
	border-radius: 10px !important;
}
#ki-omni .ko-ticket-hd { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 9px !important; }
#ki-omni .ko-ticket-id { font-size: 10px !important; font-weight: 700 !important; color: #3B82F6 !important; }
#ki-omni .ko-ticket-sev { font-size: 9px !important; padding: 2px 8px !important; border-radius: 4px !important; background: rgba(239,68,68,0.12) !important; color: #F87171 !important; }
#ki-omni .ko-ticket-sla { margin-left: auto !important; font-size: 9px !important; color: rgba(255,255,255,0.3) !important; }
#ki-omni .ko-ticket-msg { font-size: 12px !important; line-height: 1.5 !important; color: rgba(255,255,255,0.65) !important; margin: 0 0 9px !important; }
#ki-omni .ko-ticket-tags { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
#ki-omni .ko-ticket-tags span { font-size: 9px !important; padding: 3px 8px !important; border-radius: 4px !important; background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.4) !important; }

#ki-omni .ko-footer {
	display: flex !important;
	gap: 24px !important;
	align-items: center !important;
	margin: 0 14px 14px !important;
	padding: 14px !important;
	background: #0A1628 !important;
	border: 1px solid rgba(59,130,246,0.18) !important;
	border-radius: 10px !important;
	flex-wrap: wrap !important;
}
#ki-omni .ko-footer-item { font-size: 11px !important; color: rgba(255,255,255,0.3) !important; }
#ki-omni .ko-footer-item b { color: #F59E0B !important; font-weight: 700 !important; font-size: 12px !important; margin-left: 4px !important; }

/* ── responsive ── */
@media (max-width: 1340px) { #ki-omni .ko-wrap { padding: 0 24px !important; } }
@media (max-width: 1199px) {
	#ki-omni .ko-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; }
	#ki-omni .ko-sub { max-width: none !important; }
}
@media (max-width: 767px) {
	#ki-omni { padding: 64px 0 !important; }
	#ki-omni .ko-wrap { padding: 0 16px !important; }
	#ki-omni .ko-title { font-size: 26px !important; }
	#ki-omni .ko-tabs { overflow-x: auto !important; }
	#ki-omni .ko-ticket-sla { margin-left: 0 !important; }
}