/**
 * ConnectX Lab Demo — page template styles.
 *
 * EVERY selector is scoped under `.connectx-lab-demo-page` so nothing here can
 * leak into the rest of the Sacumen site. Mirrors the supplied design
 * (ConnectX Lab Demo Landing Page.html): brand red (#F23520) on cream, dark
 * navy call-out blocks. Uses its own fonts (Sora / Inter / JetBrains Mono,
 * enqueued in inc/connectx-lab-demo.php) instead of the theme's default font.
 *
 * @package Sacumen
 */

.connectx-lab-demo-page {
	/* Brand accent — red (matches the reference design). */
	--cxl-red: #F23520;
	--cxl-red-dark: #C22916;
	--cxl-red-tint: rgba(242, 53, 32, 0.045);
	--cxl-red-border: #F3D9D1;
	--cxl-ink: #141414;
	--cxl-body: #4B5563;
	--cxl-muted: #6B7280;
	--cxl-muted2: #9CA3AF;
	--cxl-cream: #FAF8F5;
	--cxl-cream2: #F5F2EE;
	--cxl-line: #E5E7EB;
	--cxl-line2: #F3F4F6;
	--cxl-navy: #12183A;
	--cxl-navy2: #0F1E2E;
	--cxl-blue: #1B4F9C;
	--cxl-green: #16A34A;
	--cxl-amber: #D97706;
	--cxl-danger: #DC2626;
	--cxl-max: 1200px;      /* centered content width, mirrors page-connectx .cx-wrap */
	--cxl-radius: 8px;

	/* Page-specific font stacks — this page uses its own fonts, not the theme's default. */
	--cxl-font-heading: 'Sora', sans-serif;
	--cxl-font-body: 'Inter', sans-serif;
	--cxl-font-mono: 'JetBrains Mono', monospace;

	background: var(--cxl-cream);
	color: var(--cxl-body);
	font-family: var(--cxl-font-body);
	overflow-x: hidden;
	line-height: 1.5;
}

.connectx-lab-demo-page *,
.connectx-lab-demo-page *::before,
.connectx-lab-demo-page *::after { box-sizing: border-box; }

.connectx-lab-demo-page img { max-width: 100%; height: auto; }

/* Layout helpers -------------------------------------------------------- */
/* Section backgrounds stay full-bleed; content is capped to --cxl-max and
   centred (like page-connectx's .cx-wrap) using auto side padding. */
.connectx-lab-demo-page .cxl-sec {
	padding-top: clamp(40px, 6vw, 74px);
	padding-bottom: clamp(40px, 6vw, 74px);
	padding-left: max(clamp(20px, 5vw, 48px), calc((100% - var(--cxl-max)) / 2));
	padding-right: max(clamp(20px, 5vw, 48px), calc((100% - var(--cxl-max)) / 2));
}
/* Optional explicit container for nested content that needs the same cap. */
.connectx-lab-demo-page .cxl-wrap { width: 100%; max-width: var(--cxl-max); margin-left: auto; margin-right: auto; }
.connectx-lab-demo-page .cxl-split {
	display: flex;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
	flex-wrap: wrap;
}
.connectx-lab-demo-page .cxl-col-txt { flex: 1 1 380px; min-width: 280px; }
.connectx-lab-demo-page .cxl-col-media { flex: 1 1 340px; min-width: 280px; display: flex; justify-content: center; }
/* Accent words + large display numbers use the brand red. */
.connectx-lab-demo-page .cxl-accent,
.connectx-lab-demo-page .cxl-bignum,
.connectx-lab-demo-page .cxl-proof__v,
.connectx-lab-demo-page .cxl-track__v,
.connectx-lab-demo-page .cxl-statmini__v {
	color: var(--cxl-red);
}
/* Smaller accent variant for a long highlighted phrase inside a heading. */
.connectx-lab-demo-page .cxl-accent--sm { font-size: 0.6em; }

