/* CompareEngine CRM Portal shared design tokens and scoped base */
.cecrm,
.cecrm-portal,
.cecrm-partner,
.cecrm-admin,
.cecrm-widget,
.cecrm-render {
	--cecrm-navy: #071a45;
	--cecrm-navy-2: #0b1f55;
	--cecrm-navy-3: #102d6f;
	--cecrm-blue: #2f63f4;
	--cecrm-blue-2: #1243c7;
	--cecrm-blue-soft: #eef4ff;
	--cecrm-cyan-soft: #ecfbff;
	--cecrm-surface: #ffffff;
	--cecrm-surface-soft: #f6f9fe;
	--cecrm-surface-glass: rgba(255, 255, 255, .78);
	--cecrm-surface-glass-strong: rgba(255, 255, 255, .92);
	--cecrm-border: rgba(210, 221, 238, .92);
	--cecrm-border-strong: #bdcce4;
	--cecrm-text: #17213a;
	--cecrm-muted: #64728a;
	--cecrm-muted-2: #8a96aa;
	--cecrm-success: #168a4b;
	--cecrm-warning: #b85a00;
	--cecrm-danger: #b42318;
	--cecrm-orange: #f97316;
	--cecrm-radius-xs: 8px;
	--cecrm-radius-sm: 11px;
	--cecrm-radius-md: 15px;
	--cecrm-radius-lg: 20px;
	--cecrm-radius-xl: 26px;
	--cecrm-radius-2xl: 32px;
	--cecrm-shadow-xs: 0 4px 12px rgba(15, 35, 70, .045);
	--cecrm-shadow-sm: 0 8px 22px rgba(15, 35, 70, .07);
	--cecrm-shadow-md: 0 16px 40px rgba(15, 35, 70, .10);
	--cecrm-shadow-lg: 0 26px 70px rgba(15, 35, 70, .15);
	--cecrm-shadow-glass: 0 18px 48px rgba(9, 27, 73, .13);
	--cecrm-focus-ring: 0 0 0 4px rgba(47, 99, 244, .18);
	--cecrm-space-1: 4px;
	--cecrm-space-2: 8px;
	--cecrm-space-3: 12px;
	--cecrm-space-4: 16px;
	--cecrm-space-5: 20px;
	--cecrm-space-6: 24px;
	--cecrm-space-7: 32px;
	--cecrm-space-8: 40px;
	--cecrm-space-9: 48px;
	--cecrm-space-10: 64px;
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	color: var(--cecrm-text);
}

.cecrm *,
.cecrm-portal *,
.cecrm-partner *,
.cecrm-admin *,
.cecrm-widget *,
.cecrm-render * {
	box-sizing: border-box;
}

.cecrm-skip-link {
	position: absolute;
	left: -9999px;
	top: 12px;
	z-index: 99999;
	background: #fff;
	color: var(--cecrm-navy);
	padding: 10px 14px;
	border-radius: var(--cecrm-radius-sm);
	box-shadow: var(--cecrm-shadow-md);
}
.cecrm-skip-link:focus { left: 12px; }

.cecrm-visually-hidden,
.cecrm-portal .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}

.cecrm-kicker {
	display: block;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 950;
	font-size: 11px;
	color: var(--cecrm-blue);
	margin: 0 0 6px;
}

.cecrm-svg-icon {
	width: 1.2em;
	height: 1.2em;
	display: block;
	color: currentColor;
}

