/* ==========================================================================
   ConvergedHub — recurring page sections
   One block per pattern in patterns/. Values ported 1:1 from the prototypes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.ch-hero {
	position: relative;
	/* In the design the hero, rail and try bar are one section, and the glow
	   fades out behind the rail. Here they are separate blocks, so the hero
	   clips only its top and sides; clipping the bottom too cut the glow off
	   in a hard line above the rail. */
	clip-path: inset(0 0 -1000px 0);
}

.ch-hero__glow {
	position: absolute;
	/* The design's top: -22% of that combined section (978px tall). */
	inset: -215px -10% auto -10%;
	height: 820px;
	background: radial-gradient(ellipse 52% 48% at 50% 36%, var(--accent-soft), transparent 72%);
	pointer-events: none;
}

/* Pricing's hero has no glow in the design. */
.ch-hero--large .ch-hero__glow {
	display: none;
}

@media (max-width: 720px) {
	/* -22% of the combined section at phone width (835px). */
	.ch-hero__glow {
		top: -184px;
	}
}

.ch-hero__inner {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	padding: 72px 32px 0;
	text-align: center;
}

/* The hero eyebrow names the category in a full sentence, so it reads in
   sentence case rather than the tracked capitals of a short kicker. */
.ch-hero__inner > .ch-kicker {
	margin-bottom: 18px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* …or under the headline, as a category line between it and the subtitle. */
.ch-hero__inner > .ch-hero__tagline {
	margin: 24px 0 0;
}

.ch-hero__tagline + .ch-hero__sub {
	margin-top: 10px;
}

.ch-hero__title {
	margin: 0;
	font-size: clamp(34px, 7.2vw, 86px);
	line-height: 0.98;
	font-weight: 600;
	/* -2.6px at the 86px desktop size, scaled down with the text: a fixed
	   -2.6px at the 34px phone size ran the letters of "Re-imagine" together. */
	letter-spacing: -0.03em;
	color: var(--text);
	text-wrap: balance;
}

.ch-hero__title .ch-gradient-text {
	padding: 0.06em 0.08em 0.12em 0;
	margin-bottom: -0.12em;
}

.ch-hero__sub {
	margin: 26px auto 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--text-2);
	max-width: 34em;
}

/* The homepage subtitle is a long sentence; given more width it sits on two
   balanced lines on desktop instead of three. */
.home .ch-hero__sub {
	max-width: 44em;
	text-wrap: balance;
}

.ch-hero__lead {
	margin: 26px auto 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.55;
	color: var(--accent);
	max-width: 34em;
}

/* --------------------------------------------------------------------------
   2. Experience rail — auto-scrolling marquee of story tiles
   -------------------------------------------------------------------------- */

.ch-railwrap,
.ch-page > main > .ch-railwrap {
	/* The second selector outranks the reset that zeroes every top-level
	   section's margins (marketing.css, `.ch-page > main > *`). */
	position: relative;
	margin-top: 20px;
}

.ch-rail {
	overflow-x: auto;
	overflow-y: hidden;
	padding: 8px 0 28px;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scroll-behavior: auto;
	scrollbar-width: none;
}

.ch-rail::-webkit-scrollbar {
	display: none;
}

.ch-rail__track {
	display: flex;
	gap: 20px;
	width: max-content;
	padding: 0 10px;
}

.ch-tile {
	position: relative;
	flex: 0 0 auto;
	width: 272px;
	height: 364px;
	border-radius: 16px;
	overflow: hidden;
	text-decoration: none;
	padding: 20px;
	display: flex;
	flex-direction: column;
	background-color: #eef1f8;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
	/* The picture sits at z-index -1: above the tile's own background colour,
	   below the scrim and the caption. */
	isolation: isolate;
}

.ch-tile__img {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	pointer-events: none;
}

/* Hover only where there is a pointer that hovers: on a phone a tap left the
   tile lifted mid-swipe. */
@media (hover: hover) {
	.ch-tile:hover {
		transform: translateY(-6px);
		box-shadow: var(--shadow-dialog);
	}
}

.ch-tile__scrim {
	position: absolute;
	inset: auto 0 0 0;
	height: 62%;
	background: linear-gradient(
		to top,
		rgba(4, 6, 16, 0.9) 0%,
		rgba(4, 6, 16, 0.72) 40%,
		rgba(4, 6, 16, 0.3) 74%,
		transparent 100%
	);
}

.ch-tile__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #111118;
	box-shadow: 0 10px 30px rgba(8, 10, 25, 0.28);
}

.ch-tile__cap {
	position: relative;
	display: block;
	margin-top: auto;
	padding-right: 6px;
}

