/* ==========================================================================
   Clousys design system

   The visual signature is the connective rail: a continuous vertical line
   running through every sequence on the site. The product's argument is that
   services operations should be connected rather than separate, so the page
   itself shows connection instead of chopping content into identical cards.

   Numbered markers appear only on .cl-rail, which is always a real sequence.
   ========================================================================== */

:root {
	--cl-ink:      #0C1B2A;
	--cl-ink-soft: #16293C;
	--cl-slate:    #33475B;
	--cl-mute:     #5C6F80;
	--cl-rail:     #0F7A8A;
	--cl-rail-dk:  #0A5A66;
	--cl-signal:   #E4A11B;
	--cl-paper:    #F5F7F9;
	--cl-line:     #DDE3E9;
	--cl-white:    #FFFFFF;

	/* Typography inherits whatever the parent theme has licensed rather than
	   loading competing families. Override these two variables to restyle. */
	--cl-font-display: "PolySans", "Poppins", "Helvetica Neue", Arial, sans-serif;
	--cl-font-text:    "Poppins", "Helvetica Neue", Arial, sans-serif;

	--cl-wrap:   1200px;
	--cl-gap:    24px;
	--cl-radius: 4px;
	--cl-sec-y:  clamp(56px, 7vw, 104px);
}

/* --------------------------------------------------------------- Utilities */

.cl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.cl-skip {
	position: absolute; left: -9999px;
	top: 0; z-index: 999;
	background: var(--cl-ink); color: #fff;
	padding: 12px 20px;
}
.cl-skip:focus { left: 0; }

.cl-main :focus-visible,
.cl-header :focus-visible,
.cl-footer :focus-visible,
.cl-assistant :focus-visible {
	outline: 3px solid var(--cl-signal);
	outline-offset: 2px;
}

.cl-wrap {
	width: 100%;
	max-width: var(--cl-wrap);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------------------------------------------------------------- Sections */

.cl-main .cl-sec {
	padding-block: var(--cl-sec-y);
	background: var(--cl-white);
	color: var(--cl-slate);
	font-family: var(--cl-font-text);
}

.cl-main .cl-sec.cl-tone-paper { background: var(--cl-paper); }

.cl-main .cl-sec.cl-tone-ink {
	background: var(--cl-ink);
	color: rgba(255,255,255,.78);
}
.cl-tone-ink .cl-h,
.cl-tone-ink h3 { color: #fff; }
.cl-tone-ink .cl-intro { color: rgba(255,255,255,.72); }

.cl-h {
	font-family: var(--cl-font-display);
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--cl-ink);
	margin: 0 0 16px;
	max-width: 20ch;
}

.cl-intro {
	font-size: 18px;
	line-height: 1.6;
	max-width: 62ch;
	margin: 0 0 40px;
	color: var(--cl-mute);
}

.cl-sec h3 {
	font-family: var(--cl-font-display);
	font-size: 19px;
	line-height: 1.3;
	color: var(--cl-ink);
	margin: 0 0 8px;
}

.cl-sec p { line-height: 1.65; }

/* ------------------------------------------------------------------ Buttons */

.cl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	font-family: var(--cl-font-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--cl-radius);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cl-btn-sm { padding: 10px 18px; font-size: 14px; }

.cl-btn-primary { background: var(--cl-rail); color: #fff; }
.cl-btn-primary:hover { background: var(--cl-rail-dk); color: #fff; }

.cl-btn-ghost { background: transparent; color: var(--cl-ink); border-color: var(--cl-line); }
.cl-btn-ghost:hover { border-color: var(--cl-rail); color: var(--cl-rail); }

.cl-btn-light { background: #fff; color: var(--cl-ink); }
.cl-btn-light:hover { background: var(--cl-paper); color: var(--cl-ink); }

.cl-btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cl-btn-outline:hover { border-color: #fff; }

.cl-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* --------------------------------------------------------------- Breadcrumb */

.cl-crumbs {
	background: var(--cl-paper);
	border-bottom: 1px solid var(--cl-line);
	font-size: 13px;
}
.cl-crumbs ol {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0; padding: 12px 0;
}
.cl-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--cl-line); }
.cl-crumbs a { color: var(--cl-mute); text-decoration: none; }
.cl-crumbs a:hover { color: var(--cl-rail); }
.cl-crumbs [aria-current] { color: var(--cl-ink); }

/* ------------------------------------------------------------------- Header */

.cl-header {
	position: sticky; top: 0; z-index: 200;
	background: rgba(255,255,255,.97);
	border-bottom: 1px solid var(--cl-line);
	font-family: var(--cl-font-text);
}
.cl-header-inner {
	display: flex; align-items: center; gap: 32px;
	min-height: 72px;
}
.cl-logo { text-decoration: none; flex-shrink: 0; }
.cl-logo img { max-height: 36px; width: auto; }
.cl-logo-text {
	font-family: var(--cl-font-display);
	font-size: 22px; font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cl-ink);
}

.cl-nav { display: flex; align-items: center; flex: 1; gap: 24px; }
.cl-nav-list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex: 1; }

.cl-nav-trigger {
	display: flex; align-items: center; gap: 6px;
	background: none; border: 0;
	padding: 24px 12px;
	font: inherit; font-size: 15px; font-weight: 500;
	color: var(--cl-slate); cursor: pointer;
}
.cl-nav-trigger:hover { color: var(--cl-rail); }
.cl-nav-item.is-current .cl-nav-trigger { color: var(--cl-ink); box-shadow: inset 0 -2px 0 var(--cl-rail); }

.cl-caret {
	width: 7px; height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .15s ease;
}
.cl-nav-trigger[aria-expanded="true"] .cl-caret { transform: rotate(-135deg) translateY(-2px); }

.cl-panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff;
	border-bottom: 1px solid var(--cl-line);
	box-shadow: 0 18px 40px -24px rgba(12,27,42,.4);
}
.cl-panel[hidden] { display: none; }
.cl-panel-inner { display: grid; grid-template-columns: 280px 1fr; gap: 48px; padding-block: 36px; }
.cl-panel-lead h2 { font-family: var(--cl-font-display); font-size: 20px; margin: 0 0 8px; }
.cl-panel-lead h2 a { color: var(--cl-ink); text-decoration: none; }
.cl-panel-lead p { font-size: 14px; color: var(--cl-mute); margin: 0; line-height: 1.55; }

