/* ==========================================================================
   ConvergedHub — base layer
   Global resets, accessibility utilities, the site-wide micro-interactions
   and the rounded "page card" shell every template sits inside.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #dfe6f2;
	color: var(--text);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

/* --------------------------------------------------------------------------
   Page shell — the 1440px rounded card floating on the cool blue backdrop.
   -------------------------------------------------------------------------- */

.ch-shell {
	background: #dfe6f2;
	padding: 24px;
	min-height: 100vh;
}

.ch-page {
	position: relative;
	background: linear-gradient(158deg, #eef3ff 0%, #f4f1fe 26%, #fbf9ff 48%, var(--bg) 72%);
	color: var(--text);
	font-family: var(--font-sans);
	max-width: 1440px;
	margin: 0 auto;
	border-radius: 28px;
	box-shadow: 0 24px 60px rgba(24, 40, 80, 0.12), 0 2px 6px rgba(24, 40, 80, 0.06);
	overflow-x: clip;
}

/* Article templates use a slightly shorter gradient ramp. */
.ch-page--article {
	background: linear-gradient(168deg, #eef3ff 0%, #f4f1fe 20%, #fbf9ff 38%, var(--bg) 60%);
}

.ch-page__footer {
	border-radius: 0 0 28px 28px;
	overflow: hidden;
}

/* Use-case tabs (site.js) are a phone affordance; desktop shows every card. */
.ch-ucpick {
	display: none;
}

@media (max-width: 720px) {
	.ch-shell {
		padding: 0;
		background: var(--bg);
	}

	.ch-page {
		border-radius: 0;
		box-shadow: none;
	}

	.ch-page__footer {
		border-radius: 0;
	}

	/* The dark heroes round their top corners to match the desktop card;
	   on a phone the page runs edge to edge, so they square off too. The
	   ported pages set the radius inline, hence !important. */
	.ch-page :is(.ch-ph, .ch-solh, .cx-hero, .ch-bookdemo, [data-chx-block="0"]) {
		border-radius: 0 !important;
	}

	/* Talk to sales / Book a demo: the template's 148px top left the text
	   lower than every other page on a phone. */
	.ch-page .ch-bookdemo {
		padding-top: 104px !important;
	}

	/* Page and section titles larger than the homepage's "Re-imagine
	   Experiences" (34px on a phone) come down to it, so every title on a
	   phone is one size (Venu, Nov 8). Smaller titles keep their size. The
	   ported pages set the size inline, hence !important. */
	.ch-page :is(h1, h2):is([style*="font-size: 36px"], [style*="font-size: 38px"], [style*="font-size: 40px"], [style*="font-size: 42px"], [style*="font-size: 44px"], [style*="font-size: 46px"], [style*="font-size: 48px"], [style*="font-size: 50px"], [style*="font-size: 52px"], [style*="font-size: clamp(36px"]),
	.ch-page :is(.ch-solh__title, .ch-ph__title, .ch-hero--large .ch-hero__title, .ch-article__header h1, .ch-bl-hero h1, .ch-prob__title, .ch-tp__title, .ch-int__title),
	.ch-page :is(.ch-pm__title, .ch-ts__head, .ch-ar__head, .ch-vc__head) h2 {
		font-size: 34px !important;
	}

	/* Section titles that were smaller (26-33px) come up to the same 34px.
	   Sub-headings keep their size: legal sections, headings inside blog
	   articles, "Related" link lists. */
	.ch-page h2:is([style*="font-size: 33px"], [style*="font-size: clamp(26px"], [style*="font-size: clamp(28px"], [style*="font-size: clamp(30px"]),
	.ch-page :is(.ch-why__title, .ch-fg__title, .cj__title, .cd__title, .ch-rates__title, .ch-faq__title, .ch-sol-title, .ch-prods__title),
	.ch-page :is(.cx-def__head, .cc__head, .ca__head) h2 {
		font-size: 34px !important;
	}

	/* The industry pages' calendar tabs: narrower, so the next tab is cut
	   off at the edge, and that edge fades while there are more tabs that
	   way (site.js sets is-more-start / is-more-end and nudges the strip). */
	.ch-page .ch-cal-tabs {
		grid-auto-columns: 128px;
	}

	.ch-page :is(.ch-cal-tabwrap, .ch-tabpick) {
		--ch-fade-start: 0px;
		--ch-fade-end: 0px;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ch-fade-start), #000 calc(100% - var(--ch-fade-end)), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 var(--ch-fade-start), #000 calc(100% - var(--ch-fade-end)), transparent 100%);
	}

	.ch-page :is(.ch-cal-tabwrap, .ch-tabpick).is-more-start {
		--ch-fade-start: 36px;
	}

	.ch-page :is(.ch-cal-tabwrap, .ch-tabpick).is-more-end {
		--ch-fade-end: 56px;
	}

	/* Every other industry / use-case page's first picker (grids of cards or
	   buttons, marked .ch-tabpick by site.js) drawn as Retail's strip: one
	   scrolling row of 128px tiles, the active one (.ch-tabpick-on) tinted
	   with an accent top edge. The pages set these styles inline, hence
	   !important. */
	.ch-page .ch-tabpick {
		display: grid !important;
		grid-template-columns: none !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 128px !important;
		gap: 8px !important;
		overflow-x: auto !important;
		scrollbar-width: none;
		flex-wrap: nowrap !important;
		/* Its row of tiles must not widen the grid it sits in (Telecom). */
		contain: inline-size;
		width: 100% !important;
		max-width: 100% !important;
		padding: 10px !important;
		border-radius: 16px !important;
		background: var(--surface) !important;
		border: 1px solid var(--border) !important;
	}

	.ch-page .ch-tabpick::-webkit-scrollbar {
		display: none;
	}

	.ch-page .ch-tabpick > button {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 7px !important;
		width: auto !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 76px !important;
		margin: 0 !important;
		padding: 12px 10px !important;
		border-radius: 12px !important;
		border: 1px solid transparent !important;
		border-top-width: 3px !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--text-2) !important;
		font-size: 12.5px !important;
		font-weight: 600 !important;
		line-height: 1.25 !important;
		letter-spacing: -0.1px !important;
		text-align: center !important;
		white-space: normal !important;
		transform: none !important;
	}

	.ch-page .ch-tabpick > button * {
		text-align: center !important;
	}

	.ch-page .ch-tabpick > button.ch-tabpick-on {
		background: color-mix(in srgb, var(--accent) 12%, var(--card)) !important;
		border-color: color-mix(in srgb, var(--accent) 55%, var(--border)) !important;
		border-top-color: var(--accent) !important;
		color: var(--accent) !important;
	}

	/* The pages colour the active tile's label and icon white for a solid
	   blue tile; on the tinted tile they take the accent instead, and icon
	   boxes get one light tint whatever the page drew. */
	.ch-page .ch-tabpick > button.ch-tabpick-on * {
		color: var(--accent) !important;
	}

	.ch-page .ch-tabpick > button [style*="background"] {
		background: color-mix(in srgb, var(--accent) 10%, var(--card)) !important;
		box-shadow: none !important;
	}

	/* Section intros the design narrows to a share of the width (64% /
	   70%) for a desktop line length use the full width on a phone, where
	   the share left the heading in a narrow column. Chat bubbles keep
	   theirs. */
	.ch-page main h2[style*="max-width: 70%"],
	.ch-page main div[style*="max-width: 64%"]:has(> h2) {
		max-width: none !important;
	}

	/* The handoff callout (Healthcare, Consumer goods) is a pill on desktop;
	   wrapped to four lines on a phone the pill reads as a blob, so it
	   becomes a rounded card with the icon at the top of the text. */
	.ch-page [style*="padding: 18px 26px; border-radius: 999px"] {
		display: flex !important;
		align-items: flex-start !important;
		gap: 12px !important;
		padding: 16px 18px !important;
		border-radius: 18px !important;
	}

	.ch-page [style*="padding: 18px 26px; border-radius: 999px"] > p {
		font-size: 15px !important;
		line-height: 1.45 !important;
		text-wrap: pretty !important;
	}

	/* Retail's tiles carry one label; a second, smaller line goes. */
	.ch-page .ch-tabpick > button > :nth-child(3):last-child {
		display: none !important;
	}

	/* The calendar panel on a phone: title, intro and bullets, then the
	   experience visual. The "In the conversation" card, the outcome line and
	   the system tags after the bullets are left out (Venu, Nov 8). */
	.ch-page .ch-cal-panelgrid > :first-child > ul ~ * {
		display: none !important;
	}

	/* Healthcare / Utilities use cases: one card at a time behind tabs
	   (site.js), and wrapped status pills get room between their rows. */
	.ch-page .ch-ucpick {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 4px;
		margin-top: 28px;
		padding: 4px;
		border-radius: 14px;
		background: color-mix(in srgb, var(--accent) 5%, var(--card));
		border: 1px solid var(--border);
	}

	.ch-page .ch-ucpick-tab {
		min-height: 44px;
		padding: 8px 10px;
		border-radius: 10px;
		border: 1px solid transparent;
		background: transparent;
		color: var(--text-2);
		font-family: inherit;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: -0.1px;
		cursor: pointer;
		transition: background 150ms, color 150ms;
	}

	.ch-page .ch-ucpick-tab[aria-selected="true"] {
		background: var(--accent);
		color: #fff;
	}

	.ch-page .ch-ucpick-group {
		margin-top: 16px !important;
	}

	.ch-page .ch-ucpick-group > .ch-ucpick-off {
		display: none !important;
	}

	.ch-page .ch-ucpick-group [style*="flex-wrap: wrap"] {
		row-gap: 10px !important;
	}

	/* Retail's scenario switcher wraps into stacked pills of different
	   widths on a phone; it reads as tabs when the pills share one row. */
	.ch-page [role="tablist"][style*="flex-wrap: wrap"] {
		display: grid !important;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 4px !important;
		padding: 4px !important;
		align-self: stretch !important;
	}

	.ch-page [role="tablist"][style*="flex-wrap: wrap"] > [role="tab"] {
		height: auto !important;
		min-height: 44px;
		padding: 8px 10px !important;
		font-size: 14px !important;
		line-height: 1.25;
		white-space: normal;
	}

	.ch-page [role="tablist"][style*="flex-wrap: wrap"] > [role="tab"][style*="background: var(--card)"] {
		background: transparent !important;
		border-color: transparent !important;
	}
}