.ch-tile__channel {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.ch-tile__label {
	display: block;
	margin-top: 8px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.7px;
	color: #fff;
	/* The design asks for `pretty`, but its template leaves empty inline
	   elements after the title, which stops Chrome rebalancing; the lines
	   it actually shows are plain wrapping ("Let AI see what I / see"). */
	text-wrap: wrap;
}

.ch-tile__hi {
	font-weight: 800;
	background: linear-gradient(96deg, #7b5bff 0%, #b95bff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #9c6bff;
}

/* CTA tile at the end of each rail loop */
/* Video lightbox (initVideoLightbox): the demo videos are portrait phone
   recordings, so the frame is sized by the window's height. */
.ch-vbox {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	overflow: visible;
}

.ch-vbox::backdrop {
	background: rgba(6, 8, 18, 0.82);
	backdrop-filter: blur(6px);
}

.ch-vbox-open {
	overflow: hidden;
}

.ch-vbox__frame {
	position: relative;
	display: flex;
}

.ch-vbox__video {
	display: block;
	width: min(calc(100vw - 32px), calc(min(86vh - 64px, 960px) * var(--ch-vbox-ar, 0.5625)));
	width: min(calc(100vw - 32px), calc(min(86dvh - 64px, 960px) * var(--ch-vbox-ar, 0.5625)));
	height: auto;
	aspect-ratio: 9 / 16;
	border-radius: 18px;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* A landscape recording (data-ch-aspect): sized by the window's width, and
   short enough to leave the close button and title on screen. Its ratio is
   set inline. */
.ch-vbox--wide .ch-vbox__video {
	width: min(calc(100vw - 144px), 1280px, calc((86vh - 64px) * 1.6));
	width: min(calc(100vw - 144px), 1280px, calc((86dvh - 64px) * 1.6));
}

@media (max-width: 600px) {
	.ch-vbox--wide .ch-vbox__video {
		width: calc(100vw - 16px);
		border-radius: 12px;
	}
}

/* The tile's caption, above the video's top-left corner (the 64px the
   video gives up). */
.ch-vbox__head {
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: calc(100% + 12px);
	pointer-events: none;
}

.ch-vbox__channel {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.ch-vbox__title {
	display: block;
	margin-top: 6px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.5px;
	color: #fff;
	text-wrap: balance;
}

@media (max-width: 600px) {
	.ch-vbox__title {
		font-size: 19px;
	}
}

.ch-vbox__close:not(#_) {
	position: absolute;
	top: 0;
	right: -56px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 150ms ease;
}

.ch-vbox__close:not(#_):hover {
	background: rgba(255, 255, 255, 0.26);
}

.ch-vbox__close:not(#_):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Phones: no room beside the video, so the button sits on it. GoDaddy's
   injected form-control styles are outranked with :not(#_). */
@media (max-width: 600px) {
	.ch-vbox__close:not(#_),
	.ch-vbox__close:not(#_):hover {
		top: 10px;
		right: 10px;
		background: rgba(0, 0, 0, 0.55);
		border-color: rgba(255, 255, 255, 0.4);
	}
}

/* Previous / next: either side of the video, mid-height. */
.ch-vbox__nav:not(#_) {
	position: absolute;
	top: 50%;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 150ms ease;
}

.ch-vbox__nav--prev:not(#_) {
	left: -56px;
}

.ch-vbox__nav--next:not(#_) {
	right: -56px;
}

.ch-vbox__nav:not(#_):hover {
	background: rgba(255, 255, 255, 0.26);
}

.ch-vbox__nav:not(#_):focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ch-vbox--single .ch-vbox__nav:not(#_) {
	display: none;
}

/* Phones: on the video's edges, like the close button. */
@media (max-width: 600px) {
	.ch-vbox__nav:not(#_),
	.ch-vbox__nav:not(#_):hover {
		background: rgba(0, 0, 0, 0.55);
		border-color: rgba(255, 255, 255, 0.4);
	}

	.ch-vbox__nav--prev:not(#_) {
		left: 10px;
	}

	.ch-vbox__nav--next:not(#_) {
		right: 10px;
	}
}

.ch-tile--cta {
	background-image: none;
	background: linear-gradient(150deg, #2e5bf0, #4b3bd8 52%, #7c5bd6);
	box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 34%, transparent);
	border: 1px solid color-mix(in srgb, #fff 32%, transparent);
}

.ch-tile--cta .ch-tile__scrim,
.ch-tile--cta .ch-tile__play,
.ch-tile--cta .ch-tile__cap {
	display: none;
}

.ch-tile__ctabody {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: flex-end;
	gap: 18px;
	padding: 4px;
}

.ch-tile__ctaeyebrow {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.ch-tile__ctatitle {
	display: block;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.6px;
	color: #fff;
}

.ch-tile__ctabtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: flex-start;
	padding: 11px 20px;
	border-radius: 999px;
	background: #fff;
	color: #12234a;
	font-size: 14px;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   3. Try bar — URL capture beneath the hero
   -------------------------------------------------------------------------- */

.ch-trybar {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px 32px 72px;
	text-align: center;
}

.ch-trybar__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.ch-trybar__title {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text);
}

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

.ch-tryform {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--card);
	border: 1px solid var(--border-strong);
	border-radius: 16px;
	padding: 8px 8px 8px 24px;
	box-shadow: 0 1px 2px rgba(17, 17, 26, 0.04);
	width: 100%;
	max-width: 660px;
	margin: 0 auto;
}

.ch-tryform__scheme {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text-3);
}

.ch-tryform input:not(#_) {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--font-sans);
	font-size: 17px;
	color: var(--text);
	padding: 13px 0;
}

.ch-tryform__select {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
}

/* The native list, restyled to read as the bar's field; the chevron is ours. */
.ch-tryform__select select:not(#_) {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: 17px;
	color: var(--text);
	padding: 13px 36px 13px 0;
	text-overflow: ellipsis;
}

.ch-tryform__select select:invalid:not(#_),
.ch-tryform__select select:has(option[value=""]:checked):not(#_) {
	color: var(--text-3);
}

.ch-tryform__select select option {
	color: var(--text);
}

.ch-tryform__select svg {
	position: absolute;
	right: 10px;
	pointer-events: none;
	color: var(--text-3);
}

/* The picker drawn as ours (initSelectMenus in site.js): the field reads as
   the bar's text, and the list opens as a card under it instead of the
   operating system's menu. The select stays underneath for the form. */
.ch-pick select:not(#_) {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.ch-pick__trigger {
	flex: 1;
	min-width: 0;
	padding: 13px 36px 13px 0;
	font-family: var(--font-sans);
	font-size: 17px;
	color: var(--text);
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	outline: none;
	user-select: none;
}

/* The field's own ring (on .ch-pick, below) marks focus; not the site's
   generic outline as well. */
.ch-pick__trigger:focus:not(#_),
.ch-pick__trigger:focus-visible:not(#_) {
	outline: none;
	box-shadow: none;
}

.ch-pick__trigger.is-placeholder {
	color: var(--text-3);
}

.ch-pick svg {
	transition: transform 160ms ease;
}

.ch-pick.is-open svg {
	transform: rotate(180deg);
	color: var(--accent);
}

.ch-tryform--picker .ch-pick:has(.ch-pick__trigger:focus-visible),
.ch-tryform--picker .ch-pick.is-open {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-ring, color-mix(in srgb, var(--accent) 18%, transparent));
}

.ch-tryform--picker .ch-pick:has(select[aria-invalid="true"]) {
	border-color: var(--danger, #d64545);
}

.ch-pick__list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: 320px;
	overflow-y: auto;
	text-align: left;
	background: var(--card);
	border: 1px solid var(--border-strong);
	border-radius: 16px;
	box-shadow: 0 18px 40px -12px rgba(20, 36, 76, 0.28), 0 2px 6px rgba(17, 17, 26, 0.06);
	animation: ch-pick-in 140ms ease-out;
}

.ch-pick__list[hidden] {
	display: none;
}

@keyframes ch-pick-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

.ch-pick__option {
	position: relative;
	padding: 11px 40px 11px 16px;
	border-radius: 10px;
	font-size: 16px;
	line-height: 1.35;
	color: var(--text);
	cursor: pointer;
}

.ch-pick__option.is-active {
	background: var(--accent-soft);
	color: var(--accent-strong);
}

.ch-pick__option[aria-selected="true"] {
	font-weight: 600;
	color: var(--accent-strong);
}

/* A check on the chosen industry. */
.ch-pick__option[aria-selected="true"]::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 6px;
	height: 11px;
	margin-top: -7px;
	border: solid var(--accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
	.ch-pick__list {
		animation: none;
	}

	.ch-pick svg {
		transition: none;
	}
}

.ch-tryform button:not(#_) {
	flex-shrink: 0;
	border: none;
	cursor: pointer;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	color: var(--accent-on);
	background: linear-gradient(100deg, var(--accent-bright) 0%, var(--accent) 55%, var(--accent-strong) 100%);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent);
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 600;
}

/* The industry picker: the list and the button as two separate pieces, not
   one bar — the list carries the bar's card, the form only lines them up. */
.ch-tryform--picker:not(#_) {
	gap: 14px;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.ch-tryform--picker .ch-tryform__select {
	align-self: stretch;
	padding: 4px 8px 4px 24px;
	background: var(--card);
	border: 1px solid var(--border-strong);
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(17, 17, 26, 0.04);
}

.ch-tryform--picker .ch-tryform__select:has(select:focus-visible) {
	border-color: var(--accent);
}

.ch-tryform--picker button:not(#_) {
	padding: 18px 26px;
	border-radius: 16px;
}

.ch-tryform button:hover:not(#_) {
	box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent);
}

.ch-try-short {
	display: none;
}

.ch-trybar__hint {
	margin: 0;
	font-size: 14px;
	color: var(--text-3);
}

.ch-trybar__record {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--text-3);
}

/* --------------------------------------------------------------------------
   4. Certifications strip
   -------------------------------------------------------------------------- */

.ch-certs-band {
	background: color-mix(in srgb, var(--card) 60%, transparent);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.ch-strip {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
}

.ch-strip__label {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--text-2);
}

.ch-certs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 16px 32px;
}

.ch-certs > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 56px;
}

.ch-certs img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.6;
	mix-blend-mode: multiply;
	transition: filter 200ms ease, opacity 200ms ease;
}

.ch-certs img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   5. Problem section — "AI Has Evolved. Enterprise Experiences HAVE NOT."
   -------------------------------------------------------------------------- */

.ch-prob {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--card) 72%);
	font-family: var(--font-sans);
	color: var(--text);
}

.ch-prob__glow {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 62% 72% at 88% 10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 66%),
		radial-gradient(ellipse 50% 60% at 4% 88%, color-mix(in srgb, var(--violet) 9%, transparent), transparent 70%);
	pointer-events: none;
}

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