.cl-panel-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cl-panel-col h3 {
	font-size: 12px; font-weight: 600;
	color: var(--cl-rail); margin: 0 0 12px;
}
.cl-panel-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cl-panel-col a {
	display: block; padding: 8px 10px; margin-left: -10px;
	border-radius: var(--cl-radius); text-decoration: none;
}
.cl-panel-col a:hover { background: var(--cl-paper); }
.cl-panel-title { display: block; font-size: 14.5px; font-weight: 600; color: var(--cl-ink); }
.cl-panel-desc { display: block; font-size: 12.5px; color: var(--cl-mute); margin-top: 2px; line-height: 1.45; }

.cl-nav-actions { display: flex; gap: 10px; flex-shrink: 0; }

.cl-burger { display: none; background: none; border: 0; padding: 12px; cursor: pointer; }
.cl-burger-bars,
.cl-burger-bars::before,
.cl-burger-bars::after {
	display: block; width: 22px; height: 2px;
	background: var(--cl-ink); position: relative;
}
.cl-burger-bars::before,
.cl-burger-bars::after { content: ""; position: absolute; }
.cl-burger-bars::before { top: -7px; }
.cl-burger-bars::after  { top: 7px; }

/* --------------------------------------------------------------------- Hero */

.cl-main .cl-hero {
	background:
		linear-gradient(180deg, var(--cl-paper) 0%, #fff 100%);
	padding-block: clamp(64px, 8vw, 120px);
	position: relative;
}
/* The rail begins in the hero and implies continuation down the page. */
.cl-main .cl-hero::after {
	content: "";
	position: absolute; left: 50%; bottom: 0;
	width: 1px; height: 48px;
	background: linear-gradient(180deg, transparent, var(--cl-rail));
	transform: translateX(-50%);
}
.cl-hero-inner { max-width: 860px; }

.cl-eyebrow {
	font-size: 14px; font-weight: 600;
	color: var(--cl-rail);
	margin: 0 0 16px;
	padding-left: 16px;
	border-left: 2px solid var(--cl-rail);
}

.cl-hero-h {
	font-family: var(--cl-font-display);
	font-size: clamp(34px, 5.2vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: var(--cl-ink);
	margin: 0 0 20px;
	max-width: 18ch;
}
.cl-hero-sub {
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.6;
	color: var(--cl-mute);
	max-width: 62ch;
	margin: 0;
}

.cl-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 40px 0 0; padding: 0; }
.cl-pills li {
	font-size: 13px;
	padding: 7px 14px;
	border: 1px solid var(--cl-line);
	border-radius: 100px;
	color: var(--cl-slate);
	background: #fff;
}

/* --------------------------------------------------------------------- Grid */

.cl-grid { display: grid; gap: var(--cl-gap); }
.cl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cl-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ------------------------------------------------------------- Problem list */

/* Problems are marked with a signal-coloured edge rather than boxed as cards,
   so the section reads as a list of related failures, not six products. */
.cl-problem { border-left: 2px solid var(--cl-signal); padding-left: 20px; }
.cl-problem p { margin: 0; font-size: 15px; color: var(--cl-mute); }

/* ----------------------------------------------------------------- Approach */

.cl-approach-grid { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.cl-approach-before h3,
.cl-approach-after h3 { font-size: 14px; color: var(--cl-mute); margin-bottom: 16px; }

.cl-stack { list-style: none; margin: 0; padding: 0; }
.cl-stack li {
	position: relative;
	padding: 12px 0 12px 28px;
	font-weight: 600;
	color: var(--cl-ink);
	border-bottom: 1px dashed var(--cl-line);
}
.cl-stack li::before {
	content: ""; position: absolute; left: 6px; top: 50%;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--cl-line); transform: translateY(-50%);
}
.cl-approach-verdict { color: var(--cl-signal); font-weight: 600; margin-top: 16px; }

.cl-approach-after {
	background: var(--cl-ink); color: rgba(255,255,255,.8);
	padding: 40px; border-radius: var(--cl-radius);
}
.cl-approach-after h3 { color: rgba(255,255,255,.6); }
.cl-approach-after p { font-size: 18px; line-height: 1.65; margin: 0; }

/* --------------------------------------------------------------- Rail (flow) */

.cl-rail { list-style: none; margin: 0; padding: 0; position: relative; }
.cl-rail::before {
	content: ""; position: absolute;
	left: 17px; top: 12px; bottom: 12px;
	width: 1px; background: var(--cl-line);
}
.cl-rail-step { position: relative; display: flex; gap: 24px; padding-bottom: 28px; }
.cl-rail-num {
	position: relative; z-index: 1; flex-shrink: 0;
	width: 35px; height: 35px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--cl-rail);
	color: var(--cl-rail);
	font-size: 13px; font-weight: 600;
}
.cl-rail-body { padding-top: 6px; }
.cl-rail-body h3 a { color: var(--cl-ink); text-decoration: none; border-bottom: 1px solid var(--cl-line); }
.cl-rail-body h3 a:hover { border-color: var(--cl-rail); color: var(--cl-rail); }
.cl-rail-body p { margin: 0; font-size: 15px; color: var(--cl-mute); max-width: 68ch; }

