/* ==========================================================================
   ConvergedHub — platform capability map
   Two variants: the six-box summary (home) and the two-column chip map
   (platform page). Reveals on scroll; hovering a product pill dims the rest.
   ========================================================================== */

.ch-pm {
	--ch-c1: #5b5bd6;
	--ch-c2: #7c5cfc;
	position: relative;
	overflow: hidden;
	font-family: var(--font-sans);
	color: var(--ink-text);
	background: linear-gradient(
		165deg,
		color-mix(in srgb, var(--accent) 13%, #12151f) 0%,
		#0f121b 42%,
		color-mix(in srgb, var(--violet) 13%, #11131c) 100%
	);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.ch-pm--light {
	color: var(--text);
	background: linear-gradient(
		165deg,
		color-mix(in srgb, var(--accent) 9%, #ffffff) 0%,
		#f8f9ff 44%,
		color-mix(in srgb, var(--violet) 9%, #ffffff) 100%
	);
}

.ch-pm__glow {
	position: absolute;
	top: -200px;
	left: -100px;
	width: 620px;
	height: 620px;
	border-radius: 999px;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 22%, transparent), transparent 70%);
	pointer-events: none;
}

.ch-pm__wrap {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 88px 32px 96px;
}

/* Reveal-on-scroll: staggered by --ch-i (index) set inline per element. */
.ch-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ch-i, 0) * 110ms),
		transform 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--ch-i, 0) * 110ms);
}

.ch-pm.is-shown .ch-reveal {
	opacity: 1;
	transform: translateY(0);
}

.ch-pm__title {
	max-width: none;
	margin: 0 0 40px;
	text-align: center;
}

.ch-pm__title h2 {
	margin: 0;
	font-size: 42px;
	font-weight: 600;
	letter-spacing: -1.3px;
	line-height: 1.12;
	text-wrap: balance;
	color: inherit;
}

.ch-pm__title h2 em {
	font-style: normal;
	color: var(--accent);
}

.ch-pm__title p {
	margin: 20px auto 0;
	max-width: 44em;
	font-size: 18px;
	line-height: 1.6;
	color: var(--text-2);
}

.ch-pm__panel {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	padding: 44px 44px 32px;
	background: linear-gradient(
		155deg,
		color-mix(in srgb, var(--accent) 8%, var(--card)) 0%,
		var(--card) 38%,
		color-mix(in srgb, var(--violet) 7%, var(--card)) 100%
	);
	border: 1.5px solid color-mix(in srgb, var(--accent) 32%, var(--border));
	box-shadow: 0 22px 54px rgba(0, 0, 0, 0.28);
}

.ch-pm--light .ch-pm__panel {
	box-shadow: 0 20px 48px rgba(24, 40, 80, 0.12);
}

.ch-pm__panelorb {
	position: absolute;
	top: -180px;
	right: -80px;
	width: 460px;
	height: 460px;
	border-radius: 999px;
	background: radial-gradient(circle, color-mix(in srgb, var(--violet) 14%, transparent), transparent 70%);
	pointer-events: none;
}

.ch-pm__head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-bottom: 26px;
}

.ch-pm__head img {
	height: 38px;
	width: auto;
	display: block;
}

.ch-pm-divider {
	width: 2px;
	height: 36px;
	border-radius: 999px;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.42) 22%, rgba(255, 255, 255, 0.42) 78%, transparent);
}

.ch-pm--light .ch-pm-divider {
	background: linear-gradient(180deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
}

.ch-pm__tagline {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	background: linear-gradient(100deg, #2f6be0 0%, #6e5be8 55%, var(--violet-soft) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* --- Product pills --- */

.ch-pm__products {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 32px;
}

.ch-pmpill__soon {
	padding: 2px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, #9b4fd6 18%, transparent);
	border: 1px solid color-mix(in srgb, #9b4fd6 40%, transparent);
	color: #c68bf0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1.4;
}

.ch-pmpill {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 16px;
	border-radius: 999px;
	cursor: pointer;
	font-family: inherit;
	appearance: none;
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--ch-c1) 22%, transparent),
		color-mix(in srgb, var(--ch-c2) 14%, transparent)
	);
	border: 1px solid var(--accent-border);
	color: var(--text);
	box-shadow: none;
	transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 150ms ease;
}

.ch-pmpill[aria-pressed="true"] {
	background: linear-gradient(135deg, var(--ch-c1), var(--ch-c2));
	border-color: color-mix(in srgb, var(--ch-c1) 70%, transparent);
	color: #fff;
	box-shadow: 0 8px 20px color-mix(in srgb, var(--ch-c1) 34%, transparent);
}

.ch-pmpill__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	flex-shrink: 0;
	background: linear-gradient(140deg, var(--ch-c1), var(--ch-c2));
	color: #fff;
}

