/**
 * Knowledge Hub topic template (Figma 253:37–253:42): /knowledge-hub/<topic>/.
 * Built by build/cine/kh-topics.php. Class prefix cx-kht-.
 */

/* ================================================================== Rhythm */

.cx-site .cx-kht { margin-bottom: 160px; }
.cx-site .cx-kht-explore { margin-bottom: 120px; }
.cx-site .cx-kht .cx-title--h2 { font-size: 52px; letter-spacing: -0.025em; }
.cx-site .cx-kht .cx-head > .cx-pill + .cx-title { margin-top: 24px; }

/* Glyph tiles */
.cx-site .cx-kht-icon { font-size: 22px; }
.cx-site .cx-kht-icon--xs { font-size: 17px; }

/* ================================================================== Hero */

.cx-site .cx-kht-hero { padding-top: 150px; }
.cx-site .cx-kht-hero .cx-word { line-height: 1.02; letter-spacing: -6px; }
.cx-site .cx-kht-hero__grid {
	display: grid;
	grid-template-columns: 560px 600px;
	justify-content: space-between;
	align-items: start;
}
.cx-site .cx-kht-hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

.cx-site .cx-kht-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font: 500 14px/18px var(--cx-body); }
.cx-site .cx-kht-crumbs li { display: flex; align-items: center; margin: 0; color: var(--cx-mist); }
.cx-site .cx-kht-crumbs li + li::before { content: "›"; margin: 0 10px; color: var(--cx-mist); }
.cx-site .cx-kht-crumbs a { color: var(--cx-amber); text-decoration: none; }
.cx-site .cx-kht-crumbs a.cx-kht-crumbs__mid { color: var(--cx-cloud); }
.cx-site .cx-kht-crumbs a:hover { text-decoration: underline; }

.cx-site .cx-kht-hero__icon {
	width: 84px;
	height: 84px;
	margin-top: 38px;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(245, 158, 11, 0.5);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 0 50px rgba(245, 158, 11, 0.3);
	font: 600 32px/1 var(--cx-head);
}
.cx-site .cx-kht-hero--api-docs .cx-kht-hero__icon { font-size: 22px; }
.cx-site .cx-kht-hero__copy > .cx-pill { margin-top: 32px; }
.cx-site .cx-kht-hero__title { margin-top: 24px; font-size: 72px; line-height: 1.04; letter-spacing: -1.8px; }
.cx-site .cx-kht-hero__lead { margin-top: 20px; font-size: 19px; line-height: 1.55; }

/* Search */
.cx-site .cx-kht-search {
	position: relative;
	width: 100%;
	height: 64px;
	margin: 36px 0 0;
	box-sizing: border-box;
	border-radius: 18px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: border-color var(--cx-fast) ease;
}
.cx-site .cx-kht-search:focus-within { border-color: rgba(245, 158, 11, 0.6); }
.cx-site .cx-kht-search__icon { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; }
.cx-site .cx-kht-search.cx-kht-search input.cx-kht-search__input[type="search"] {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 120px 0 50px;
	box-sizing: border-box;
	border: 0;
	border-radius: 18px;
	background: transparent;
	box-shadow: none;
	outline: none;
	font: 400 16px/1 var(--cx-body);
	color: var(--cx-white);
	-webkit-appearance: none;
	appearance: none;
}
.cx-site .cx-kht-search input::placeholder { color: var(--cx-mist); opacity: 1; }
.cx-site .cx-kht-search input::-webkit-search-cancel-button { display: none; }
.cx-site .cx-kht-search button {
	position: absolute;
	top: 8.5px;
	right: 8.5px;
	width: 96px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--cx-amber);
	font: 600 14px/1 var(--cx-body);
	color: var(--cx-night);
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background var(--cx-fast) ease, box-shadow var(--cx-fast) ease;
}
.cx-site .cx-kht-search button:hover,
.cx-site .cx-kht-search button:focus-visible { background: var(--cx-amber-hover); box-shadow: 0 0 18px rgba(245, 158, 11, 0.6); }

/* ================================================================== Hero visuals (600 px stage, Figma x 720 / y 150) */