.cecrm-icon-chip {
	width: 50px;
	height: 50px;
	min-width: 50px;
	border-radius: 17px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cecrm-blue);
	background:
		radial-gradient(circle at 30% 18%, rgba(255,255,255,.95), rgba(255,255,255,.46) 42%, rgba(238,244,255,.78) 100%);
	border: 1px solid rgba(203, 216, 241, .9);
	box-shadow: var(--cecrm-shadow-xs);
	backdrop-filter: blur(12px) saturate(150%);
}
.cecrm-icon-chip svg { width: 24px; height: 24px; }
.cecrm-icon-chip--category { color: var(--cecrm-navy-3); background: linear-gradient(135deg, #f6f9ff, #eaf2ff); }
.cecrm-icon-chip--service { color: var(--cecrm-blue); background: linear-gradient(135deg, #ffffff, #edf5ff); }
.cecrm-icon-chip--admin { color: #fff; background: linear-gradient(135deg, var(--cecrm-navy-2), var(--cecrm-blue)); border-color: rgba(255,255,255,.28); }
.cecrm-icon-chip--muted { color: var(--cecrm-muted); background: #f7f9fc; }

.cecrm-data-pill,
.cecrm-pill,
.cecrm-badge,
.cecrm-status,
.cecrm-rail-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--cecrm-border);
	background: var(--cecrm-blue-soft);
	color: #28438a;
	border-radius: 999px;
	padding: 6px 11px;
	font-size: 11px;
	font-weight: 900;
	line-height: 1.1;
	white-space: nowrap;
}

.cecrm-badge--green,
.cecrm-status--ok,
.cecrm-status--active,
.cecrm-data-pill--green {
	background: #eaf8f0;
	color: var(--cecrm-success);
	border-color: #bfe7cf;
}
.cecrm-badge--orange,
.cecrm-status--warning,
.cecrm-data-pill--orange {
	background: #fff4e8;
	color: var(--cecrm-warning);
	border-color: #ffd6a8;
}
.cecrm-badge--blue,
.cecrm-data-pill--blue {
	background: var(--cecrm-blue-soft);
	color: var(--cecrm-blue);
	border-color: #c8d8ff;
}

.cecrm-button {
	appearance: none;
	border: 1px solid transparent;
	border-radius: 999px;
	min-height: 40px;
	padding: 10px 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
	font-weight: 900;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
	color: var(--cecrm-text);
	white-space: nowrap;
}
.cecrm-button:hover { transform: translateY(-1px); text-decoration: none; }
.cecrm-button:focus-visible,
.cecrm-input:focus-visible,
.cecrm-option-card input:focus-visible + span {
	outline: none;
	box-shadow: var(--cecrm-focus-ring);
}
.cecrm-button--primary {
	background: linear-gradient(135deg, var(--cecrm-blue), var(--cecrm-blue-2));
	color: #fff;
	box-shadow: 0 12px 26px rgba(47, 99, 244, .22);
}
.cecrm-button--secondary,
.cecrm-button--outline,
.cecrm-button--ghost {
	background: rgba(255,255,255,.88);
	border-color: var(--cecrm-border);
	color: var(--cecrm-blue-2);
}
.cecrm-button--light {
	background: #fff;
	color: var(--cecrm-blue);
}
.cecrm-button--small {
	min-height: 34px;
	padding: 8px 12px;
	font-size: 12px;
}
.cecrm-button:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

.cecrm-field {
	display: grid;
	gap: 7px;
	margin: 0 0 16px;
}
.cecrm-label {
	display: block;
	color: var(--cecrm-navy);
	font-weight: 900;
	font-size: 13px;
}
.cecrm-label small,
.cecrm-help {
	display: block;
	color: var(--cecrm-muted);
	font-weight: 600;
	font-size: 12px;
	margin-top: 3px;
}
.cecrm-input,
.cecrm-field input[type="text"],
.cecrm-field input[type="email"],
.cecrm-field input[type="password"],
.cecrm-field select,
.cecrm-field textarea,
.cecrm-form input[type="text"],
.cecrm-form input[type="email"],
.cecrm-form input[type="password"],
.cecrm-form textarea,
.cecrm-quote-form textarea {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--cecrm-border);
	border-radius: 14px;
	background: rgba(255,255,255,.94);
	color: var(--cecrm-text);
	padding: 11px 13px;
	font: inherit;
	box-shadow: var(--cecrm-shadow-xs);
	outline: none;
}
.cecrm-field textarea,
.cecrm-textarea,
.cecrm-quote-form textarea {
	min-height: 108px;
	resize: vertical;
}
.cecrm-input:focus,
.cecrm-field input:focus,
.cecrm-field textarea:focus,
.cecrm-form input:focus,
.cecrm-form textarea:focus,
.cecrm-quote-form textarea:focus {
	border-color: var(--cecrm-blue);
	box-shadow: var(--cecrm-focus-ring);
}

.cecrm-form-message {
	border-radius: 14px;
	padding: 10px 12px;
	margin: 12px 0;
	color: var(--cecrm-muted);
	background: var(--cecrm-surface-soft);
	border: 1px solid var(--cecrm-border);
}
.cecrm-form-message:empty { display: none; }
.cecrm-form-message.is-success {
	background: #eaf8f0;
	color: var(--cecrm-success);
	border-color: #bfe7cf;
}
.cecrm-form-message.is-error {
	background: #fff0ee;
	color: var(--cecrm-danger);
	border-color: #ffc3bd;
}

.cecrm-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--cecrm-muted);
	font-size: 13px;
	font-weight: 700;
}
.cecrm-check-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}
.cecrm-check-list li {
	position: relative;
	padding-left: 22px;
	color: var(--cecrm-muted);
	font-size: 13px;
}
.cecrm-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--cecrm-success);
	font-weight: 950;
}


/* Shared typography and portal navigation */
.cecrm,
.cecrm-portal,
.cecrm-partner,
.cecrm-admin,
.cecrm-widget,
.cecrm-render {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.cecrm h1,
.cecrm-portal h1,
.cecrm-partner h1,
.cecrm-admin h1,
.cecrm-widget h1,
.cecrm-render h1 {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--cecrm-navy);
}

.cecrm h2,
.cecrm-portal h2,
.cecrm-partner h2,
.cecrm-admin h2,
.cecrm-widget h2,
.cecrm-render h2 {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--cecrm-navy);
}