.ch-prob__grid {
	display: grid;
	grid-template-columns: minmax(320px, 430px) 1fr;
	gap: 56px 72px;
	align-items: center;
}

.ch-prob__title {
	margin: 0;
	font-size: 42px;
	font-weight: 600;
	letter-spacing: -1.3px;
	line-height: 1.12;
}

/* "AI Has Evolved." carries the gradient; "HAVE NOT." is the quiet line. */
.ch-prob__title .ch-prob-lead {
	background: linear-gradient(100deg, var(--accent-bright), var(--violet));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ch-prob__title .ch-prob-coda {
	color: var(--text-3);
	letter-spacing: -0.4px;
}

.ch-prob-nb {
	white-space: nowrap;
}

.ch-prob__lede {
	margin: 24px 0 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--text-2);
}

.ch-prob__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ch-probitem {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 24px;
	border-radius: 16px;
	background: var(--card);
	border: 1px solid var(--border);
	box-shadow: 0 14px 34px -28px rgba(24, 40, 80, 0.5);
	transition:
		box-shadow 180ms ease,
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms ease;
}

.ch-probitem:hover {
	transform: translateX(5px);
	border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
	box-shadow: 0 20px 44px -26px rgba(24, 40, 80, 0.55);
}

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

.ch-probitem h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.3px;
	text-wrap: pretty;
}

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