.cx-site .cx-kht-vis { --vh: 550px; position: relative; width: 600px; height: var(--vh); }
.cx-site .cx-kht-vis--getting-started { --vh: 537px; }
.cx-site .cx-kht-vis--apps-and-devices { --vh: 534px; }
.cx-site .cx-kht-vis--api-docs { --vh: 570px; }
.cx-site .cx-kht-vis__stage { position: absolute; inset: 0; }
.cx-site .cx-kht-vis__stage > * { position: absolute; }

/* Shared floating glass card */
.cx-site .cx-kht-float {
	box-sizing: border-box;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	z-index: 2;
}
.cx-site .cx-kht-float--amber { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 0 50px rgba(245, 158, 11, 0.3); }
.cx-site .cx-kht-float__kicker { display: block; font: 600 11px/14px var(--cx-body); letter-spacing: 0.88px; color: var(--cx-amber); }
.cx-site .cx-kht-float__kicker--mist { color: var(--cx-mist); }

/* Phones: text placement per Figma */
.cx-site .cx-kht-phone { z-index: 1; }
.cx-site .cx-kht-phone--start { left: 344px; top: 90px; z-index: 2; }
.cx-site .cx-kht-phone--start .cx-phone__body { bottom: 40px; }
.cx-site .cx-kht-phone--start .cx-phone__bar { margin-top: 33px; height: 2.9px; }
.cx-site .cx-kht-phone--money { left: 340px; top: 70px; }
.cx-site .cx-kht-phone--money .cx-phone__title + .cx-phone__btn { margin-top: 48px; }
.cx-site .cx-kht-phone--left { left: -2px; top: 180px; z-index: 2; }
.cx-site .cx-kht-phone--left .cx-phone__body { bottom: 22px; }
.cx-site .cx-kht-phone--left .cx-phone__bar { margin-top: 8px; }
.cx-site .cx-kht-phone--right { left: 468px; top: 160px; z-index: 3; }
.cx-site .cx-kht-phone--right .cx-phone__title + .cx-phone__btn { margin-top: 26px; }

/* Getting started: brand setup panel */
.cx-site .cx-kht-brand {
	left: 0;
	top: 50px;
	width: 380px;
	height: 480px;
	padding: 28px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	z-index: 1;
}
.cx-site .cx-kht-brand__kicker { font: 600 12px/16px var(--cx-body); letter-spacing: 0.96px; color: var(--cx-amber); }
.cx-site .cx-kht-brand__label { margin-top: 18px; font: 500 13px/17px var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-kht-brand__label:nth-of-type(6) { margin-top: 22px; }
.cx-site .cx-kht-brand__field {
	display: flex;
	align-items: center;
	width: 324px;
	height: 48px;
	margin-top: 5px;
	padding: 0 16px;
	box-sizing: border-box;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	font: 500 15px/1 var(--cx-body);
	color: var(--cx-white);
}
.cx-site .cx-kht-brand__drop {
	position: relative;
	width: 324px;
	height: 88px;
	margin-top: 5px;
	box-sizing: border-box;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1.5px dashed rgba(245, 158, 11, 0.5);
}
.cx-site .cx-kht-brand__logo {
	position: absolute;
	left: 16.5px;
	top: 16.5px;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--cx-amber);
	font: 600 26px/1 var(--cx-head);
	color: var(--cx-night);
}
.cx-site .cx-kht-brand__file { position: absolute; left: 82.5px; top: 21px; font: 500 14px/18px var(--cx-body); color: var(--cx-cloud); }
.cx-site .cx-kht-brand__ok { position: absolute; left: 82.5px; top: 44px; font: 600 12px/16px var(--cx-body); color: var(--cx-amber); }
.cx-site .cx-kht-brand__sws { display: flex; gap: 42px; margin-top: 7px; }
.cx-site .cx-kht-brand__sw { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 40px; font: 400 11px/14px var(--cx-body); color: var(--cx-mist); white-space: nowrap; }
.cx-site .cx-kht-brand__sw > span { width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.2); }
.cx-site .cx-kht-brand__btn {
	display: grid;
	place-items: center;
	width: 324px;
	height: 52px;
	margin-top: 30px;
	border-radius: 14px;
	background: var(--cx-amber);
	font: 600 15px/1 var(--cx-body);
	color: var(--cx-night);
}