/* --------------------------------------------------------------------------
   Links and micro-interactions — site-wide. Links and controls ease on hover,
   press settles slightly, per the design system's motion rules.
   -------------------------------------------------------------------------- */

/* Zero specificity, like the design's own `a` / `a:hover` rules: there every
   styled link carries its colour inline, which always wins. Here components
   colour links with a class, which must likewise win in both states. */
:where(a) {
	color: var(--accent);
}

:where(a:hover) {
	color: color-mix(in srgb, var(--accent) 80%, black);
}

a,
button,
[role="button"],
input[type="submit"],
summary {
	transition:
		color 160ms ease,
		background-color 160ms ease,
		border-color 160ms ease,
		box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
		opacity 160ms ease,
		filter 160ms ease;
}

/* Lift on hover, settle on press. Anything with its own hover transform
   overrides this by specificity, as intended. */
a:hover,
button:hover,
[role="button"]:hover,
input[type="submit"]:hover,
label:hover > input[type="checkbox"] {
	transform: translateY(-1px);
}

a:active,
button:active,
[role="button"]:active,
input[type="submit"]:active {
	transform: translateY(0) scale(0.97);
}

button:hover,
[role="button"]:hover,
input[type="submit"]:hover {
	filter: brightness(1.04) saturate(1.03);
}