.ch-pmpill[aria-pressed="true"] .ch-pmpill__badge {
	background: rgba(255, 255, 255, 0.22);
}

.ch-pmpill__label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}

.ch-pm__blurb {
	position: relative;
	margin: 0 auto 34px;
	max-width: 38em;
	text-align: center;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-2);
}

/* --- Interaction-mode rail: Speak · See · Interact · Resolve · Escalate --- */

.ch-pm__modes {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin: 0 0 44px;
	padding: 0 8px;
}

.ch-pm-rail {
	position: absolute;
	top: 21px;
	left: 52px;
	right: 52px;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--accent) 20%, transparent),
		var(--accent) 18%,
		var(--violet) 82%,
		color-mix(in srgb, var(--violet) 20%, transparent)
	);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
}

.ch-pm.is-shown .ch-pm-rail {
	transform: scaleX(1);
}

.ch-pmnode {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	opacity: 0;
	transform: translateY(10px) scale(0.94);
	transition:
		opacity 460ms cubic-bezier(0.22, 1, 0.36, 1) calc(320ms + var(--ch-i, 0) * 110ms),
		transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(320ms + var(--ch-i, 0) * 110ms);
}

.ch-pm.is-shown .ch-pmnode {
	opacity: 1;
	transform: none;
}

.ch-pmnode__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: linear-gradient(140deg, var(--accent-bright), #6c4fd0);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 32%, transparent), 0 0 0 5px var(--card);
	color: #fff;
}

.ch-pmnode__label {
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.1px;
	color: var(--text);
}

/* --- Variant A: six capability boxes (home) --- */

.ch-pm__boxes {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.ch-pmbox {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border-radius: 16px;
	background: linear-gradient(
		150deg,
		color-mix(in srgb, var(--ch-c1) 12%, var(--card)) 0%,
		var(--card) 68%,
		color-mix(in srgb, var(--ch-c2) 8%, var(--card)) 100%
	);
	border: 1px solid color-mix(in srgb, var(--ch-c1) 28%, transparent);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.ch-pmbox:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px color-mix(in srgb, var(--ch-c1) 28%, rgba(0, 0, 0, 0.2));
	border-color: color-mix(in srgb, var(--ch-c1) 52%, transparent);
}

.ch-pmbox__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	flex-shrink: 0;
	background: linear-gradient(
		140deg,
		color-mix(in srgb, var(--ch-c1) 26%, transparent),
		color-mix(in srgb, var(--ch-c2) 20%, transparent)
	);
	border: 1px solid color-mix(in srgb, var(--ch-c1) 34%, transparent);
	color: var(--ch-c1);
}

.ch-pmbox h3 {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.35;
	color: var(--text);
}

.ch-pmbox--learn {
	position: relative;
	justify-content: center;
	margin-top: 14px;
	/* The full-width tile runs its ramp flatter than the grid tiles. */
	background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--ch-c1) 11%, var(--card)) 0%,
		var(--card) 62%,
		color-mix(in srgb, var(--ch-c2) 8%, var(--card)) 100%
	);
}

/* --- Variant B: two columns of chip groups (platform page) --- */

.ch-pm__cols {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 56px;
}

.ch-pm__col {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.ch-pmgroup__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ch-pmgroup__head span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--accent);
}

.ch-pmgroup__head h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--accent);
}

.ch-pmgroup__rule {
	display: block;
	height: 2px;
	margin-top: 9px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--accent-bright), var(--violet) 58%, color-mix(in srgb, var(--violet) 12%, transparent));
}

.ch-pmgroup__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.ch-pmchip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 13px 6px 6px;
	border-radius: 10px;
	background: linear-gradient(
		140deg,
		color-mix(in srgb, var(--ch-c1) 13%, var(--card)),
		color-mix(in srgb, var(--ch-c2) 8%, var(--card))
	);
	border: 1px solid color-mix(in srgb, var(--ch-c1) 30%, transparent);
	font-size: 12px;
	font-weight: 500;
	color: var(--text);
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) calc(420ms + var(--ch-i, 0) * 45ms),
		transform 420ms cubic-bezier(0.22, 1, 0.36, 1) calc(420ms + var(--ch-i, 0) * 45ms);
}