/* Content & CMS and Analytics: dashboard (shared 560 px mock-up shown at 600 px) */
.cx-site .cx-kht-dash { left: 0; top: 60px; width: 560px; transform: scale(1.0714); transform-origin: 0 0; z-index: 1; }
.cx-site .cx-kht-dash .cx-dash__new:empty { display: none; }
.cx-site .cx-kht-dash--reports .cx-dash__top { min-height: 23px; }

.cx-site .cx-kht-sched { left: 20px; top: 380px; width: 300px; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.cx-site .cx-kht-sched .cx-kht-float__kicker { margin-bottom: 8px; }
.cx-site .cx-kht-sched__row {
	display: grid;
	grid-template-columns: 58px 108px 1fr;
	align-items: center;
	height: 34px;
	padding: 0 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
}
.cx-site .cx-kht-sched__row b { font: 600 13px/1 var(--cx-body); color: var(--cx-white); }
.cx-site .cx-kht-sched__row span { font: 400 13px/1 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-kht-sched__row em { font: normal 600 12px/1 var(--cx-body); color: var(--cx-amber); }
.cx-site .cx-kht-sched__row em.is-draft { color: var(--cx-mist); }

.cx-site .cx-kht-ai {
	left: 340px;
	top: 420px;
	width: 260px;
	height: 130px;
	padding: 18px;
	display: grid;
	grid-template-columns: 36px 1fr;
	column-gap: 12px;
	align-content: start;
}
.cx-site .cx-kht-ai__tile { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(245, 158, 11, 0.16); font: 600 13px/1 var(--cx-head); color: var(--cx-amber); }
.cx-site .cx-kht-ai__name { font: 600 15px/19px var(--cx-body); color: var(--cx-white); }
.cx-site .cx-kht-ai__state { font: 600 12px/16px var(--cx-body); color: var(--cx-amber); }
.cx-site .cx-kht-ai__text { grid-column: 1 / -1; margin-top: 12px; max-width: 220px; font: 400 13px/1.45 var(--cx-body); color: var(--cx-mist); }

/* Analytics floating cards */
.cx-site .cx-kht-rev { left: 20px; top: 380px; width: 290px; height: 170px; padding: 16.5px 18.5px; }
.cx-site .cx-kht-rev .cx-kht-float__kicker { margin-bottom: 14px; }
.cx-site .cx-kht-rev__label { display: block; font: 500 12px/14px var(--cx-body); color: var(--cx-cloud); }
.cx-site .cx-kht-rev__track { position: relative; display: block; width: 250px; height: 8px; margin: 4px 0 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.cx-site .cx-kht-rev__track > span { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.cx-site .cx-kht-rev__track > .is-amber { background: var(--cx-amber); }
.cx-site .cx-kht-rev__track > .is-navy { background: var(--cx-navy-600); }
.cx-site .cx-kht-ret { left: 330px; top: 420px; width: 270px; height: 130px; padding: 16.5px 18.5px; }
.cx-site .cx-kht-ret svg { position: absolute; left: 7px; top: 37px; width: 253px; height: 69px; overflow: visible; filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)); }

/* Monetization: wallet card */
.cx-site .cx-kht-wallet {
	left: 0;
	top: 100px;
	width: 380px;
	height: 450px;
	box-sizing: border-box;
	border-radius: 28px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(245, 158, 11, 0.45);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 0 50px rgba(245, 158, 11, 0.3);
	z-index: 2;
}
.cx-site .cx-kht-wallet > span { position: absolute; }
.cx-site .cx-kht-wallet__kicker { left: 25px; top: 25px; font: 600 12px/16px var(--cx-body); letter-spacing: 0.96px; color: var(--cx-amber); }
.cx-site .cx-kht-wallet__coin { left: 25px; top: 59px; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: var(--cx-amber); box-shadow: 0 0 24px rgba(245, 158, 11, 0.6); font: 600 32px/1 var(--cx-head); color: var(--cx-night); }
.cx-site .cx-kht-wallet__bal { left: 105px; top: 59px; font: 600 44px/1.02 var(--cx-head); letter-spacing: -1.1px; color: var(--cx-white); }
.cx-site .cx-kht-wallet__cap { left: 107px; top: 108px; font: 400 14px/18px var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-kht-wallet__ep { left: 25px; top: 154px; font: 600 15px/20px var(--cx-body); color: var(--cx-cloud); }
.cx-site .cx-kht-wallet__opts { left: 25px; top: 185px; display: flex; flex-direction: column; gap: 10px; }
.cx-site .cx-kht-wallet__opt {
	position: relative;
	display: block;
	width: 324px;
	height: 58px;
	box-sizing: border-box;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.cx-site .cx-kht-wallet__opt.is-on { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.7); }
.cx-site .cx-kht-wallet__tile { position: absolute; left: 10px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(245, 158, 11, 0.16); font: 600 16px/1 var(--cx-head); color: var(--cx-amber); }
.cx-site .cx-kht-wallet__tile.is-sm { font-size: 11px; }
.cx-site .cx-kht-wallet__name { position: absolute; left: 58px; top: 18px; font: 600 15px/20px var(--cx-body); color: var(--cx-white); }
.cx-site .cx-kht-wallet__val { position: absolute; right: 16px; top: 19px; font: 500 13px/18px var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-kht-wallet__opt.is-on .cx-kht-wallet__val { color: var(--cx-amber); }
.cx-site .cx-kht-wallet__btn { left: 25px; top: 385px; width: 324px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--cx-amber); font: 600 15px/1 var(--cx-body); color: var(--cx-night); }

/* Apps & devices: TV, phones, platform pills */
.cx-site .cx-kht-tv { left: 40px; top: 70px; z-index: 0; }
.cx-site .cx-kht-plats { left: 0; top: 450px; display: flex; flex-direction: column; gap: 11px; }
.cx-site .cx-kht-plats__row { display: flex; gap: 10px; }
.cx-site .cx-kht-plat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font: 500 13px/17px var(--cx-body);
	color: var(--cx-cloud);
	white-space: nowrap;
}
.cx-site .cx-kht-plat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cx-amber); }
.cx-site .cx-kht-plat.is-on { border-color: rgba(245, 158, 11, 0.7); }