.ch-prob__kickerbox {
	position: relative;
	margin-top: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

.ch-prob__kickerbar {
	width: 52px;
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--accent-bright), var(--violet));
}

.ch-prob-kicker {
	margin: 0;
	max-width: 24em;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.7px;
	color: var(--text);
	text-wrap: balance;
}

.ch-prob-kicker em {
	font-style: normal;
	background: linear-gradient(100deg, var(--accent-bright), var(--violet));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Word-by-word arrival, 70ms apart, when the line scrolls into view. */
.ch-prob-kicker .w {
	display: inline-block;
}

[data-reveal-words] .w {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 70ms);
}

[data-reveal-words].ch-in .w {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal-words] .w {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

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

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

	.ch-prob-nb {
		white-space: normal;
	}
}

/* --------------------------------------------------------------------------
   6. Testimonials carousel
   -------------------------------------------------------------------------- */

.ch-ts {
	font-family: var(--font-sans);
	color: var(--text);
	background: linear-gradient(
		165deg,
		color-mix(in srgb, var(--accent) 7%, var(--card)) 0%,
		var(--card) 44%,
		color-mix(in srgb, var(--violet) 6%, var(--card)) 100%
	);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.ch-ts__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 80px 32px 96px;
}

/* Title centred; the arrows (only with more than one page) sit at the right. */
.ch-ts__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 32px;
	text-align: center;
}

.ch-ts__head h2 {
	margin: 0;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: -1.1px;
	line-height: 1.14;
	text-wrap: balance;
}

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

.ch-ts__nav {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ch-ts__navbtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	cursor: pointer;
	background: var(--card);
	border: 1px solid var(--border-strong);
	color: var(--text-2);
	transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.ch-ts__navbtn:hover {
	background: var(--accent-soft);
	color: var(--accent);
	transform: translateY(-1px);
}

.ch-ts__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.ch-quote {
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: var(--surface);
	border: 1.5px solid color-mix(in srgb, var(--accent) 20%, var(--border));
	border-radius: 22px;
	box-shadow: 0 14px 34px rgba(24, 40, 80, 0.07);
	padding: 34px;
}

/* `display: flex` above would otherwise override the hidden attribute the
   carousel pages with. Before the script runs, only the first pair shows. */
/* Cards side by side share their rows, so the logos, the first line of each
   quote and the headshots line up whatever the logo height or quote length. */
@supports (grid-template-rows: subgrid) {
	.ch-quote {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
		row-gap: 22px;
	}

	.ch-quote__logo,
	.ch-quote__logolink {
		justify-self: center;
		align-self: center;
	}

	.ch-quote__text {
		align-self: start;
	}

	.ch-quote__by {
		align-self: end;
	}
}

.ch-quote[hidden],
.ch-ts:not(.is-ready) .ch-ts__grid > .ch-quote:nth-child(n+3) {
	display: none;
}

.ch-quote__logo {
	display: block;
	align-self: center;
	height: 36px;
	width: auto;
	border-radius: 8px;
}

.ch-quote__logolink {
	display: block;
	align-self: center;
	border-radius: 8px;
	transition: opacity 150ms ease, transform 150ms ease;
}

.ch-quote__logolink:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.ch-quote__logolink:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

.ch-quote__text {
	margin: 0;
	font-size: 19px;
	line-height: 1.5;
	font-weight: 500;
	letter-spacing: -0.2px;
	color: var(--text);
	text-wrap: pretty;
}

.ch-quote__text p {
	margin: 0;
}

.ch-quote__text p + p {
	margin-top: 0.8em;
}

.ch-quote__by {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
}

.ch-quote__avatar {
	width: 84px;
	height: 84px;
	flex-shrink: 0;
	border-radius: 999px;
	overflow: hidden;
	background: var(--input-hover);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-3);
}

.ch-quote__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ch-quote__name {
	font-size: 15px;
	font-weight: 600;
}

.ch-quote__role {
	margin-top: 3px;
	font-size: 13.5px;
	color: var(--text-2);
}

.ch-quote__metric {
	margin-top: 6px;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--accent);
}

.ch-ts__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.ch-ts__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 999px;
	cursor: pointer;
	border: none;
	background: var(--border-strong);
	transition: width 200ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease;
}

.ch-ts__dot[aria-selected="true"] {
	width: 22px;
	background: var(--accent);
}

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

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

/* --------------------------------------------------------------------------
   6b. Avatar mosaic — stats over a black-and-white wall of video avatars
   -------------------------------------------------------------------------- */

.ch-av {
	font-family: var(--font-sans);
	color: var(--text);
	background: var(--bg);
	border-top: 1px solid var(--border);
}

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

/* Two columns, vertically centred: heading and lede on the left, the
   three stats on the right. */
.ch-av__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px 40px;
	margin-bottom: 36px;
}

.ch-av__intro h2 {
	margin: 0 0 12px;
	font-size: 36px;
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.14;
	white-space: nowrap;
}

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