button:hover,
[role="button"]:hover {
	box-shadow: 0 10px 24px -8px rgba(20, 36, 76, 0.28);
}

/* Trailing arrows / chevrons travel a couple of pixels on hover. */
a svg,
button svg {
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

a:hover [data-arrow],
button:hover [data-arrow] {
	transform: translateX(3px);
}

/* Elements that own their hover treatment opt out of the global lift. */
.ch-nolift:hover,
.ch-nolift:active {
	transform: none;
	filter: none;
	box-shadow: inherit;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	a,
	button,
	[role="button"],
	input[type="submit"],
	summary,
	a svg,
	button svg {
		transition: none;
	}

	a:hover,
	button:hover,
	[role="button"]:hover,
	input[type="submit"]:hover,
	a:active,
	button:active,
	[role="button"]:active,
	input[type="submit"]:active,
	a:hover [data-arrow],
	button:hover [data-arrow] {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

:where(
	a[href],
	button,
	input,
	select,
	textarea,
	summary,
	[tabindex],
	[role="button"],
	[role="tab"],
	[role="menuitem"],
	[role="option"],
	[role="switch"],
	[role="checkbox"],
	[role="radio"]
):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

:focus:not(:focus-visible) {
	outline: none;
}

.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus,
.skip-link:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	z-index: 1000;
	padding: 10px 16px;
	border-radius: var(--radius-control);
	background: var(--accent);
	color: var(--accent-on);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Shared layout helpers used by every pattern
   -------------------------------------------------------------------------- */

.ch-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-inline: 32px;
}

.ch-wrap--narrow {
	max-width: 900px;
}

.ch-wrap--wide {
	max-width: 1440px;
}

.ch-section {
	position: relative;
}

/* Decorative radial glows sit behind content and never intercept pointers. */
.ch-glow {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

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

.ch-kicker {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--accent);
}

/* Gradient-filled display text (hero headline, "HAVE NOT.", etc.). */
.ch-gradient-text {
	background: linear-gradient(100deg, #0b2a6b 0%, var(--accent-bright) 42%, #6e5be8 78%, var(--violet-soft) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.ch-gradient-text--brand {
	background: linear-gradient(100deg, var(--accent-bright), var(--violet));
}

/* No phone override for .ch-wrap: the design keeps its 32px gutters. */