/* API docs: code panel */
.cx-site .cx-kht-code {
	left: 0;
	top: 60px;
	width: 600px;
	height: 470px;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 24px;
	background: rgba(10, 23, 48, 0.85);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.cx-site .cx-kht-code__bar { position: relative; height: 52px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cx-site .cx-kht-code__dots { position: absolute; left: 19px; top: 19px; display: flex; gap: 8px; }
.cx-site .cx-kht-code__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.cx-site .cx-kht-code__tab { position: absolute; top: 9px; height: 30px; display: flex; align-items: center; padding: 0 14px; box-sizing: border-box; border-radius: 8px; font: 600 12px/1 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-kht-code__tab.is-on { left: 87px; width: 124px; background: rgba(245, 158, 11, 0.14); color: var(--cx-amber); }
.cx-site .cx-kht-code__tab:not(.is-on) { left: 217px; width: 84px; }
.cx-site .cx-kht-code__badge { position: absolute; left: 479px; top: 11px; width: 96px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: var(--cx-amber); font: 600 11px/1 var(--cx-body); letter-spacing: 0.88px; color: var(--cx-night); }
.cx-site .cx-kht-code pre {
	margin: 0;
	padding: 12px 16px 16px 49px;
	background: none;
	border: 0;
	border-radius: 0;
	overflow-x: auto;
	white-space: pre;
	counter-reset: cx-kht-line;
	font: 400 13px/27px "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	color: var(--cx-cloud);
	tab-size: 4;
}
.cx-site .cx-kht-code code { display: block; padding: 0; background: none; font: inherit; color: inherit; white-space: inherit; }
.cx-site .cx-kht-code__l { position: relative; display: inline-block; vertical-align: top; min-height: 27px; counter-increment: cx-kht-line; }
.cx-site .cx-kht-code__l::before {
	content: counter(cx-kht-line);
	position: absolute;
	left: -32px;
	font: 400 12px/27px var(--cx-body);
	color: rgba(159, 176, 199, 0.5);
	-webkit-user-select: none;
	user-select: none;
}
.cx-site .cx-kht-code__l.is-c { color: var(--cx-mist); }
.cx-site .cx-kht-code__l.is-r { color: var(--cx-amber); }
.cx-site .cx-kht-code__note { left: 0; top: 546px; width: 600px; margin: 0; font: 400 13px/1.4 var(--cx-body); color: var(--cx-mist); }

/* ================================================================== Articles */

.cx-site .cx-kht .cx-grid--4.cx-kht-cards { gap: 24px; }
.cx-site .cx-kht-articles .cx-head + * { margin-top: 56px; }
.cx-site .cx-kht-card__title,
.cx-site .cx-kht-card .cx-card__title { font-size: 24px; line-height: 1.15; }
.cx-site .cx-kht-card .cx-card__title a { color: var(--cx-white); text-decoration: none; }
.cx-site .cx-kht-card .cx-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 28px; z-index: 1; }
.cx-site .cx-kht-card .cx-card__title a:focus-visible { outline: none; }
.cx-site .cx-kht-card:focus-within { border-color: rgba(245, 158, 11, 0.9); box-shadow: 0 0 0 2px var(--cx-amber); }

/* ================================================================== Popular */

.cx-site .cx-kht-pop__grid { display: grid; grid-template-columns: 440px 700px; justify-content: space-between; align-items: start; }
.cx-site .cx-kht-pop__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cx-site .cx-kht-pop__copy > .cx-title { margin-top: 24px; font-size: 48px; letter-spacing: -1.2px; }
.cx-site .cx-kht-pop__copy > .cx-lead { margin-top: 20px; font-size: 18px; line-height: 1.55; }
.cx-site .cx-kht-pop__media {
	position: relative;
	width: 100%;
	aspect-ratio: 440 / 276;
	margin-top: 36px;
	overflow: hidden;
	box-sizing: border-box;
	border-radius: 24px;
	background: var(--cx-navy-900);
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	box-shadow: 0 30px 60px rgba(0, 0, 5, 0.5);
}
.cx-site .cx-kht-pop__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-site .cx-kht-pop__media::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(to bottom, rgba(10, 23, 48, 0), rgba(10, 23, 48, 0.9)); }
.cx-site .cx-kht-pop__caption { position: absolute; z-index: 1; left: 24px; bottom: 26px; margin: 0; font: 600 24px/1.02 var(--cx-head); letter-spacing: -0.6px; color: var(--cx-white); }

.cx-site .cx-kht-rows { display: flex; flex-direction: column; gap: 14px; }
.cx-site .cx-kht-row {
	position: relative;
	min-height: 88px;
	padding: 18px 100px 16px 84px;
	box-sizing: border-box;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background var(--cx-fast) var(--cx-ease), border-color var(--cx-fast) var(--cx-ease), box-shadow var(--cx-fast) var(--cx-ease);
}
.cx-site .cx-kht-row::after {
	content: "→";
	position: absolute;
	right: 26px;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border-radius: 50%;
	background: rgba(245, 158, 11, 0.14);
	border: 1px solid rgba(245, 158, 11, 0.6);
	font: 600 18px/1 var(--cx-body);
	color: var(--cx-amber);
	transition: background var(--cx-fast) var(--cx-ease), color var(--cx-fast) var(--cx-ease);
}
.cx-site .cx-kht-row:hover,
.cx-site .cx-kht-row:focus-within { background: rgba(30, 58, 95, 0.55); border-color: rgba(245, 158, 11, 0.9); box-shadow: 0 12px 20px rgba(245, 158, 11, 0.22); }
.cx-site .cx-kht-row:hover::after,
.cx-site .cx-kht-row:focus-within::after { background: var(--cx-amber); color: var(--cx-night); }
.cx-site .cx-kht-row__num { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); margin: 0; font: 600 20px/1 var(--cx-head); color: var(--cx-amber); }
.cx-site .cx-kht-row__title { margin: 0; font: 500 18px/23px var(--cx-body); }
.cx-site .cx-kht-row__title a { color: var(--cx-white); text-decoration: none; }
.cx-site .cx-kht-row__title a::after { content: ""; position: absolute; inset: 0; border-radius: 20px; z-index: 1; }
.cx-site .cx-kht-row__title a:focus-visible { outline: none; }
.cx-site .cx-kht-row__text { margin: 7px 0 0; font: 400 14px/18px var(--cx-body); color: var(--cx-mist); }