/* Trace: a horizontal chain, for margin/revenue traceability sequences. */
.cl-trace { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.cl-trace li { display: flex; align-items: center; }
.cl-trace li span {
	display: block;
	padding: 10px 16px;
	background: var(--cl-paper);
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
	font-size: 14px; font-weight: 600; color: var(--cl-ink);
	white-space: nowrap;
}
.cl-trace li:not(:last-child)::after {
	content: ""; width: 22px; height: 1px;
	background: var(--cl-rail); flex-shrink: 0;
}
.cl-tone-ink .cl-trace li span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }

/* ------------------------------------------------------------- Capabilities */

.cl-cap { border-top: 2px solid var(--cl-ink); padding-top: 20px; }
.cl-cap h3 a { color: var(--cl-ink); text-decoration: none; }
.cl-cap h3 a:hover { color: var(--cl-rail); }
.cl-cap ul { list-style: none; margin: 12px 0 0; padding: 0; }
.cl-cap li {
	font-size: 14.5px; color: var(--cl-mute);
	padding: 6px 0; border-bottom: 1px solid var(--cl-line);
}

/* ------------------------------------------------------------------ AI grid */

.cl-ai-item { padding: 24px; background: var(--cl-paper); border-radius: var(--cl-radius); }
.cl-ai-item p { margin: 0; font-size: 15px; color: var(--cl-mute); }