/* Section backgrounds */
.connectx-lab-demo-page .cxl-bg-cream2 { background: var(--cxl-cream2); }
.connectx-lab-demo-page .cxl-bg-navy { background: var(--cxl-navy); }

/* Typography ------------------------------------------------------------ */
.connectx-lab-demo-page .cxl-eyebrow {
	font-family: var(--cxl-font-mono);
	font-weight: 700;
	font-size: clamp(12px, 1.4vw, 14px);
	line-height: 1.2;
	letter-spacing: 2px;
	color: var(--cxl-red);
	text-transform: uppercase;
	margin-bottom: clamp(12px, 2vw, 20px);
}
.connectx-lab-demo-page .cxl-h1 {
	font-family: var(--cxl-font-heading);
	font-weight: 800;
	font-size: 56px;
	line-height: 1.12;
	color: var(--cxl-ink);
	margin: 0 0 22px;
	text-wrap: balance;
}
.connectx-lab-demo-page .cxl-h2 {
	font-family: var(--cxl-font-heading);
	font-weight: 700;
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.2;
	color: var(--cxl-ink);
	margin: 0 0 16px;
	text-wrap: balance;
}
.connectx-lab-demo-page .cxl-lead {
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.5;
	color: var(--cxl-body);
	margin: 0 0 24px;
	text-wrap: pretty;
}
.connectx-lab-demo-page .cxl-lead--sm { font-size: 16px; margin: 0; }
.connectx-lab-demo-page .cxl-strong { color: var(--cxl-red); font-weight: 700; }
.connectx-lab-demo-page .cxl-onnavy { color: #fff; }
.connectx-lab-demo-page .cxl-onnavy .cxl-lead,
.connectx-lab-demo-page .cxl-lead--navy { color: #C5CAE0; }

/* Buttons --------------------------------------------------------------- */
.connectx-lab-demo-page .cxl-btn {
	background: var(--cxl-red);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	min-height: 52px;
	padding: 0 32px;
	border: 0;
	border-radius: var(--cxl-radius);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: background .18s ease;
	font-family: inherit;
}
.connectx-lab-demo-page .cxl-btn:hover,
.connectx-lab-demo-page .cxl-btn:focus-visible { background: var(--cxl-red-dark); }
.connectx-lab-demo-page .cxl-btn--block { width: 100%; }
.connectx-lab-demo-page .cxl-btn--wide { width: 100%; max-width: 300px; }

/* Hero ------------------------------------------------------------------ */
/* Light cream background with a soft red radial accent, matching the reference design. */
.connectx-lab-demo-page .cxl-hero {
	background:
		radial-gradient(circle at 92% 0%, rgba(242, 53, 32, 0.07), rgba(250, 248, 245, 0) 45%),
		var(--cxl-cream);
	box-shadow: 0 1px 0 var(--cxl-line);
}
.connectx-lab-demo-page .cxl-hero__grid {
	align-items: center;
	padding-top: clamp(28px, 4vw, 48px);
}
.connectx-lab-demo-page .cxl-hero__copy { flex: 1 1 420px; min-width: 300px; max-width: 640px; }
.connectx-lab-demo-page .cxl-hero__form { flex: 1 1 340px; min-width: 300px; max-width: 460px; }

.connectx-lab-demo-page .cxl-statminis { display: flex; gap: 14px; flex-wrap: wrap; }
.connectx-lab-demo-page .cxl-statmini {
	flex: 1 1 150px;
	background: var(--cxl-red-tint);
	border: 1px solid var(--cxl-red-border);
	border-top: 3px solid var(--cxl-red);
	border-radius: var(--cxl-radius);
	padding: 14px 16px;
}
.connectx-lab-demo-page .cxl-statmini svg { width: 16px; height: 16px; }
.connectx-lab-demo-page .cxl-statmini__v { font-family: var(--cxl-font-heading); font-weight: 800; font-size: 22px; color: var(--cxl-red); margin-top: 6px; }
.connectx-lab-demo-page .cxl-statmini__k { font-size: 12px; color: var(--cxl-muted); margin-top: 4px; }

/* Cards / window chrome -------------------------------------------------- */
.connectx-lab-demo-page .cxl-win {
	width: 100%;
	background: #fff;
	border: 1px solid var(--cxl-line);
	border-radius: var(--cxl-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
	overflow: hidden;
}
.connectx-lab-demo-page .cxl-win--ticket { max-width: 480px; }
.connectx-lab-demo-page .cxl-win--table { flex: 1 1 480px; min-width: 280px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); }
.connectx-lab-demo-page .cxl-win--reg { max-width: 520px; }
.connectx-lab-demo-page .cxl-winbar {
	display: flex;
	gap: 6px;
	padding: 10px 14px;
	background: var(--cxl-line2);
	border-bottom: 1px solid var(--cxl-line);
}
.connectx-lab-demo-page .cxl-winbar--dark {
	background: rgba(255, 255, 255, 0.04);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.connectx-lab-demo-page .cxl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* Window "traffic light" dots (reference design). */
.connectx-lab-demo-page .cxl-dot--r { background: #FF5F56; }
.connectx-lab-demo-page .cxl-dot--y { background: #FFBD2E; }
.connectx-lab-demo-page .cxl-dot--g { background: #27C93F; }

/* Support-ticket card */
.connectx-lab-demo-page .cxl-ticket__strip { height: 6px; background: var(--cxl-danger); }
.connectx-lab-demo-page .cxl-ticket__body { padding: 22px 24px 26px; }
.connectx-lab-demo-page .cxl-ticket__id { font-size: 13px; font-weight: 700; color: #111827; }
.connectx-lab-demo-page .cxl-ticket__line { font-size: 14px; color: #111827; margin-top: 8px; }
.connectx-lab-demo-page .cxl-ticket__meta { font-size: 12px; color: var(--cxl-muted); margin-top: 6px; }
.connectx-lab-demo-page .cxl-ticket__sev {
	font-size: 12px; color: var(--cxl-danger); font-weight: 600; margin-top: 4px;
	display: flex; align-items: center; gap: 6px;
}
.connectx-lab-demo-page .cxl-ticket__sev .cxl-dot { width: 7px; height: 7px; background: var(--cxl-danger); }
.connectx-lab-demo-page .cxl-ticket__quote {
	margin-top: 14px; background: #F9FAFB; border: 1px solid var(--cxl-line);
	border-radius: 6px; padding: 12px 14px; font-size: 13px; color: #374151;
}

/* Code compare card (mocks vs production) */
.connectx-lab-demo-page .cxl-code {
	width: 100%;
	max-width: 520px;
	background: var(--cxl-navy2);
	border-top: 3px solid var(--cxl-blue);
	border-radius: var(--cxl-radius);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}
.connectx-lab-demo-page .cxl-code__cols { display: flex; overflow-x: auto; }
.connectx-lab-demo-page .cxl-code__col {
	flex: 1 1 220px;
	padding: 16px 18px;
	/* Code stays monospace (generic system stack — no font dependency). */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 12px;
	line-height: 1.7;
}
.connectx-lab-demo-page .cxl-code__col--mock { border-right: 1px solid rgba(255, 255, 255, 0.08); color: #8FE3A5; }
.connectx-lab-demo-page .cxl-code__col--prod { color: #D1D5DB; }
.connectx-lab-demo-page .cxl-code__label { color: var(--cxl-muted2); font-size: 11px; margin-bottom: 10px; }
.connectx-lab-demo-page .cxl-code__warn { background: rgba(245, 176, 65, 0.16); border-left: 3px solid #F5B041; padding: 2px 6px; }
.connectx-lab-demo-page .cxl-code__err { background: rgba(255, 107, 107, 0.16); border-left: 3px solid #FF6B6B; padding: 2px 6px; font-weight: 700; }

/* Two lab tracks (dark) ------------------------------------------------- */
.connectx-lab-demo-page .cxl-chip {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(255, 255, 255, 0.08);
	color: #FF6B57;
	font-family: var(--cxl-font-mono);
	font-weight: 700; font-size: 12px;
	letter-spacing: 1.5px; text-transform: uppercase;
	padding: 5px 12px; border-radius: 20px; margin-bottom: 16px;
}
.connectx-lab-demo-page .cxl-tracks { display: flex; gap: clamp(24px, 4vw, 64px); align-items: flex-start; flex-wrap: wrap; }
.connectx-lab-demo-page .cxl-tracks__cards { display: flex; gap: 18px; flex: 0 1 auto; flex-wrap: wrap; align-items: center; }
.connectx-lab-demo-page .cxl-track {
	border: 1px solid var(--cxl-line);
	border-top: 3px solid var(--cxl-blue);
	border-radius: var(--cxl-radius);
	background: #fff;
	padding: 18px 26px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.connectx-lab-demo-page .cxl-track--synthetic { border-top-color: var(--cxl-muted2); }
.connectx-lab-demo-page .cxl-track__v { font-family: var(--cxl-font-heading); font-weight: 800; font-size: clamp(38px, 4.5vw, 48px); color: var(--cxl-red); line-height: 1; white-space: nowrap; margin-top: 8px; }
.connectx-lab-demo-page .cxl-track__k { font-size: 14px; font-weight: 700; margin-top: 8px; letter-spacing: .5px; text-transform: uppercase; color: var(--cxl-blue); }
.connectx-lab-demo-page .cxl-track--synthetic .cxl-track__k { color: var(--cxl-muted); }
.connectx-lab-demo-page .cxl-tracks__plus { font-weight: 800; font-size: 24px; color: var(--cxl-muted2); align-self: center; }

/* Lab environments table */
.connectx-lab-demo-page .cxl-labtable { overflow-x: auto; }
.connectx-lab-demo-page .cxl-labtable__inner { min-width: 480px; font-size: 13px; }
.connectx-lab-demo-page .cxl-labtable__row {
	display: grid;
	grid-template-columns: 2fr 1.1fr 1fr;
	padding: 10px 20px;
	align-items: center;
	border-bottom: 1px solid var(--cxl-line2);
	color: #111827;
}
.connectx-lab-demo-page .cxl-labtable__row--head {
	background: #F9FAFB;
	border-bottom: 1px solid var(--cxl-line);
	color: var(--cxl-muted);
	font-weight: 600; font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
}
.connectx-lab-demo-page .cxl-labtable__row:last-child { border-bottom: 0; }
.connectx-lab-demo-page .cxl-labtable__more { padding: 5px 20px; color: #9CA3AF; font-size: 11px; font-style: italic; }
.connectx-lab-demo-page .cxl-badge { border-radius: 10px; padding: 2px 8px; font-size: 11px; border: 1px solid var(--cxl-blue); color: var(--cxl-blue); }
.connectx-lab-demo-page .cxl-badge--syn { border-color: var(--cxl-muted2); color: var(--cxl-muted); }
.connectx-lab-demo-page .cxl-status--live { color: var(--cxl-green); }
.connectx-lab-demo-page .cxl-status--prov { color: var(--cxl-amber); }

/* 90%+ headline */
.connectx-lab-demo-page .cxl-bignum { font-family: var(--cxl-font-heading); font-weight: 800; font-size: clamp(64px, 10vw, 120px); line-height: 1; color: var(--cxl-red); margin-bottom: 6px; }
.connectx-lab-demo-page .cxl-bignum__prefix { font-weight: 600; font-size: 0.3em; vertical-align: middle; }
.connectx-lab-demo-page .cxl-subhead { font-family: var(--cxl-font-heading); font-weight: 700; font-size: clamp(22px, 3vw, 32px); color: var(--cxl-ink); margin-bottom: 18px; }
.connectx-lab-demo-page .cxl-rule { width: 100px; height: 4px; background: var(--cxl-red); margin-bottom: 18px; }

/* Regression card rows */
.connectx-lab-demo-page .cxl-reg__meta { padding: 14px 22px; border-bottom: 1px solid var(--cxl-line); font-size: 12px; color: var(--cxl-muted); }
.connectx-lab-demo-page .cxl-reg__row {
	padding: 8px 22px; font-size: 13px; color: #111827;
	display: flex; justify-content: space-between; gap: 8px;
	border-bottom: 1px solid var(--cxl-line2);
}
.connectx-lab-demo-page .cxl-reg__row:last-child { border-bottom: 0; }
.connectx-lab-demo-page .cxl-reg__fail { background: #FEF2F2; display: block; }
.connectx-lab-demo-page .cxl-reg__failhead { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.connectx-lab-demo-page .cxl-reg__note { margin-top: 4px; font-size: 12px; color: var(--cxl-muted); }
.connectx-lab-demo-page .cxl-reg__patch { margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.connectx-lab-demo-page .cxl-ok { color: var(--cxl-green); font-weight: 700; }
.connectx-lab-demo-page .cxl-fail { color: var(--cxl-danger); font-weight: 700; }
.connectx-lab-demo-page .cxl-pill-ok { font-size: 11px; font-weight: 700; color: var(--cxl-green); background: #DCFCE7; border-radius: 10px; padding: 2px 8px; }
.connectx-lab-demo-page .cxl-link-red { font-size: 12px; color: var(--cxl-red); font-weight: 600; }

/* Proof + testimonial --------------------------------------------------- */
/* Proof stats — 2×2 grid so the block stays compact and balances the quote
   card beside it (a tall single column left the card floating in whitespace). */
.connectx-lab-demo-page .cxl-proof {
	flex: 1 1 320px;
	min-width: 240px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 40px);
	align-content: center;
}
@media (max-width: 560px) { .connectx-lab-demo-page .cxl-proof { grid-template-columns: 1fr 1fr; gap: 20px; } }
.connectx-lab-demo-page .cxl-proof__v { font-family: var(--cxl-font-heading); font-weight: 800; font-size: clamp(28px, 3.5vw, 42px); color: var(--cxl-red); }
.connectx-lab-demo-page .cxl-proof__k { font-size: 14px; color: var(--cxl-muted); margin-top: 6px; }
.connectx-lab-demo-page .cxl-quote {
	flex: 1 1 420px; min-width: 280px; max-width: 640px;
	background: #fff; border: 1px solid var(--cxl-line); border-left: 3px solid var(--cxl-red);
	border-radius: var(--cxl-radius);
	padding: clamp(28px, 4vw, 36px) clamp(24px, 4vw, 40px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	margin: 0;
}
.connectx-lab-demo-page .cxl-quote__text { font-size: clamp(20px, 2.6vw, 23px); line-height: 1.45; color: var(--cxl-ink); font-weight: 500; margin: 0 0 18px; text-wrap: pretty; }
.connectx-lab-demo-page .cxl-quote__who { display: flex; align-items: center; gap: 12px; margin: 0; }
.connectx-lab-demo-page .cxl-quote__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--cxl-blue); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.connectx-lab-demo-page .cxl-quote__name { font-size: 14px; font-weight: 700; color: var(--cxl-ink); }
.connectx-lab-demo-page .cxl-quote__role { font-size: 13px; color: var(--cxl-muted); }

/* FAQ ------------------------------------------------------------------- */
.connectx-lab-demo-page .cxl-faqs { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
/* Centred FAQ section. Uses stable hooks (heading id, .cxl-faqs, and the button
   that follows it) so it centres from the CSS alone — no dependency on the
   .cxl-faq-sec class. Question/answer text inside each card stays left-aligned. */
.connectx-lab-demo-page #cxl-faq-title { text-align: center; }
.connectx-lab-demo-page .cxl-faqs { margin-left: auto; margin-right: auto; text-align: left; }
.connectx-lab-demo-page .cxl-faqs + .cxl-btn { display: flex; margin-left: auto; margin-right: auto; }
/* Belt-and-braces: if the section carries the modifier class, centre everything. */
.connectx-lab-demo-page .cxl-faq-sec { text-align: center; }
.connectx-lab-demo-page .cxl-faq-sec .cxl-faqs { text-align: left; }
.connectx-lab-demo-page .cxl-faq { background: #fff; border: 1px solid var(--cxl-line); border-radius: var(--cxl-radius); padding: 20px 22px; }
.connectx-lab-demo-page .cxl-faq__q {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	font-weight: 700; font-size: 16px; color: var(--cxl-ink);
	width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: inherit;
}
.connectx-lab-demo-page .cxl-faq__chev { flex: none; transition: transform .2s ease; color: var(--cxl-muted2); }
.connectx-lab-demo-page .cxl-faq[aria-expanded="true"] .cxl-faq__chev,
.connectx-lab-demo-page .cxl-faq.is-open .cxl-faq__chev { transform: rotate(180deg); }
.connectx-lab-demo-page .cxl-faq__a { font-size: 14px; color: var(--cxl-body); margin-top: 10px; line-height: 1.5; display: none; }
.connectx-lab-demo-page .cxl-faq.is-open .cxl-faq__a { display: block; }

/* Bottom CTA (dark) ----------------------------------------------------- */
.connectx-lab-demo-page .cxl-cta {
	background:
		linear-gradient(120deg, rgba(10, 15, 38, 0.92) 0%, rgba(12, 26, 64, 0.80) 100%),
		url('https://sacumen.com/wp-content/uploads/2026/01/deploy_mana_bg.webp') center / cover no-repeat;
}
.connectx-lab-demo-page .cxl-cta__copy { flex: 1 1 380px; min-width: 280px; }
.connectx-lab-demo-page .cxl-cta__divider { width: 64px; height: 4px; background: var(--cxl-red); border-radius: 2px; margin-bottom: 16px; }
.connectx-lab-demo-page .cxl-cta__form { flex: 1 1 340px; min-width: 300px; max-width: 480px; }
/* Bottom CTA form is a simpler white card — Work email + First name only, no title, no Company/connectors fields. */
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box {
	background: #fff;
	border: 1px solid var(--cxl-line);
	border-radius: 8px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	padding: clamp(22px, 3vw, 28px) clamp(22px, 3vw, 32px);
}
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box label,
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box p.cxl-field--company,
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box p.cxl-field--connectors { display: none; }
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box p { margin: 0 0 12px; }
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box input {
	border-color: var(--cxl-line);
	color: var(--cxl-ink);
	background: #fff;
}
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box input::placeholder { color: var(--cxl-muted2); }
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box .wpcf7-submit,
.connectx-lab-demo-page .cxl-cta__form .sacumen-form-box input[type="submit"] {
	background: linear-gradient(90deg, var(--cxl-red), #F97316);
	font-weight: 700;
	font-size: 15px;
	min-height: 48px;
	border-radius: 6px;
	box-shadow: 0 8px 20px rgba(242, 53, 32, 0.35);
	margin-top: 0;
}
.connectx-lab-demo-page .cxl-cta__form .cxl-formcard__note { color: #C5CAE0; text-align: left; margin-top: 16px; }
.connectx-lab-demo-page .cxl-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.connectx-lab-demo-page .cxl-tick {
	display: flex; align-items: center; gap: 6px; font-size: 12px; color: #C5CAE0;
	border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px; padding: 6px 14px;
}
/* Form card + form control styling (native inputs and CF7) --------------- */
/* Dark "Book a demo" card — same look in both the hero and bottom CTA. */
.connectx-lab-demo-page .sacumen-form-box {
	width: 100%;
	background: #141414;
	border: 1px solid #262626;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
	padding: clamp(24px, 3.5vw, 32px);
}
.connectx-lab-demo-page .cxl-formcard__title {
	font-family: var(--cxl-font-heading);
	font-weight: 800;
	font-size: 20px;
	color: #fff;
	margin: 0 0 20px;
}
.connectx-lab-demo-page .cxl-formcard__note { font-size: 12px; color: #6B7280; text-align: center; margin-top: 12px; }

.connectx-lab-demo-page .sacumen-form-box p,
.connectx-lab-demo-page .sacumen-form-box .wpcf7-form-control-wrap { display: block; margin: 0 0 14px; }
.connectx-lab-demo-page .sacumen-form-box label { font-size: 12px; color: #9CA3AF; margin-bottom: 5px; display: block; }
.connectx-lab-demo-page .sacumen-form-box input[type="text"],
.connectx-lab-demo-page .sacumen-form-box input[type="email"],
.connectx-lab-demo-page .sacumen-form-box input[type="tel"],
.connectx-lab-demo-page .sacumen-form-box select,
.connectx-lab-demo-page .sacumen-form-box textarea {
	width: 100%;
	border: 1px solid #333;
	border-radius: 7px;
	min-height: 48px;
	padding: 0 14px;
	font-size: 15px;
	color: #fff;
	outline: none;
	background: #1F1F1F;
	font-family: inherit;
	transition: border-color .15s ease;
}
.connectx-lab-demo-page .sacumen-form-box textarea { padding: 12px 14px; min-height: 96px; }
.connectx-lab-demo-page .sacumen-form-box select {
	color: #D1D5DB;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}
.connectx-lab-demo-page .sacumen-form-box input:focus,
.connectx-lab-demo-page .sacumen-form-box select:focus,
.connectx-lab-demo-page .sacumen-form-box textarea:focus { border-color: var(--cxl-red); }
.connectx-lab-demo-page .sacumen-form-box input::placeholder,
.connectx-lab-demo-page .sacumen-form-box textarea::placeholder { color: #6B7280; }
.connectx-lab-demo-page .sacumen-form-box .iti__selected-dial-code { color: #fff; }

/* Make Contact Form 7 submit look like the design's primary button */
.connectx-lab-demo-page .sacumen-form-box .wpcf7-submit,
.connectx-lab-demo-page .sacumen-form-box input[type="submit"] {
	width: 100%;
	background: var(--cxl-red);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	min-height: 42px;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	margin-top: 4px;
	transition: background .18s ease;
}
.connectx-lab-demo-page .sacumen-form-box .wpcf7-submit:hover,
.connectx-lab-demo-page .sacumen-form-box input[type="submit"]:hover { background: var(--cxl-red-dark); }
.connectx-lab-demo-page .sacumen-form-box .wpcf7-spinner { margin: 8px auto 0; display: block; }

/* Sticky mobile CTA ----------------------------------------------------- */
.connectx-lab-demo-page .cxl-stick {
	display: none;
	position: fixed; left: 0; right: 0; bottom: 0;
	padding: 12px 16px;
	background: #fff;
	border-top: 1px solid var(--cxl-line);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
	z-index: 50;
}
.connectx-lab-demo-page .cxl-stick .cxl-btn { width: 100%; min-height: 50px; }

/* Reveal-on-scroll (progressive; content is visible without JS) ---------- */
.connectx-lab-demo-page .cxl-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.connectx-lab-demo-page .cxl-reveal.is-in { opacity: 1; transform: none; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 900px) {
	.connectx-lab-demo-page .cxl-tracks__cards { width: 100%; }
}
@media (max-width: 768px) {
	.connectx-lab-demo-page .cxl-stick.is-visible { display: block; }
	.connectx-lab-demo-page .cxl-split { gap: 28px; }
	.connectx-lab-demo-page .cxl-quote { border-left-width: 3px; }
	/* Give room for the sticky CTA so it never covers the footer content. */
	.connectx-lab-demo-page { padding-bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) {
	.connectx-lab-demo-page .cxl-reveal { opacity: 1; transform: none; transition: none; }
	.connectx-lab-demo-page .cxl-faq__chev { transition: none; }
}