/* ================================================================== Quick start */

.cx-site .cx-kht-quick .cx-steps::before { left: calc((100% - 72px) / 8); right: calc((100% - 72px) / 8); }
.cx-site .cx-kht-quick .cx-step .cx-kicker { letter-spacing: 0.96px; line-height: 16px; }
.cx-site .cx-kht-quick .cx-step__title { margin-top: 8px; letter-spacing: -0.65px; }
.cx-site .cx-kht-quick .cx-step__text { margin-top: 10px; }

/* ================================================================== Keep exploring */

.cx-site .cx-kht-explore .cx-title--h2 { font-size: 44px; letter-spacing: -1.1px; }
.cx-site .cx-kht-explore .cx-head + * { margin-top: 44px; }
.cx-site .cx-kht-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cx-site .cx-kht-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 66px;
	padding: 14px 24px 14px 18px;
	box-sizing: border-box;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.14);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font: 500 16px/1 var(--cx-body);
	color: var(--cx-cloud);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--cx-fast) var(--cx-ease), border-color var(--cx-fast) var(--cx-ease), color var(--cx-fast) var(--cx-ease);
}
.cx-site .cx-kht-chip:hover,
.cx-site .cx-kht-chip:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: var(--cx-amber); color: var(--cx-white); }
.cx-site .cx-kht-chip__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(245, 158, 11, 0.14); font: 600 15px/1 var(--cx-head); color: var(--cx-amber); transition: background var(--cx-fast) var(--cx-ease), color var(--cx-fast) var(--cx-ease); }
.cx-site .cx-kht-chip__icon--sm { font-size: 10px; }
.cx-site .cx-kht-chip:hover .cx-kht-chip__icon { background: var(--cx-amber); color: var(--cx-night); }