.ch-pm.is-shown .ch-pmchip {
	opacity: 1;
	transform: none;
}

/* Once the entrance has settled, chips respond instantly to pill hover. */
.ch-pm.is-settled .ch-pmchip {
	transition: opacity 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.ch-pmchip__label {
	padding-left: 7px;
}

.ch-pmchip__lead {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-left: 7px;
}

.ch-pmchip__sep {
	width: 1px;
	height: 14px;
	background: currentColor;
	opacity: 0.35;
}

/* Product focus: the hovered product lights up, everything else dims. */
.ch-pm[data-active] .ch-pmchip,
.ch-pm[data-active] .ch-pmbox {
	opacity: 0.45;
}

.ch-pm[data-active="experience"] [data-product="experience"],
.ch-pm[data-active="learning"] [data-product="learning"],
.ch-pm[data-active="insights"] [data-product="insights"],
.ch-pm[data-active="assist"] [data-product="assist"] {
	opacity: 1;
}

.ch-pm[data-active="experience"] .ch-pmchip[data-product="experience"],
.ch-pm[data-active="learning"] .ch-pmchip[data-product="learning"],
.ch-pm[data-active="insights"] .ch-pmchip[data-product="insights"],
.ch-pm[data-active="assist"] .ch-pmchip[data-product="assist"] {
	background: linear-gradient(140deg, var(--ch-c1), var(--ch-c2));
	border-color: color-mix(in srgb, var(--ch-c1) 72%, transparent);
	font-weight: 600;
	color: #fff;
}

.ch-pm__learngroup {
	position: relative;
	margin-top: 40px;
}

.ch-pm__learnhead {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.ch-pm__learnhead span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #e08a18;
}

.ch-pm__learnhead h3 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: center;
	color: #e08a18;
}

.ch-pm__learnrule {
	display: block;
	height: 2px;
	margin-top: 9px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, #f0a020 12%, transparent),
		#f0a020 26%,
		#ff6b6b 74%,
		color-mix(in srgb, #ff6b6b 12%, transparent)
	);
}

.ch-pm__learnitems {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

/* --- Footer + CTA --- */

.ch-pm__foot {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin-top: 44px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
}

.ch-pm__foot span:not(.ch-pm-dot) {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
}

.ch-pm-dot {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(140deg, var(--accent-bright), var(--violet));
}

.ch-pm__cta {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 36px;
}

.ch-pm__ctalink {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.1px;
	color: #fff;
	background: linear-gradient(100deg, var(--accent-bright), var(--violet));
	box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 34%, transparent);
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ch-pm__ctalink:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 42%, transparent);
}

/* --- Product colour sets --- */

[data-product="experience"] {
	--ch-c1: #5b5bd6;
	--ch-c2: #7c5cfc;
}

[data-product="learning"] {
	--ch-c1: #f0a020;
	--ch-c2: #ff6b6b;
}

[data-product="insights"] {
	--ch-c1: #3e9bff;
	--ch-c2: #38c7d6;
}

[data-product="assist"] {
	--ch-c1: #9b4fd6;
	--ch-c2: #e86bb0;
}

/* Header/menu cards reuse the same palette keys with their own hues. */
[data-palette="blue-teal"] {
	--ch-c1: #3e9bff;
	--ch-c2: #38c7d6;
}

[data-palette="violet-pink"] {
	--ch-c1: #9b6be0;
	--ch-c2: #ff7bb0;
}

[data-palette="amber-coral"] {
	--ch-c1: #f0a020;
	--ch-c2: #ff6b6b;
}

[data-palette="indigo-violet"] {
	--ch-c1: #5b5bd6;
	--ch-c2: #7c5cfc;
}

/* --- Breakpoints --- */