.ch-av__intro p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-2);
}

.ch-av__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: 0;
}

.ch-av__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ch-av__stat dt {
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -1.2px;
	line-height: 1;
	background: linear-gradient(120deg, var(--accent) 0%, var(--violet) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ch-av__stat dd {
	margin: 0;
	font-size: 14px;
	color: var(--text-2);
}

/* Nine columns, five rows: three 2×2 feature tiles placed by position (the
   tiles are shuffled, so a different face lands on them each load) and the
   other 33 flow into the gaps. */
.ch-av__grid {
	display: grid;
	grid-template-columns: repeat(9, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ch-av__tile:nth-child(1) { grid-area: 1 / 1 / span 2 / span 2; }
.ch-av__tile:nth-child(2) { grid-area: 2 / 5 / span 2 / span 2; }
.ch-av__tile:nth-child(3) { grid-area: 4 / 8 / span 2 / span 2; }

.ch-av__tile {
	position: relative;
	min-width: 0;
}

.ch-av__tile--end {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	padding: 10px;
	border-radius: var(--radius-control);
	background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
}

.ch-av__btn {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: var(--radius-control);
	overflow: hidden;
	cursor: pointer;
	background: var(--surface);
	isolation: isolate;
}

.ch-av__btn img,
.ch-av__btn video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ch-av__btn img {
	filter: grayscale(1) contrast(1.04);
	transition: filter 300ms ease, transform 400ms ease;
}

.ch-av__btn video {
	opacity: 0;
	transition: opacity 250ms ease;
}

.ch-av__tile.is-on img {
	filter: none;
	transform: scale(1.03);
}

.ch-av__tile.is-playing video {
	opacity: 1;
}

.ch-av__btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.ch-av__name {
	position: absolute;
	left: 8px;
	bottom: 8px;
	z-index: 1;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
	color: #fff;
	background: rgba(10, 14, 24, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 200ms ease, transform 200ms ease;
	pointer-events: none;
}

.ch-av__tile.is-on .ch-av__name {
	opacity: 1;
	transform: none;
}

/* The speaker icon: shown on the playing tile, muted until clicked. */
.ch-av__mute {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	color: #fff;
	background: rgba(10, 14, 24, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	cursor: pointer;
	opacity: 0;
	transform: scale(0.85);
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease, background 150ms ease;
}

.ch-av__tile.is-on .ch-av__mute {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.ch-av__mute:hover {
	background: rgba(10, 14, 24, 0.75);
}

.ch-av__mute[aria-pressed="true"] {
	background: var(--accent);
}

.ch-av__mute:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ch-av__mute .ch-av__mute-on,
.ch-av__mute[aria-pressed="true"] .ch-av__mute-off {
	display: none;
}

.ch-av__mute[aria-pressed="true"] .ch-av__mute-on {
	display: flex;
}

.ch-av__mute > span {
	display: flex;
}

@media (prefers-reduced-motion: reduce) {
	.ch-av__btn img,
	.ch-av__btn video,
	.ch-av__name {
		transition: none;
	}

	.ch-av__tile.is-on img {
		transform: none;
	}
}

@media (max-width: 1100px) {
	.ch-av__head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.ch-av__intro h2 {
		white-space: normal;
		text-wrap: balance;
	}
}

@media (max-width: 900px) {
	.ch-av__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.ch-av__tile:nth-child(-n + 3) {
		grid-area: auto;
	}
}

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

	.ch-av__intro h2 {
		font-size: 34px; /* every phone title is 34px (Venu, Nov 8) */
	}

	.ch-av__stats {
		gap: 12px 28px;
	}

	.ch-av__stat dt {
		font-size: 32px;
	}
}

@media (max-width: 560px) {
	.ch-av__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 6px;
	}

	.ch-av__tile--end {
		font-size: 11px;
		padding: 6px;
	}

	.ch-av__mute {
		top: 4px;
		right: 4px;
		width: 28px;
		height: 28px;
	}

	.ch-av__name {
		left: 4px;
		bottom: 4px;
		padding: 2px 6px;
		font-size: 10px;
	}
}

/* --------------------------------------------------------------------------
   7. Vibe code — typing prompt into a generated experience
   -------------------------------------------------------------------------- */

.ch-vc {
	position: relative;
	font-family: var(--font-sans);
	color: var(--text);
	background: linear-gradient(
		150deg,
		color-mix(in srgb, #38c7d6 12%, transparent) 0%,
		color-mix(in srgb, #3e9bff 8%, transparent) 34%,
		color-mix(in srgb, #f0a020 7%, transparent) 78%,
		color-mix(in srgb, #ff6b6b 5%, transparent) 100%
	);
	border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}

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

.ch-vc__head {
	text-align: center;
	margin-bottom: 40px;
}

.ch-vc__head h2 {
	margin: 14px 0 0;
	font-size: 42px;
	font-weight: 600;
	letter-spacing: -1.3px;
	line-height: 1.12;
	text-wrap: balance;
	color: var(--text);
}

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

.ch-vc__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}

.ch-vc__card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1.5px solid color-mix(in srgb, var(--accent) 26%, var(--border));
	border-radius: 20px;
	box-shadow: 0 16px 40px rgba(24, 40, 80, 0.08);
	padding: 28px;
}

.ch-vc__card--out {
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		155deg,
		color-mix(in srgb, var(--accent) 9%, var(--card)) 0%,
		var(--card) 46%,
		color-mix(in srgb, var(--violet) 8%, var(--card)) 100%
	);
	border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
	box-shadow: 0 16px 40px rgba(24, 40, 80, 0.1);
}

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

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

.ch-vc__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--accent-border);
	background: var(--accent-soft);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--accent);
}

.ch-vc__badge--out {
	background: var(--card);
}

.ch-vc__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--accent);
}

.ch-vc__cardhead > span:last-child {
	font-size: 13px;
	color: var(--text-3);
}

.ch-vc__prompt {
	margin-top: 18px;
	padding: 20px;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
	min-height: 7.4em;
}

.ch-vc__caret {
	display: none;
	width: 2px;
	height: 1.05em;
	margin-left: 2px;
	vertical-align: text-bottom;
	background: var(--accent);
	animation: ch-vc-blink 1s step-end infinite;
}

.ch-vc.is-typing .ch-vc__caret {
	display: inline-block;
}

@keyframes ch-vc-blink {
	0%,
	45% {
		opacity: 1;
	}
	55%,
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ch-vc__caret {
		animation: none;
		opacity: 0;
	}
}

.ch-vc__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.ch-vc__chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: 10px;
	background: linear-gradient(
		140deg,
		color-mix(in srgb, var(--accent) 11%, var(--card)),
		color-mix(in srgb, var(--violet) 7%, var(--card))
	);
	border: 1px solid var(--accent-border);
	font-size: 12px;
	font-weight: 500;
	color: var(--text);
}