/* ================================================================== Help panel */

.cx-site .cx-kht-help__panel {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 240px;
	padding: 0 58px 0 56px;
	box-sizing: border-box;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.05);
	border: 1.5px solid rgba(245, 158, 11, 0.35);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.cx-site .cx-kht-help__q { flex: none; width: 72px; height: 72px; display: grid; place-items: center; box-sizing: border-box; border-radius: 20px; background: rgba(245, 158, 11, 0.14); border: 1px solid rgba(245, 158, 11, 0.6); font: 600 32px/1 var(--cx-head); color: var(--cx-amber); }
.cx-site .cx-kht-help__copy { flex: 1; min-width: 0; }
.cx-site .cx-kht .cx-kht-help__title { font-size: 40px; line-height: 1.02; letter-spacing: -1px; }
.cx-site .cx-kht-help__text { margin: 18px 0 0; font: 400 18px/1.5 var(--cx-body); color: var(--cx-mist); }
.cx-site .cx-kht-help__panel .cx-btns { flex: none; flex-wrap: nowrap; }

/* ================================================================== Responsive */

@media (max-width: 1239px) {
	.cx-site .cx-kht-hero__grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; }
	.cx-site .cx-kht-vis { zoom: 0.7; }
	.cx-site .cx-kht-pop__grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; }
	.cx-site .cx-kht .cx-grid--4.cx-kht-cards { grid-template-columns: repeat(2, 1fr); }
	.cx-site .cx-kht-help__panel { flex-wrap: wrap; padding: 40px 48px; }
	.cx-site .cx-kht-help__panel .cx-btns { margin-left: 100px; }
}

@media (max-width: 1023px) {
	.cx-site .cx-kht { margin-bottom: 120px; }
	.cx-site .cx-kht-explore { margin-bottom: 96px; }
	.cx-site .cx-kht-hero__title { font-size: 60px; }
	.cx-site .cx-kht .cx-title--h2 { font-size: 44px; }
	.cx-site .cx-kht-pop__copy > .cx-title { font-size: 40px; }
	.cx-site .cx-kht-explore .cx-title--h2 { font-size: 38px; }
}