.cecrm h3,
.cecrm-portal h3,
.cecrm-partner h3,
.cecrm-admin h3,
.cecrm-widget h3,
.cecrm-render h3 {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cecrm-navy);
}

.cecrm-portal .cecrm-portal__nav a,
.cecrm-portal .cecrm-iconbar-nav a,
.cecrm-portal .cecrm-iconbar-bottom {
	font-family: "Roboto", Arial, Helvetica, sans-serif;
}

.cecrm-portal .cecrm-portal__nav a {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: -0.005em;
}

.cecrm-portal .cecrm-portal__nav a.is-active {
	font-weight: 650;
}

.cecrm-portal .cecrm-nav-icon {
	width: 30px;
	height: 30px;
	min-width: 30px;
	border-radius: 11px;
}

.cecrm-icon-chip svg {
	width: 28px;
	height: 28px;
}


/* Shared system contract */
.cecrm-portal .cecrm-portal__nav a,
.cecrm-partner .cecrm-portal__nav a,
.cecrm-admin .cecrm-portal__nav a {
	font-weight: 700;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.cecrm-icon-chip--brand {
	background: linear-gradient(135deg, #eef3ff, #ffffff);
	border-color: rgba(197, 211, 238, .95);
	color: #1d4ed8;
}

.cecrm-icon-chip--compare-overview img {
	width: 30px;
	height: 30px;
	display: block;
	object-fit: contain;
}


/* CompareEngine CRM Portal shared design-system token contract
 * Purpose: expose the approved Compare Landing visual language as reusable tokens.
 * These tokens are intentionally generic so future portal screens inherit the same shell,
 * card, rail, typography and state system without duplicating one-off screen CSS.
 */
.cecrm,
.cecrm-portal,
.cecrm-partner,
.cecrm-admin,
.cecrm-widget,
.cecrm-render {
	--cecrm-navy-950: #06142f;
	--cecrm-navy-900: #0b1f46;
	--cecrm-navy-800: #102d6f;
	--cecrm-blue-700: #214bd7;
	--cecrm-blue-600: #2563eb;
	--cecrm-blue-500: #3b82f6;
	--cecrm-surface-white: #ffffff;
	--cecrm-surface-soft-blue: #f6f9ff;
	--cecrm-border-soft: rgba(33, 62, 120, .12);
	--cecrm-text-strong: #10213f;
	--cecrm-text-muted-readable: #5f6f8f;
	--cecrm-radius-card-final: 18px;
	--cecrm-radius-panel-final: 22px;
	--cecrm-shadow-card-final: 0 18px 42px rgba(15, 33, 74, .08);
	--cecrm-shadow-card-hover-final: 0 20px 46px rgba(47, 99, 255, .12);
}

/* Shared brand density contract */
:root {
	--cecrm-font-ui: "Roboto", Arial, Helvetica, sans-serif;
	--cecrm-density-page-title: 20px;
	--cecrm-density-section-title: 18px;
	--cecrm-density-h3-title: 17px;
	--cecrm-density-heading-weight: 500;
	--cecrm-density-card-title: 17px;
	--cecrm-density-body: 14px;
	--cecrm-density-small: 12px;
	--cecrm-density-table: 13px;
	--cecrm-density-button: 13px;
	--cecrm-density-metric: 20px;
	--cecrm-density-radius-card: 14px;
	--cecrm-density-radius-panel: 16px;
	--cecrm-density-radius-control: 10px;
	--cecrm-density-gap-xs: 6px;
	--cecrm-density-gap-sm: 10px;
	--cecrm-density-gap-md: 14px;
	--cecrm-density-gap-lg: 18px;
	--cecrm-density-gap-xl: 24px;
	--cecrm-density-shadow: 0 8px 20px rgba(15, 35, 70, 0.055);
}

/* Roboto shared branding enforcement contract */
:where(
	.cecrm,
	.cecrm-portal,
	.cecrm-partner,
	.cecrm-admin,
	.cecrm-admin-wrap,
	.wrap.cecrm-admin,
	.wrap.cecrm-admin-wrap,
	.cecrm-widget,
	.cecrm-render
) {
	--cecrm-font-family: "Roboto", Arial, Helvetica, sans-serif;
	--cecrm-font-ui: var(--cecrm-font-family);
	font-family: var(--cecrm-font-ui);
}

:where(
	.cecrm,
	.cecrm-portal,
	.cecrm-partner,
	.cecrm-admin,
	.cecrm-admin-wrap,
	.wrap.cecrm-admin,
	.wrap.cecrm-admin-wrap,
	.cecrm-widget,
	.cecrm-render
) :where(
	*,
	button,
	input,
	select,
	textarea,
	optgroup,
	option,
	table,
	th,
	td,
	code
) {
	font-family: inherit;
}