.ch-vc__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 24px;
}

.ch-vc__foot > span:last-child {
	font-size: 13px;
	color: var(--text-3);
}

.ch-vc__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	background: linear-gradient(100deg, var(--accent-bright) 0%, #2464e8 55%, #1b4fc4 100%);
	box-shadow: 0 10px 26px rgba(36, 100, 232, 0.38);
	transition: transform 150ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

.ch-vc.is-typing .ch-vc__btn {
	opacity: 0.75;
	box-shadow: none;
}

.ch-vc__btn.is-pressed {
	transform: scale(0.97);
	box-shadow: 0 2px 8px rgba(36, 100, 232, 0.35);
}

.ch-vc__rows {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 18px;
}

.ch-vc__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--card);
	border: 1px solid var(--border);
	opacity: 0;
	transform: translateY(10px);
	box-shadow: none;
	transition:
		opacity 340ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 340ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 340ms ease;
}

.ch-vc__row.is-on {
	opacity: 1;
	transform: translateY(0);
	box-shadow: 0 8px 22px rgba(24, 40, 80, 0.08);
}

.ch-vc__rowicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 12px;
	background: linear-gradient(140deg, var(--accent-bright), #6c4fd0);
	color: #fff;
}

.ch-vc__rowtitle {
	font-size: 15px;
	font-weight: 600;
}

.ch-vc__rowdesc {
	margin-top: 3px;
	font-size: 13px;
	color: var(--text-2);
}

.ch-vc__done {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 22px;
	font-size: 13px;
	color: var(--text-2);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 340ms ease, transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.ch-vc__done.is-on {
	opacity: 1;
	transform: translateY(0);
}

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

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

/* --------------------------------------------------------------------------
   8. Architecture — "Keep your stack. Reimagine the experience."
   -------------------------------------------------------------------------- */

.ch-ar {
	font-family: var(--font-sans);
	color: var(--text);
}

.ch-ar__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 32px 88px;
}

.ch-ar__head {
	max-width: 58em;
	margin: 0 auto;
	text-align: center;
}

.ch-ar__head h2 {
	margin: 0;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -1.2px;
	line-height: 1.14;
	text-wrap: balance;
}

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

.ch-ar__head p {
	margin: 20px auto 0;
	max-width: 52em;
	font-size: 17px;
	line-height: 1.6;
	color: var(--text-2);
	text-wrap: balance;
}

.ch-ar__panel {
	margin-top: 40px;
	background: var(--card);
	border: 1.5px solid color-mix(in srgb, var(--accent) 18%, var(--border));
	border-radius: 24px;
	box-shadow: 0 18px 44px rgba(24, 40, 80, 0.08);
	padding: 36px;
}

.ch-ar__caption {
	margin: 0 0 16px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--text-3);
}

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

.ch-ar__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 12px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text);
}

.ch-ar__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px 0 16px;
	color: var(--accent);
}

.ch-ar__arrow--up {
	padding: 16px 0 18px;
}

.ch-ar__arrow span {
	flex: 1;
	height: 1px;
}

.ch-ar__arrow span:first-child {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent));
}

.ch-ar__arrow span:last-child {
	background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent));
}

.ch-ar__band {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 40px 32px;
	border-radius: 18px;
	background: linear-gradient(
		120deg,
		#171a28 0%,
		color-mix(in srgb, var(--accent) 26%, #1b2036) 48%,
		color-mix(in srgb, var(--violet) 30%, #1a1b2c) 100%
	);
	color: #fff;
	box-shadow: 0 14px 34px rgba(20, 24, 48, 0.32);
}

.ch-ar__bandglow {
	position: absolute;
	inset: auto -20% -70% -20%;
	height: 220px;
	background: radial-gradient(ellipse 40% 70% at 50% 100%, color-mix(in srgb, var(--accent-bright) 34%, transparent), transparent 72%);
	pointer-events: none;
}

.ch-ar__bandhead {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 14px;
}

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

.ch-ar-divider {
	width: 1.5px;
	height: 32px;
	border-radius: 999px;
	background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.4) 80%, transparent);
}