/* --------------------------------------------------------------- Ecosystem */

.cl-eco-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cl-eco-list li {
	padding: 12px 18px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: var(--cl-radius);
	font-size: 14.5px; color: rgba(255,255,255,.86);
}

/* ------------------------------------------------------- Visibility / roles */

.cl-vis-item { border-left: 2px solid var(--cl-rail); padding-left: 20px; }
.cl-vis-item h3 a { color: var(--cl-ink); text-decoration: none; }
.cl-vis-item h3 a:hover { color: var(--cl-rail); }
.cl-vis-item ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cl-vis-item li { font-size: 14.5px; color: var(--cl-mute); padding: 5px 0; }

.cl-qlist { columns: 2; column-gap: 48px; list-style: none; margin: 0; padding: 0; }
.cl-qlist li {
	break-inside: avoid;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255,255,255,.14);
	font-size: 17px; color: #fff;
}

/* ---------------------------------------------------------------- Outcomes */

.cl-outcomes-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px;
}
.cl-outcomes-list li {
	position: relative;
	padding: 16px 0 16px 30px;
	border-bottom: 1px solid var(--cl-line);
	font-size: 16px; color: var(--cl-ink);
}
.cl-outcomes-list li::before {
	content: ""; position: absolute; left: 0; top: 24px;
	width: 14px; height: 1px; background: var(--cl-rail);
}
.cl-tone-ink .cl-outcomes-list li { color: #fff; border-color: rgba(255,255,255,.14); }

/* ------------------------------------------- Industry / role / related cards */

.cl-ind, .cl-role, .cl-rel, .cl-res {
	display: block; text-decoration: none;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
	transition: border-color .15s ease;
}
.cl-ind:hover, .cl-role:hover, .cl-rel:hover, .cl-res:hover { border-color: var(--cl-rail); }
.cl-ind p, .cl-rel p, .cl-res p { margin: 0; font-size: 14px; color: var(--cl-mute); }

.cl-role-mods { font-size: 13px !important; color: var(--cl-rail) !important; }
.cl-rel-group, .cl-res-type {
	display: block; font-size: 12px; font-weight: 600;
	color: var(--cl-rail); margin-bottom: 8px;
}

.cl-rolefilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.cl-chip {
	background: #fff; border: 1px solid var(--cl-line);
	border-radius: 100px; padding: 8px 16px;
	font: inherit; font-size: 14px; color: var(--cl-slate); cursor: pointer;
}
.cl-chip.is-active { background: var(--cl-ink); border-color: var(--cl-ink); color: #fff; }
.cl-role[hidden] { display: none; }

/* ------------------------------------------------------------------- Table */

.cl-table-scroll { overflow-x: auto; }
.cl-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cl-table th, .cl-table td {
	text-align: left; padding: 16px 18px;
	border-bottom: 1px solid var(--cl-line);
	font-size: 15px;
}
.cl-table thead th {
	background: var(--cl-ink); color: #fff;
	font-size: 13px; font-weight: 600;
}
.cl-table tbody th { font-weight: 600; color: var(--cl-ink); }
.cl-table td { text-align: center; color: var(--cl-mute); }
.cl-table thead th:not(:first-child) { text-align: center; }
.cl-yes { color: var(--cl-rail); font-size: 18px; font-weight: 700; }
.cl-no  { color: var(--cl-line); font-size: 18px; }

/* ------------------------------------------------------------------- Stats */

.cl-statlist {
	display: flex; flex-wrap: wrap; gap: 0;
	list-style: none; margin: 0; padding: 0;
}
.cl-statlist li { padding: 0 40px 0 0; margin-right: 40px; border-right: 1px solid rgba(255,255,255,.16); }
.cl-statlist li:last-child { border-right: 0; }
.cl-stat-v {
	display: block;
	font-family: var(--cl-font-display);
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1; color: #fff;
	letter-spacing: -0.03em;
}
.cl-stat-l { display: block; margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.65); }

/* ---------------------------------------------------------------- Security */

.cl-seclist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; list-style: none; margin: 0; padding: 0; }
.cl-seclist li { padding: 14px 0; border-bottom: 1px solid var(--cl-line); font-size: 15.5px; color: var(--cl-ink); }