@media (max-width: 900px) {
	.ch-pm__boxes {
		grid-template-columns: 1fr 1fr;
	}

	.ch-pm__modes {
		flex-wrap: nowrap;
		gap: 6px;
		justify-content: center;
		padding: 0 4px;
	}

	.ch-pmnode {
		flex: 1 1 0;
		min-width: 0;
		gap: 10px;
	}

	.ch-pmnode__icon {
		width: 34px;
		height: 34px;
		box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent);
	}

	.ch-pmnode__icon svg {
		width: 16px;
		height: 16px;
	}

	.ch-pmnode__label {
		font-size: 10.5px;
		letter-spacing: -0.2px;
	}

	.ch-pm-rail {
		display: none;
	}

	.ch-pm__cols {
		grid-template-columns: 1fr;
	}

	.ch-pm__foot {
		justify-content: center;
		flex-direction: column;
		gap: 6px;
	}

	.ch-pm-dot {
		display: none;
	}

	.ch-pm__head {
		flex-direction: column;
	}

	.ch-pm-divider {
		display: none;
	}
}

@media (max-width: 720px) {
	.ch-pm__wrap {
		padding: 56px 20px 64px;
	}

}

@media (max-width: 560px) {
	.ch-pm__boxes {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Platform hero — the dark band with the pipeline diagram
   ========================================================================== */

.ch-ph {
	position: relative;
	overflow: hidden;
	border-radius: 28px 28px 0 0;
	background: radial-gradient(120% 130% at 78% 30%, #241a5e 0%, #14103a 42%, #0b0a24 100%);
	color: #fff;
}

.ch-ph__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(40% 55% at 82% 42%, rgba(124, 92, 255, 0.35) 0%, rgba(124, 92, 255, 0) 70%);
	pointer-events: none;
}

.ch-ph__wrap {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 132px 32px 96px;
	display: grid;
	grid-template-columns: 1fr 1.02fr;
	gap: 52px;
	align-items: center;
}

.ch-ph__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.62);
}

.ch-ph__title {
	margin: 18px 0 0;
	/* theme.json sets a dark colour on every heading; this band is dark. */
	color: #fff;
	font-size: 52px;
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -1.6px;
	text-wrap: balance;
}

/* The design fixes the headline box at 622 × 213px. That widens the first
   grid column past its 1fr share, which is what places the diagram; in the
   stacked layout it keeps the centred headline's line breaks. Phones get the
   fluid box (below). */
@media (min-width: 721px) {
	.ch-ph__title {
		width: 622px;
		height: 213px;
	}
}

.ch-ph__title em {
	font-style: normal;
	background: linear-gradient(96deg, #5ea8ff 0%, #8b7cff 52%, #c96bff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ch-ph__lede {
	margin: 4px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
	max-width: 32em;
}

.ch-ph__cta {
	display: flex;
	gap: 12px;
	margin-top: 32px;
	flex-wrap: wrap;
}

.ch-ph__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 24px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.ch-ph__arrow {
	font-size: 17px;
}

.ch-ph__btn--primary {
	background: linear-gradient(96deg, #6d5cff, #9b5cff);
	box-shadow: 0 10px 28px rgba(109, 92, 255, 0.38);
}

.ch-ph__btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 34px rgba(109, 92, 255, 0.5);
}

.ch-ph__btn--ghost {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.04);
}

.ch-ph__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.55);
}

.ch-ph__art {
	position: relative;
	width: 100%;
	max-width: 520px;
	min-width: 320px;
	margin: 0 auto;
}

.ch-ph__panel {
	position: relative;
	overflow: hidden;
	padding: 24px;
	border-radius: 22px;
	background: linear-gradient(125deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 100%);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 24px 54px rgba(6, 6, 24, 0.44);
}

.ch-ph__panelglow {
	position: absolute;
	top: -90px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 999px;
	background: radial-gradient(circle at 50% 50%, rgba(139, 124, 255, 0.34), transparent 70%);
	pointer-events: none;
}

.ch-ph__actor {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.ch-ph__who {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 36px;
	padding: 0 14px 0 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 13px;
	font-weight: 600;
	color: #fff;
}

.ch-ph__whoicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #dcd5ff;
}

.ch-ph__chips {
	display: flex;
	gap: 6px;
	margin-left: auto;
	flex-wrap: wrap;
}

.ch-ph__chips--step {
	flex-shrink: 0;
	gap: 5px;
}

.ch-ph__chip {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: rgba(255, 255, 255, 0.78);
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.16);
	white-space: nowrap;
}