.ch-ar-layer {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.3px;
}

.ch-ar__bandtext {
	position: relative;
	font-size: 15.5px;
	line-height: 1.6;
	opacity: 0.88;
	max-width: 46em;
}

.ch-ar__row-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ch-ar__chip--channel {
	gap: 10px;
	background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card) 78%);
	border: 1px solid var(--accent-border);
	font-size: 13.5px;
	font-weight: 600;
	padding: 14px 16px;
}

.ch-ar__chip--channel .ch-ar__sep {
	width: 1px;
	height: 16px;
	background: var(--accent-border);
}

.ch-ar__chip--channel .ch-ar__sub {
	font-weight: 500;
}

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

	/* The channel chips keep wrapping in rows: the design's own
	   flex-direction:column rule is on a class its markup never uses. */
}

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

	.ch-ar__panel {
		padding: 24px;
	}

	.ch-ar-layer {
		font-size: 17px;
	}

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

/* --------------------------------------------------------------------------
   9. Closing CTA — the deep ink band that ends most templates
   -------------------------------------------------------------------------- */

.ch-cta {
	position: relative;
	overflow: hidden;
	background: var(--ink);
	border-top: 1px solid var(--ink-border);
	padding: 52px 32px;
	text-align: center;
}

.ch-cta__glow {
	position: absolute;
	inset: auto -20% -18% -20%;
	height: 320px;
	background: radial-gradient(ellipse 42% 62% at 50% 100%, color-mix(in srgb, var(--accent-bright) 38%, transparent), transparent 72%);
	pointer-events: none;
}

.ch-cta h2 {
	position: relative;
	margin: 0;
	font-size: 34px;
	font-weight: 600;
	letter-spacing: -0.9px;
	color: var(--ink-text);
	text-wrap: balance;
}

.ch-cta p {
	position: relative;
	margin: 14px auto 0;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--ink-text-2);
	max-width: 36em;
}

/* *marked* runs in the lede are bold, as in the pricing CTA. */
.ch-cta p em {
	font-style: normal;
	font-weight: 700;
}

.ch-cta p.ch-cta__lede--narrow {
	max-width: 32em;
}

.ch-cta p.ch-cta__lede--full {
	max-width: none;
}

.ch-cta__actions {
	position: relative;
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 24px;
	flex-wrap: wrap;
}

.ch-cta__primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	/* The design system's large primary button: 20px sides inside a 1px
	   transparent border, ink-on-accent text, and the card shadow (the
	   light-theme values, as the design renders them here). */
	padding: 0 20px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: var(--accent);
	color: var(--accent-on);
	box-shadow: 0 1px 2px rgba(17, 17, 26, 0.04), 0 8px 24px -12px rgba(17, 17, 26, 0.1);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms ease, filter 150ms ease, transform 120ms ease;
}

.ch-cta__primary:hover {
	filter: brightness(1.06);
	color: var(--accent-on);
	transform: translateY(-1px);
}

.ch-cta__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 22px;
	border-radius: 12px;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.ch-cta__secondary:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #fff;
	color: #fff;
	transform: translateY(-1px);
}

/* Newsletter variant of the ink band (blog archive) */
.ch-cta__form {
	position: relative;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 26px auto 0;
}