/* --------------------------------------------------------------------- FAQ */

.cl-accordion { max-width: 860px; border-top: 1px solid var(--cl-line); }
.cl-acc { border-bottom: 1px solid var(--cl-line); }
.cl-acc summary {
	list-style: none; cursor: pointer;
	padding: 20px 40px 20px 0;
	position: relative;
	font-family: var(--cl-font-display);
	font-size: 17px; color: var(--cl-ink);
}
.cl-acc summary::-webkit-details-marker { display: none; }
.cl-acc summary::after {
	content: ""; position: absolute; right: 6px; top: 27px;
	width: 9px; height: 9px;
	border-right: 1.5px solid var(--cl-rail);
	border-bottom: 1.5px solid var(--cl-rail);
	transform: rotate(45deg);
	transition: transform .15s ease;
}
.cl-acc[open] summary::after { transform: rotate(-135deg); top: 30px; }
.cl-acc-body { padding: 0 60px 22px 0; }
.cl-acc-body p { margin: 0; color: var(--cl-mute); max-width: 72ch; }

/* --------------------------------------------------------------------- CTA */

.cl-cta { text-align: left; }
.cl-cta-h {
	font-family: var(--cl-font-display);
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.12; letter-spacing: -0.02em;
	color: #fff; margin: 0 0 16px; max-width: 22ch;
}
.cl-cta-t { font-size: 18px; color: rgba(255,255,255,.75); max-width: 62ch; margin: 0; }
.cl-cta .cl-btns { margin-top: 32px; }

/* ------------------------------------------------------------------- Prose */

.cl-prose { max-width: 72ch; }
.cl-prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; }
.cl-prose a { color: var(--cl-rail); }

.cl-editor-note {
	margin-top: 24px; padding: 14px 18px;
	background: #FFF8E6; border-left: 3px solid var(--cl-signal);
	font-size: 14px; color: #6B5200;
}

/* ------------------------------------------------------------------- Forms */

.cl-form-wrap { max-width: 780px; }
.cl-form-intro { font-size: 16px; color: var(--cl-mute); margin: 0 0 28px; }
.cl-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cl-field-wide { grid-column: 1 / -1; }

.cl-field label {
	display: block; margin-bottom: 7px;
	font-size: 14px; font-weight: 600; color: var(--cl-ink);
}
.cl-req { color: var(--cl-signal); }