.ch-ph__steps {
	position: relative;
	margin-top: 14px;
	padding-left: 28px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ch-ph__rail {
	position: absolute;
	left: 7px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(180deg, rgba(94, 168, 255, 0.5), rgba(139, 124, 255, 0.5), rgba(201, 107, 255, 0.5));
}

/* The marker beside the active step; its position and tint follow the step
   the script highlights (--ch-k of --ch-n, --ch-tint). */
.ch-ph__pulse {
	position: absolute;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	top: calc((var(--ch-k, 0) + 0.5) * 100% / var(--ch-n, 4) - 6px);
	background: radial-gradient(circle at 50% 50%, #fff 0%, var(--ch-tint, #5ea8ff) 45%, rgba(139, 124, 255, 0) 72%);
	transition: top 420ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease;
}

.ch-ph__step {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 13px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: none;
	transition: background 320ms ease, border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

.ch-ph__step.is-on {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.34);
	box-shadow: 0 10px 26px rgba(6, 6, 24, 0.4);
	transform: translateX(3px);
}

.ch-ph__stepicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: none;
	color: #fff;
	transition: background 320ms ease, box-shadow 320ms ease;
}

.ch-ph__step.is-on .ch-ph__stepicon {
	background: linear-gradient(140deg, var(--ch-tint), rgba(255, 255, 255, 0.22));
	border-color: transparent;
	box-shadow: 0 8px 18px rgba(6, 6, 24, 0.45);
}

.ch-ph__stepbody {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ch-ph__stepname {
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.1px;
}

.ch-ph__stepdesc {
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Trust panel — security claims beside chips, badges and numbers
   ========================================================================== */

.ch-tp {
	background: var(--card);
	border-bottom: 1px solid var(--border);
}

.ch-tp__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 88px 32px;
}

.ch-tp__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.48px;
	text-transform: uppercase;
	color: var(--accent);
}

.ch-tp__title {
	margin: 12px 0 0;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -0.9px;
	max-width: 18em;
	color: var(--text);
}

.ch-tp__lede {
	margin: 14px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-2);
	max-width: 34em;
}

.ch-tp__points {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 26px;
}

.ch-tp__point {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.5;
}

.ch-tp__point svg {
	flex-shrink: 0;
}

.ch-tp__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 26px;
	height: 44px;
	padding: 0 20px;
	border-radius: 12px;
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--accent);
	background: var(--card);
	border: 1px solid var(--accent-border);
	box-shadow: var(--shadow-card);
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.ch-tp__link:hover {
	color: var(--accent);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(24, 40, 80, 0.12);
	border-color: var(--accent);
}

.ch-tp__chips {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}

.ch-tp__chip {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 14px;
	border-radius: 12px;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: 0 1px 2px rgba(24, 40, 80, 0.04);
	font-size: 13px;
	font-weight: 600;
}

.ch-tp__chipicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent);
	flex-shrink: 0;
}

.ch-tp__badges {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.ch-tp__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	border-radius: 14px;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	padding: 10px;
}

.ch-tp__badge img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ch-tp__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-top: 12px;
}

.ch-tp__stat {
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
}

.ch-tp__statvalue {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.6px;
}

.ch-tp__statlabel {
	font-size: 12.5px;
	color: var(--text-3);
	margin-top: 3px;
}

@media (max-width: 900px) {
	.ch-tp__panel {
		grid-template-columns: 1fr;
	}
}

/* Chips row above a feature grid (the integrations section). */
.ch-fg__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 26px auto 0;
	max-width: 1080px;
}

.ch-fg__chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 8%, var(--card));
	border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}

/* The design's one-column hero, below 1080px. */
@media (max-width: 1080px) {
	.ch-ph__wrap {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.ch-ph__cta {
		justify-content: center;
	}

	.ch-ph__lede {
		margin-left: auto;
		margin-right: auto;
	}

	.ch-ph__art {
		text-align: left;
	}
}

@media (max-width: 720px) {
	/* The design's phone rule: 92px above the first section, desktop padding
	   inside it. (Its headline keeps a fixed 622px box that overflows a phone;
	   here it stays fluid.) */
	.ch-ph__wrap {
		padding: 128px 32px 96px; /* 224px left a gap on phones (Venu, Nov 8) */
	}
}

@media (max-width: 480px) {
	.ch-ph__art {
		transform: scale(0.78);
		transform-origin: top center;
		margin-bottom: -72px;
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ch-ph__pulse,
	.ch-ph__step,
	.ch-ph__stepicon {
		transition: none;
	}
}

/* Numbered feature cards and the meta line. */
.ch-card__icon--number {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.ch-card__meta {
	display: block;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--border);
}

.ch-card__metalabel {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: var(--accent);
}

.ch-card__metatext {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--text-2);
}