.ch-cta__form input:not(#_) {
	height: 46px;
	width: 260px;
	max-width: 60vw;
	padding: 0 16px;
	border-radius: 12px;
	border: 1px solid var(--ink-border);
	background: var(--ink-2);
	color: var(--ink-text);
	font-size: 15px;
	font-family: inherit;
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ch-cta__form input:focus:not(#_) {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}

.ch-cta__form button:not(#_) {
	height: 46px;
	padding: 0 22px;
	border-radius: 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	background: linear-gradient(100deg, var(--accent-bright) 0%, #2464e8 55%, #1b4fc4 100%);
	border: 1px solid transparent;
	color: #fff;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ch-cta__form button:hover:not(#_) {
	transform: translateY(-1px);
	box-shadow: 0 10px 28px rgba(36, 100, 232, 0.45);
}

.ch-cta__narrow {
	position: relative;
	max-width: 34rem;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Mobile refinements shared across hero + rail + strip
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
	.ch-hero__inner {
		padding: 44px 20px 0;
	}

	.ch-hero__sub {
		font-size: 15.5px;
		line-height: 1.45;
		margin-top: 18px;
	}

	.ch-trybar {
		padding: 24px 20px 44px;
	}

	.ch-try-full {
		display: none;
	}

	.ch-try-short {
		display: inline;
	}

	.ch-tryform {
		gap: 6px;
		padding: 6px 6px 6px 14px;
		border-radius: 14px;
	}

	.ch-tryform__scheme {
		font-size: 12.5px;
	}

	.ch-tryform input:not(#_) {
		font-size: 15px;
		padding: 11px 0;
	}

	.ch-tryform__select select:not(#_) {
		font-size: 15px;
		padding: 11px 28px 11px 0;
	}

	.ch-pick__trigger {
		font-size: 15px;
		padding: 11px 28px 11px 0;
	}

	.ch-tryform__select svg {
		right: 4px;
	}

	.ch-tryform button:not(#_) {
		padding: 0 14px;
		height: 38px;
		font-size: 12.5px;
		gap: 6px;
	}

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

	.ch-strip {
		padding: 22px 20px;
		justify-content: center;
		text-align: center;
	}

	.ch-strip > div {
		justify-content: center;
	}

	.ch-certs {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 4px;
		width: 100%;
	}

	.ch-certs > span {
		width: auto;
		height: 48px;
	}

	/* Only the homepage's design tightens the closing band on phones. */
	.home .ch-cta {
		padding: 40px 20px;
	}

	.ch-tile {
		width: 220px;
		height: 300px;
	}
}

/* --------------------------------------------------------------------------
   Element-level corrections for the semantic markup the theme renders
   (figure/blockquote/em) versus the div soup in the prototypes.
   -------------------------------------------------------------------------- */

.ch-quote {
	margin: 0;
}

.ch-quote__name,
.ch-quote__role,
.ch-quote__metric {
	display: block;
}

.ch-quote__by > span:last-child {
	display: block;
}

/* Rail tile captions (and the video pop-up's copy of them) mark their
   gradient run with <em>. */
.ch-tile__label em,
.ch-vbox__title em {
	font-style: normal;
	font-weight: 800;
	background: linear-gradient(96deg, #7b5bff 0%, #b95bff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #9c6bff;
}

/* Hero variants */
.ch-hero--overlay .ch-hero__inner {
	padding-top: 124px;
}

.ch-hero--large .ch-hero__title {
	font-size: 48px;
	line-height: 1.06;
	letter-spacing: -1.3px;
}

/* Pricing's hero (pricing.dc.html): tighter sentence, 900px column. */
.ch-hero--large .ch-hero__inner {
	max-width: 900px;
	padding-bottom: 24px;
}

.ch-hero--large .ch-hero__sub {
	margin-top: 18px;
	line-height: 1.55;
}

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

.ch-hero__sub em {
	font-style: normal;
	color: var(--text);
	font-weight: 500;
}

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

@media (max-width: 720px) {
	.ch-hero--overlay .ch-hero__inner {
		padding-top: 124px;
	}

	/* Pricing's hero keeps the design's 32px gutters and 24px bottom. */
	.ch-hero--large .ch-hero__inner {
		padding: 124px 32px 24px;
	}

	.ch-hero--large .ch-hero__sub {
		font-size: 19px;
		line-height: 1.55;
	}
}

/* ==========================================================================
   The try bar's second step — Phase 0's inline email capture
   ==========================================================================
   Lives in the try bar itself rather than the overlay: at this point there is
   no session to interrupt, and a modal asking for an email address after the
   visitor pressed a button that promised a demo would read as a bait.
   ========================================================================== */

.ch-tryform__step {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: var(--space-3) 0 0;
	animation: ch-try-in 320ms var(--ease-standard) both;
}

.ch-tryform__step[hidden] {
	display: none;
}

@keyframes ch-try-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ch-tryform__step label {
	flex: 0 0 100%;
	margin-bottom: var(--space-1);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-2);
	text-align: center;
}

.ch-tryform__step input:not(#_) {
	flex: 1 1 240px;
	max-width: 340px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-control);
	background: var(--card);
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--text);
}

.ch-tryform__step input:focus-visible:not(#_) {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.ch-tryform__step input[aria-invalid="true"]:not(#_) {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px var(--danger-ring);
}

.ch-tryform__step button:not(#_) {
	flex: 0 0 auto;
	padding: 11px 18px;
	border: 0;
	border-radius: var(--radius-control);
	background: var(--text);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.ch-tryform__step button:hover:not(#_) {
	background: var(--accent-strong);
}

.ch-tryform__step button[aria-busy="true"]:not(#_) {
	opacity: 0.6;
	pointer-events: none;
}

/* One region for both outcomes: two elements would eventually show an error
   and a thank-you at the same time. */
.ch-trybar__note {
	margin: var(--space-2) 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-2);
	text-align: center;
}

.ch-trybar__note[hidden] {
	display: none;
}

.ch-trybar__note.is-error {
	color: var(--danger-fg);
}

.ch-trybar__note.is-done {
	color: var(--success-fg);
	font-weight: 500;
}

/* The "Experience the magic" try bar is desktop-only (Venu, 2026-10-23): the live
   demo needs room, so phones don't get the bar at all — 720px is the site's phone
   width, and the second query catches a phone turned sideways (touch-first, short).
   live-demo.js refuses the demo under the identical query; keep the two in step. */
@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
	.ch-trybar {
		display: none;
	}
}

/* Talk to Sales: the booking form is built by book-demo.js. Until it mounts,
   hold the space its first step takes, so the footer does not jump down when
   it arrives (it was the site's largest layout shift). Only before mounting:
   later steps can be shorter. */
[data-ch-talk-sales-inline]:not(:has(.cbd-inline)) {
	min-height: 857px;
}

@media (max-width: 767px) {
	[data-ch-talk-sales-inline]:not(:has(.cbd-inline)) {
		min-height: 1230px;
	}
}

/* About hero title: one line on wide screens (the design), balanced lines
   below that, where one line ran off the side of a phone (Venu, 12 Nov 2026). */
.ch-about-title {
	text-wrap: balance;
}

@media (min-width: 1100px) {
	.ch-about-title {
		white-space: nowrap;
	}
}

/* About "ConvergedHub was created to rethink that model" pill: on a phone the
   sentence takes two or three lines, so the pill becomes a rounded box and the
   side rules give it their width (Venu, 12 Nov 2026). */
@media (max-width: 600px) {
	.ch-about-pillrow > span:not(.ch-about-pill) {
		display: none;
	}

	.ch-about-pill {
		border-radius: 18px !important;
		text-align: left;
	}
}