.cl-field input,
.cl-field select,
.cl-field textarea {
	width: 100%;
	padding: 13px 14px;
	font: inherit; font-size: 15px;
	color: var(--cl-ink);
	background: #fff;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
}
.cl-field input:focus,
.cl-field select:focus,
.cl-field textarea:focus { border-color: var(--cl-rail); outline-offset: 1px; }
.cl-field.has-error input,
.cl-field.has-error select,
.cl-field.has-error textarea { border-color: #C0392B; }

.cl-error { display: block; margin-top: 6px; font-size: 13px; color: #C0392B; }

/* The honeypot must be unreachable for people but present for bots, so it is
   moved off-screen rather than display:none, which some bots detect. */
.cl-hp { position: absolute; left: -9999px; top: -9999px; }

.cl-consent { display: flex; gap: 10px; margin-top: 24px; align-items: flex-start; }
.cl-consent input { margin-top: 3px; }
.cl-consent label { font-size: 14px; color: var(--cl-mute); line-height: 1.55; }
.cl-consent a { color: var(--cl-rail); }

.cl-form-actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.cl-form-status { margin: 0; font-size: 14px; }
.cl-form-status.is-error { color: #C0392B; }
.cl-form-status.is-ok { color: var(--cl-rail); }

/* --------------------------------------------------------- ROI calculator */

.cl-roi-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.cl-roi-inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cl-roi-inputs label { color: rgba(255,255,255,.75); }
.cl-roi-inputs input {
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.2);
	color: #fff;
}
.cl-roi-out { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--cl-radius); padding: 28px; }
.cl-roi-figure { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.cl-roi-label { display: block; font-size: 13px; color: rgba(255,255,255,.6); }
.cl-roi-value { display: block; margin-top: 4px; font-family: var(--cl-font-display); font-size: 24px; color: #fff; }
.cl-roi-total .cl-roi-value { color: var(--cl-signal); font-size: 32px; }
.cl-roi-note { font-size: 12.5px; color: rgba(255,255,255,.5); margin: 16px 0 20px; line-height: 1.5; }

/* ------------------------------------------------------------------ Footer */

.cl-footer {
	background: var(--cl-ink);
	color: rgba(255,255,255,.7);
	font-family: var(--cl-font-text);
	padding-block: 72px 32px;
}
.cl-footer-top { display: grid; grid-template-columns: 300px 1fr; gap: 64px; }
.cl-footer-brand .cl-logo-text { color: #fff; }
.cl-footer-cat {
	margin: 14px 0 12px; font-size: 14px; font-weight: 600;
	color: var(--cl-signal);
}
.cl-footer-blurb { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.6); margin: 0; }

.cl-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.cl-footer-col h2 {
	font-size: 13px; font-weight: 600; color: #fff;
	margin: 0 0 14px;
}
.cl-footer-col ul { list-style: none; margin: 0; padding: 0; }
.cl-footer-col li { margin-bottom: 9px; }
.cl-footer-col a { font-size: 14px; color: rgba(255,255,255,.62); text-decoration: none; }
.cl-footer-col a:hover { color: #fff; }

.cl-footer-bottom {
	display: flex; flex-wrap: wrap; gap: 16px 32px;
	justify-content: space-between; align-items: center;
	margin-top: 56px; padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.12);
}
.cl-footer-copy { margin: 0; font-size: 13px; color: rgba(255,255,255,.5); }
.cl-footer-legal { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.cl-footer-legal a { font-size: 13px; color: rgba(255,255,255,.5); text-decoration: none; }
.cl-footer-legal a:hover { color: #fff; }

.cl-sitemap-col h2 { font-size: 15px; color: var(--cl-ink); margin: 0 0 12px; }
.cl-sitemap-col ul { list-style: none; margin: 0 0 32px; padding: 0; }
.cl-sitemap-col li { padding: 5px 0; }
.cl-sitemap-col a { font-size: 14.5px; color: var(--cl-slate); text-decoration: none; }
.cl-sitemap-col a:hover { color: var(--cl-rail); }

/* --------------------------------------------------------------- Assistant */

.cl-assistant { position: fixed; right: 20px; bottom: 20px; z-index: 300; font-family: var(--cl-font-text); }

.cl-assistant-toggle {
	background: var(--cl-ink); color: #fff;
	border: 0; border-radius: 100px;
	padding: 14px 22px;
	font: inherit; font-size: 14.5px; font-weight: 600;
	cursor: pointer;
	box-shadow: 0 10px 30px -10px rgba(12,27,42,.6);
}
.cl-assistant-toggle:hover { background: var(--cl-rail); }

.cl-assistant-panel {
	position: absolute; right: 0; bottom: 0;
	width: min(380px, calc(100vw - 40px));
	height: min(560px, calc(100vh - 100px));
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--cl-line);
	border-radius: 8px;
	box-shadow: 0 24px 60px -20px rgba(12,27,42,.45);
	overflow: hidden;
}
.cl-assistant-panel[hidden] { display: none; }

.cl-assistant-head {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 18px 20px;
	background: var(--cl-ink); color: #fff;
}
.cl-assistant-title { margin: 0; font-weight: 600; font-size: 15px; }
.cl-assistant-sub { margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.45; }
.cl-assistant-close { background: none; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }

.cl-assistant-log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cl-msg { max-width: 88%; font-size: 14.5px; line-height: 1.55; padding: 12px 15px; border-radius: 10px; }
.cl-msg-bot { background: var(--cl-paper); color: var(--cl-slate); align-self: flex-start; }
.cl-msg-user { background: var(--cl-rail); color: #fff; align-self: flex-end; }
.cl-msg a { color: inherit; font-weight: 600; }
.cl-msg-bot a { color: var(--cl-rail); }
.cl-msg-link { display: inline-block; margin-top: 8px; font-weight: 600; }

.cl-assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px 12px; }
.cl-suggest {
	background: #fff; border: 1px solid var(--cl-line); border-radius: 100px;
	padding: 7px 13px; font: inherit; font-size: 12.5px; color: var(--cl-slate); cursor: pointer;
}
.cl-suggest:hover { border-color: var(--cl-rail); color: var(--cl-rail); }

.cl-assistant-form { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--cl-line); }
.cl-assistant-form input {
	flex: 1; padding: 11px 13px;
	font: inherit; font-size: 14px;
	border: 1px solid var(--cl-line); border-radius: var(--cl-radius);
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.cl-panel-inner { grid-template-columns: 1fr; gap: 28px; }
	.cl-panel-cols { grid-template-columns: repeat(2, 1fr); }
	.cl-approach-grid { grid-template-columns: 1fr; gap: 32px; }
	.cl-roi-grid { grid-template-columns: 1fr; }
	.cl-footer-top { grid-template-columns: 1fr; gap: 40px; }
	.cl-footer-cols { grid-template-columns: repeat(2, 1fr); }
	.cl-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.cl-burger { display: block; margin-left: auto; }

	.cl-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--cl-line);
		max-height: calc(100vh - 72px);
		overflow-y: auto;
		padding: 8px 0 24px;
	}
	.cl-nav.is-open { display: flex; }
	.cl-nav-list { flex-direction: column; gap: 0; }
	.cl-nav-trigger { width: 100%; justify-content: space-between; padding: 16px 24px; }
	.cl-panel { position: static; box-shadow: none; border: 0; background: var(--cl-paper); }
	.cl-panel-inner { padding: 20px 0; }
	.cl-panel-cols { grid-template-columns: 1fr; gap: 20px; }
	.cl-nav-actions { padding: 16px 24px 0; }
	.cl-nav-actions .cl-btn { flex: 1; }

	.cl-grid-3, .cl-grid-4 { grid-template-columns: 1fr; }
	.cl-outcomes-list { grid-template-columns: 1fr; }
	.cl-seclist { grid-template-columns: 1fr; }
	.cl-qlist { columns: 1; }
	.cl-form-grid { grid-template-columns: 1fr; }
	.cl-roi-inputs { grid-template-columns: 1fr 1fr; }
	.cl-footer-cols { grid-template-columns: 1fr; }
	.cl-statlist li { padding-right: 24px; margin-right: 24px; }
	.cl-assistant { right: 12px; bottom: 12px; }
	.cl-h, .cl-hero-h { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
	.cl-header, .cl-assistant, .cl-crumbs, .cl-cta { display: none; }
	.cl-main .cl-sec { padding-block: 24px; }
}

/* ------------------------------------------------------------ 404 search */

.cl-404-search { display: flex; gap: 10px; margin-top: 32px; max-width: 460px; }
.cl-404-search input {
	flex: 1; padding: 13px 14px;
	font: inherit; font-size: 15px;
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-radius);
	background: #fff;
}
.cl-404-search input:focus { border-color: var(--cl-rail); }

/* --------------------------------------------------- Resource / blog detail */

.cl-res-meta {
	display: flex; flex-wrap: wrap; gap: 10px;
	margin: 24px 0 0; font-size: 14px; color: var(--cl-mute);
}
.cl-main .cl-res-image { padding-block: 0; }
.cl-res-image img { width: 100%; height: auto; border-radius: var(--cl-radius); }

.cl-prose h2 {
	font-family: var(--cl-font-display);
	font-size: 26px; line-height: 1.25; color: var(--cl-ink);
	margin: 40px 0 14px; letter-spacing: -0.015em;
}
.cl-prose h3 { font-size: 20px; margin: 30px 0 10px; }
.cl-prose ul, .cl-prose ol { margin: 0 0 20px 20px; }
.cl-prose li { margin-bottom: 8px; line-height: 1.65; }
.cl-prose blockquote {
	margin: 28px 0; padding: 4px 0 4px 22px;
	border-left: 2px solid var(--cl-rail);
	font-size: 19px; color: var(--cl-ink);
}
.cl-prose img { max-width: 100%; height: auto; border-radius: var(--cl-radius); }

/* ------------------------------------------------------------ Content gate */

/* The fade signals there is more below rather than ending abruptly, which
   reads as a broken page. */
.cl-main .cl-rich + .cl-gate { padding-top: 0; }
.cl-main .cl-rich:has(+ .cl-gate) .cl-prose {
	-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.cl-gate-inner {
	max-width: 780px;
	border-top: 2px solid var(--cl-rail);
	padding-top: 40px;
}
.cl-gate-note {
	margin-top: 20px; font-size: 13px; color: var(--cl-mute);
}
.cl-gated { display: none; }