@media (max-width: 900px) {
	.cx-site .cx-kht-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.cx-site .cx-kht-vis { zoom: 0.9; justify-self: center; }
	.cx-site .cx-kht-pop__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.cx-site .cx-kht-pop__copy > .cx-lead { max-width: 560px; }
	.cx-site .cx-kht-help__panel { flex-direction: column; align-items: flex-start; gap: 24px; padding: 36px 28px; }
	.cx-site .cx-kht-help__panel .cx-btns { margin-left: 0; flex-wrap: wrap; }
	.cx-site .cx-kht .cx-kht-help__title { font-size: 34px; }
}

@media (max-width: 679px) {
	.cx-site .cx-kht-vis { zoom: 0.75; }
}

@media (max-width: 600px) {
	.cx-site .cx-kht { margin-bottom: 96px; }
	.cx-site .cx-kht-explore { margin-bottom: 80px; }
	.cx-site .cx-kht-hero { padding-top: 124px; }
	.cx-site .cx-kht-hero__icon { width: 68px; height: 68px; margin-top: 28px; font-size: 26px; border-radius: 18px; }
	.cx-site .cx-kht-hero__copy > .cx-pill { margin-top: 24px; }
	.cx-site .cx-kht-hero__title { font-size: 48px; line-height: 1.02; }
	.cx-site .cx-kht-hero__lead { font-size: 17px; }
	.cx-site .cx-kht-hero__grid { gap: 40px; }
	.cx-site .cx-kht-vis { zoom: 0.56; }
	.cx-site .cx-kht-vis .cx-dash { zoom: 1; }
	.cx-site .cx-kht-search.cx-kht-search input.cx-kht-search__input[type="search"] { padding-right: 112px; font-size: 15px; text-overflow: ellipsis; }
	.cx-site .cx-kht .cx-title--h2 { font-size: 34px; line-height: 1.08; }
	.cx-site .cx-kht-pop__copy > .cx-title { font-size: 34px; letter-spacing: -0.025em; }
	.cx-site .cx-kht-explore .cx-title--h2 { font-size: 32px; }
	.cx-site .cx-kht-explore .cx-head + * { margin-top: 32px; }
	.cx-site .cx-kht .cx-grid--4.cx-kht-cards { grid-template-columns: 1fr; gap: 16px; }
	.cx-site .cx-kht-row { padding: 16px 76px 16px 60px; }
	.cx-site .cx-kht-row__num { left: 20px; font-size: 18px; }
	.cx-site .cx-kht-row::after { right: 16px; width: 40px; height: 40px; margin-top: -20px; }
	.cx-site .cx-kht-row__title { font-size: 17px; line-height: 22px; }
	.cx-site .cx-kht-chips { gap: 10px; }
	.cx-site .cx-kht-chip { height: 56px; padding: 10px 18px 10px 12px; font-size: 15px; }
	.cx-site .cx-kht-help__panel { padding: 32px 22px; border-radius: 28px; }
	.cx-site .cx-kht .cx-kht-help__title { font-size: 30px; }
	.cx-site .cx-kht-help__panel .cx-btns { width: 100%; }
	/* API docs: the code panel stays readable (full width, sideways scroll) instead of shrinking. */
	.cx-site .cx-kht-vis--api-docs { zoom: 1; width: 100%; height: auto; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-vis__stage { position: static; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-vis__stage > * { position: relative; left: auto; top: auto; width: 100%; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-code { height: auto; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-code__badge { left: auto; right: 12px; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-code__dots { display: none; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-code__tab.is-on { left: 12px; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-code__tab:not(.is-on) { left: 142px; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-code pre { padding-left: 40px; font-size: 12px; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-code__l::before { left: -28px; }
	.cx-site .cx-kht-vis--api-docs .cx-kht-code__note { margin-top: 14px; }
}

@media (max-width: 380px) {
	.cx-site .cx-kht-vis:not(.cx-kht-vis--api-docs) { zoom: 0.5; }
}