/*
 * Carrier Partner design system (6.2.0)
 *
 * The one source of truth for type, corners, colour and the shared
 * components on every surface: sign-up, sign-in, carrier and driver
 * dashboards, the operations console and the plugin's wp-admin screens.
 *
 * It loads last. The older layers (portal, saas-ux, super-ux, vault, admin)
 * still lay pages out; this file decides how everything looks. Rules that
 * must beat older `!important` declarations say so with `!important` too.
 *
 * Fonts are bundled (assets/fonts, SIL Open Font License): Bricolage
 * Grotesque for headings, Poppins for text. Neither covers Cyrillic or Greek,
 * so Manrope supplies those letters for the Ukrainian, Russian and Greek
 * interfaces; the browser picks it per character.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/poppins-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/poppins-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/poppins-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("../fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("../fonts/manrope-cyrillic-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("../fonts/manrope-greek-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }

/* --------------------------------------------------------------- tokens */

.cpp-app,
.cpp-wp-admin-wrap,
.cpp-share {
	--cpp-font-body: "Poppins", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--cpp-font-display: "Bricolage Grotesque", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--cpp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* One corner language: controls 8px, cards 12px, large surfaces 16px,
	   chips and avatars fully round. Nothing square, nothing bubbly. */
	--cpp-r-control: 8px;
	--cpp-r-card: 12px;
	--cpp-r-surface: 16px;
	--cpp-r-pill: 999px;
	--cpp-radius-xs: 8px;
	--cpp-radius-sm: 8px;
	--cpp-radius: 12px;
	--cpp-radius-lg: 16px;
	--cpp-radius-xl: 16px;

	--cpp-orange: #ec6a3c;
	--cpp-orange-dark: #d4552a;
	--cpp-orange-ink: #b2441f;
	--cpp-orange-soft: #fff1eb;
	/* Filled orange controls carry white text, so they use the deeper orange
	   (4.1:1 with white at button size) rather than the accent orange. */
	--cpp-cta: #d4552a;
	--cpp-cta-hover: #bf4920;
	--cpp-ink: #0f172a;
	--cpp-ink-2: #334155;
	--cpp-muted: #64748b;
	--cpp-line: #e6e8ec;
	--cpp-line-strong: #d3d7de;
	--cpp-surface: #ffffff;
	--cpp-canvas: #f6f7f9;
	--cpp-soft: #f3f4f6;
	--cpp-success: #15803d;
	--cpp-success-bg: #ecfdf3;
	--cpp-warning: #a15c07;
	--cpp-warning-bg: #fffbeb;
	--cpp-danger: #b42318;
	--cpp-danger-bg: #fef3f2;
	--cpp-info: #1d4ed8;
	--cpp-info-bg: #eff6ff;
	--cpp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
	--cpp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.05);
	--cpp-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
	--cpp-focus: 0 0 0 3px rgba(236, 106, 60, 0.28);
	--cpp-control-height: 42px;
}

/* ----------------------------------------------------------- typography */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(input, select, textarea, button, table, td, th, li, p, span, label, a, small, strong, b, dd, dt),
.cpp-wp-admin-wrap,
.cpp-wp-admin-wrap :where(input, select, textarea, button, table, td, th, li, p, span, label, a, small),
.cpp-share {
	font-family: var(--cpp-font-body) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--cpp-ink);
	letter-spacing: 0;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(h1, h2, h3, h4, .cpp-mobile-title, .cppv-price, .cpp-auth-title),
.cpp-wp-admin-wrap :where(h1, h2, h3),
.cpp-share :where(h1, h2, h3),
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(h1, h2, h3, h4) :is(span, strong, b, a, small) {
	font-family: var(--cpp-font-display) !important;
	font-weight: 650 !important;
	letter-spacing: -0.015em !important;
	color: var(--cpp-ink);
	text-wrap: balance;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app h1 { font-size: clamp(26px, 2.2vw, 32px) !important; line-height: 1.15 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app h2 { font-size: clamp(20px, 1.6vw, 24px) !important; line-height: 1.2 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app h3 { font-size: 16px !important; line-height: 1.3 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app h4 { font-size: 14px !important; line-height: 1.35 !important; }

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(code, kbd, samp, pre, .cpp-cell-mono) {
	font-family: var(--cpp-font-mono) !important;
}

/* No shouting. Labels, eyebrows, table headers and badges keep the case
   they were written in, and lose the wide tracking that came with caps. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app *,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app *::before,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app *::after,
.cpp-wp-admin-wrap *,
.cpp-share * {
	text-transform: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-eyebrow, th, .cpp-nav-group-label, .cppv-plan-badge, .cpp-pill, .cpp-status-chip, legend, .cpp-kicker),
.cpp-wp-admin-wrap :where(.cpp-eyebrow, th) {
	letter-spacing: 0 !important;
}

/* The eyebrow is a quiet context label, not a banner: no rule, no caps. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-eyebrow,
.cpp-wp-admin-wrap .cpp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-eyebrow::before,
.cpp-wp-admin-wrap .cpp-eyebrow::before {
	content: none !important;
	display: none !important;
}

/* On dark panels the eyebrow stays legible. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-sidebar, .cpp-command-hero, .cpp-onboarding-aside, .cpp-login-story, .cpp-auth-story) .cpp-eyebrow {
	color: #ffb597 !important;
}

/* ---------------------------------------------------------------- corners */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .cpp-button, button.cpp-button, a.cpp-button, .cpp-icon-button, .cpp-link-button.cpp-button, .cpp-input-suffix, .cpp-chip-button, .cpp-file-field, .cpp-tabbar button, .cppv-tabs button, .cpp-sidebar nav button, .cpp-nav button, .cpp-language-button, .cpp-account-trigger),
.cpp-wp-admin-wrap :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .button, .cpp-button) {
	border-radius: var(--cpp-r-control) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-panel, .cppv-card, .cpp-card, .cpp-settings-panel, .cpp-section, .cpp-callout, .cpp-alert, .cppv-banner, .cpp-table-wrap, .cpp-filter-bar, .cpp-bulk-bar, .cpp-empty-state, .cpp-step, .cpp-status-modal, .cpp-modal, .cpp-modal-dialog, .cppv-modal, .cppv-modal-dialog, .cpp-account-menu, .cpp-language-menu, .cpp-command-hero, .cpp-pillar-grid > *, .cppv-quick-card, .cppv-plan, .cppv-plan-card, .cpp-detail-list, .cpp-task-group, .cppv-upsell, .cppv-export, .cpp-notice-card, .cpp-auth-card, .cpp-login-card, .cpp-onboarding-card, .cpp-pipeline, .cpp-service-form-card, .cpp-settings-warning, .cppv-plan-strip, .cpp-toast, .cppv-summary, .cppv-upload, .cpp-sidebar-help, .cpp-workspace-identity, .cpp-check, .cpp-applicant-proof, .cpp-account-section),
.cpp-wp-admin-wrap :where(.cpp-panel, .cpp-card, .postbox, .notice, .cpp-settings-panel) {
	border-radius: var(--cpp-r-card) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-pill, .cpp-nav-badge, .cppv-plan-badge, .cpp-status-chip, .cppv-flag, .cpp-badge, .cpp-tag),
.cpp-wp-admin-wrap :where(.cpp-pill, .cpp-badge) {
	border-radius: var(--cpp-r-pill) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app input[type="checkbox"] {
	border-radius: 5px !important;
}

/* -------------------------------------------------------------- controls */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
	border: 1px solid var(--cpp-line-strong) !important;
	background-color: #fff !important;
	color: var(--cpp-ink) !important;
	font-size: 14px !important;
	box-shadow: var(--cpp-shadow-xs) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select) {
	min-height: var(--cpp-control-height) !important;
	height: auto;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
	border-color: var(--cpp-orange) !important;
	box-shadow: var(--cpp-focus) !important;
	outline: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(input, textarea)::placeholder {
	color: #9aa3b2 !important;
	opacity: 1;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app select {
	white-space: nowrap !important;
	text-overflow: ellipsis;
}

/* Field labels: one weight, one size, sentence case. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-field > span:first-child,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-field > label,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app label.cpp-field > span:not(.screen-reader-text):first-of-type {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-field-hint, .cppv-fine, .cpp-form-note, small) {
	color: var(--cpp-muted);
}

/* --------------------------------------------------------------- buttons */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-button,
.cpp-wp-admin-wrap .cpp-button {
	min-height: 40px;
	padding: 0 16px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	box-shadow: var(--cpp-shadow-xs);
	gap: 8px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-button.cpp-button--small {
	min-height: 32px;
	padding: 0 12px !important;
	font-size: 13px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-button :where(span, strong, b) {
	text-decoration: none !important;
}

/* Text links read as links; buttons never get underlines. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-link-button, .cpp-text-link) {
	font-weight: 500 !important;
	text-decoration: none !important;
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-link-button, .cpp-text-link):hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* ----------------------------------------------------------------- lists */

/* Lists that draw their own check icon must not also get a bullet or a
   second CSS check: one marker per line. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-features, .cppv-plan-features, .cppv-included, .cpp-check-list) li::before {
	content: none !important;
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-features, .cppv-plan-features, .cppv-included, .cpp-check-list) {
	list-style: none !important;
	padding-left: 0 !important;
}

/* ------------------------------------------------------------- surfaces */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-panel, .cppv-card, .cpp-settings-panel, .cpp-table-wrap, .cpp-step, .cpp-task-group) {
	border-color: var(--cpp-line) !important;
	box-shadow: var(--cpp-shadow-xs) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-table) th {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--cpp-muted) !important;
	background: var(--cpp-canvas) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-pill, .cpp-status-chip, .cpp-nav-badge, .cppv-plan-badge) {
	font-size: 12px !important;
	font-weight: 500 !important;
}

/* ------------------------------------------------------- full-window page */

body.cpp-canvas {
	margin: 0 !important;
	padding: 0 !important;
	background: var(--cpp-canvas, #f6f7f9);
	min-height: 100vh;
}

body.cpp-canvas .cpp-canvas-main {
	margin: 0;
	padding: 0;
	min-height: 100vh;
}

body.cpp-canvas .cpp-canvas-main > :not(.cpp-app):not(script):not(style) {
	max-width: none;
}

body.cpp-canvas .cpp-app.cpp-standalone {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	min-height: 100vh;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ------------------------------------------------------------ app shell */

/* A light, quiet shell: white sidebar, sticky top bar, content on a soft
   canvas. The sidebar used to be charcoal with wide orange blocks; the
   work area now carries the colour, not the frame. */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard {
	grid-template-columns: 256px minmax(0, 1fr);
	background: var(--cpp-canvas) !important;
}

@media (max-width: 1100px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard {
		grid-template-columns: 232px minmax(0, 1fr);
	}
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar {
	gap: 4px;
	padding: 20px 14px 16px !important;
	border-right: 1px solid var(--cpp-line);
	background: #fff !important;
	color: var(--cpp-ink-2) !important;
	box-shadow: none !important;
}

@media (min-width: 761px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar {
		position: sticky !important;
		top: 0;
		height: 100vh;
		min-height: 0 !important;
		overflow-y: auto;
		scrollbar-width: thin;
	}
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-workspace-identity {
	margin: 0 0 8px !important;
	padding: 6px 10px 14px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cpp-line) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-workspace-identity .cpp-eyebrow {
	margin: 0 0 2px !important;
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-workspace-identity strong {
	display: block;
	overflow: hidden;
	font-family: var(--cpp-font-display) !important;
	font-size: 16px !important;
	font-weight: 650 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.01em !important;
	color: var(--cpp-ink) !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-workspace-identity small {
	display: block;
	margin-top: 2px;
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-progress {
	margin: 0 0 8px !important;
	padding: 12px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: var(--cpp-canvas) !important;
	color: var(--cpp-ink-2) !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-progress > div:first-child {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-progress :is(span, b) {
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-progress b {
	font-weight: 600 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-progress small {
	display: block;
	margin-top: 6px;
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-meter {
	height: 6px !important;
	margin-top: 8px;
	overflow: hidden;
	border: 0 !important;
	border-radius: var(--cpp-r-pill) !important;
	background: #e9ebef !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-meter > i {
	border-radius: inherit !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar .cpp-nav-group {
	display: grid;
	gap: 2px;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar .cpp-nav-group-label {
	margin: 6px 0 4px !important;
	padding: 0 10px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #94a3b8 !important;
	opacity: 1 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav button {
	position: relative;
	display: flex !important;
	width: 100%;
	min-height: 38px !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 8px 10px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--cpp-ink-2) !important;
	box-shadow: none !important;
	text-align: left;
	transition: background-color 0.12s ease, color 0.12s ease;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav button::before,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav button::after {
	content: none !important;
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav button:hover {
	background: var(--cpp-soft) !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav button:is(.is-active, [aria-current="page"]) {
	background: var(--cpp-orange-soft) !important;
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav button .cpp-nav-icon {
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px;
	margin: 0 !important;
	color: #8a94a6;
	opacity: 1 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav button:is(.is-active, [aria-current="page"]) .cpp-nav-icon {
	color: var(--cpp-orange) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav .cpp-nav-label {
	display: block;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: inherit !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The one-line descriptions under each menu item made the menu twice as
   tall; they now show as the item's tooltip instead. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar nav .cpp-nav-label small {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar .cpp-nav-badge {
	position: static !important;
	display: inline-flex;
	min-width: 20px;
	height: 20px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 auto !important;
	padding: 0 6px !important;
	border: 0 !important;
	background: #eef0f3 !important;
	color: var(--cpp-ink-2) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar .cpp-nav-badge--danger {
	background: var(--cpp-danger-bg) !important;
	color: var(--cpp-danger) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar .cpp-nav-badge--warning {
	background: var(--cpp-warning-bg) !important;
	color: var(--cpp-warning) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help {
	display: grid;
	gap: 4px;
	margin: auto 0 0 !important;
	padding: 12px 0 0 !important;
	border: 0 !important;
	border-top: 1px solid var(--cpp-line) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help :is(.cpp-sidebar-help-action, .cpp-sidebar-help-support) {
	display: flex !important;
	width: 100%;
	min-height: 38px;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 8px 10px !important;
	border: 0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: transparent !important;
	color: var(--cpp-ink-2) !important;
	box-shadow: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: left;
	text-decoration: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help :is(.cpp-sidebar-help-action, .cpp-sidebar-help-support):hover {
	background: var(--cpp-soft) !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help-action > span[aria-hidden] {
	display: inline-grid;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	place-items: center;
	border: 1.5px solid #8a94a6 !important;
	border-radius: var(--cpp-r-pill) !important;
	background: none !important;
	color: #8a94a6 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help-action > span:not([aria-hidden]) strong {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: inherit !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help-action > span:not([aria-hidden]) small {
	display: none !important;
}

/* Top bar: one line, translucent, the page title in the display face. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-dashboard-topbar {
	min-height: 64px !important;
	padding-block: 10px !important;
	border-bottom: 1px solid var(--cpp-line) !important;
	background: rgba(255, 255, 255, 0.88) !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-topbar-context .cpp-eyebrow {
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-topbar-context strong {
	display: block;
	font-family: var(--cpp-font-display) !important;
	font-size: 18px !important;
	font-weight: 650 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-account-menu {
	display: flex;
	align-items: center;
	gap: 8px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-account-trigger {
	display: grid !important;
	min-height: 40px;
	align-content: center;
	padding: 2px 10px !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	text-align: right;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-account-trigger:hover {
	background: var(--cpp-soft) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-account-trigger small {
	font-size: 11px !important;
	line-height: 1.2 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-account-trigger span {
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-button--ghost {
	border: 1px solid var(--cpp-line-strong) !important;
	background: #fff !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-button--ghost:hover {
	background: var(--cpp-soft) !important;
}

/* Work area: a comfortable measure and even rhythm between blocks. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-dashboard-main {
	--cpp-main-inset: 32px;
	--cpp-main-measure: 1240px;
	min-width: 0;
	background: var(--cpp-canvas) !important;
}

/* Overview hero: a light card with a soft accent instead of a dark slab. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero {
	position: relative;
	overflow: hidden;
	padding: 28px 32px !important;
	border: 1px solid var(--cpp-line) !important;
	background:
		radial-gradient(600px 220px at 100% 0%, rgba(236, 106, 60, 0.10), transparent 70%),
		linear-gradient(180deg, #fff, #fff) !important;
	color: var(--cpp-ink) !important;
	box-shadow: var(--cpp-shadow-xs) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero::before,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero::after {
	content: none !important;
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero .cpp-eyebrow {
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero h1 {
	margin: 0 0 8px !important;
	font-size: clamp(26px, 2.4vw, 34px) !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero p:not(.cpp-eyebrow) {
	max-width: 560px;
	margin: 0 0 20px !important;
	font-size: 15px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero .cpp-button--outline {
	border: 1px solid var(--cpp-line-strong) !important;
	background: #fff !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero > aside {
	padding: 18px 20px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: rgba(255, 255, 255, 0.85) !important;
	color: var(--cpp-ink) !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero > aside small {
	display: block;
	margin-bottom: 8px;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero > aside dl > div {
	border-color: var(--cpp-line) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero > aside :is(dt, dd) {
	font-size: 13px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero > aside dd {
	font-weight: 500 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero {
	display: grid !important;
	grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr) !important;
	align-items: center;
	gap: 32px !important;
}

@media (max-width: 1100px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-command-hero {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 20px !important;
	}
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness-head strong {
	font-family: var(--cpp-font-display) !important;
	font-size: 17px !important;
	font-weight: 650 !important;
	line-height: 1.3 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness-head .cpp-chip {
	flex: 0 0 auto;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-readiness-legend {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 8px !important;
	margin-top: 14px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-legend-item {
	display: grid !important;
	gap: 0 !important;
	min-height: 0 !important;
	padding: 8px 10px !important;
	border: 1px solid var(--cpp-line) !important;
	border-left-width: 1px !important;
	border-radius: var(--cpp-r-control) !important;
	background: #fff !important;
	box-shadow: none !important;
	text-align: left;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-legend-item:hover {
	border-color: var(--cpp-line-strong) !important;
	background: var(--cpp-canvas) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-legend-item b {
	font-family: var(--cpp-font-display) !important;
	font-size: 18px !important;
	font-weight: 650 !important;
	line-height: 1.2 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-legend-item span {
	overflow: hidden;
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-legend-item--valid b { color: var(--cpp-success) !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-legend-item--expiring b { color: var(--cpp-warning) !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-legend-item:is(.cpp-legend-item--expired, .cpp-legend-item--missing) b { color: var(--cpp-danger) !important; }

/* Setup checklist: finished steps shrink to one quiet line. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup {
	padding: 24px 28px !important;
	border: 1px solid var(--cpp-line) !important;
	border-left-width: 1px !important;
	background: #fff !important;
	box-shadow: var(--cpp-shadow-xs) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup::before {
	content: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-score {
	padding: 8px 14px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: var(--cpp-canvas) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-score span {
	font-size: 12px !important;
	letter-spacing: 0 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-score b {
	font-family: var(--cpp-font-display) !important;
	font-weight: 650 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-step {
	padding-block: 12px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-step.is-done {
	padding-block: 8px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-step.is-done strong {
	font-weight: 500 !important;
	color: var(--cpp-muted) !important;
	text-decoration: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-step.is-done p,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-step.is-done .cpp-button {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-setup-step :is(.cpp-step-check, .cpp-step-number) {
	width: 24px !important;
	height: 24px !important;
	font-size: 12px !important;
}

/* ------------------------------------------------------------- sign-up */

/* A light, two-column sign-up: a short brand panel on the left, the form on
   the right with a slim stepper on top. The panel steps aside for plans and
   checkout so the plan cards get the full width. */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application {
	background: var(--cpp-canvas) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-app-header {
	min-height: 64px !important;
	padding: 10px 28px !important;
	border-bottom: 1px solid var(--cpp-line) !important;
	background: #fff !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-application-brand-copy strong {
	font-family: var(--cpp-font-display) !important;
	font-size: 15px !important;
	font-weight: 650 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-application-brand-copy small {
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-header-help {
	padding: 8px 12px !important;
	border: 0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: transparent !important;
	color: var(--cpp-ink-2) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-header-help:hover {
	background: var(--cpp-soft) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-secure-label {
	padding: 6px 10px !important;
	border: 1px solid #cdebd8 !important;
	border-radius: var(--cpp-r-pill) !important;
	background: var(--cpp-success-bg) !important;
	color: var(--cpp-success) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-layout {
	display: grid !important;
	grid-template-columns: 360px minmax(0, 1fr) !important;
	min-height: calc(100vh - 64px);
	background: var(--cpp-canvas) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application.cpp-application--wide .cpp-onboarding-layout {
	grid-template-columns: minmax(0, 1fr) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application.cpp-application--wide .cpp-onboarding-aside {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-aside {
	position: relative;
	display: flex !important;
	flex-direction: column;
	gap: 24px;
	padding: 48px 36px !important;
	border-right: 1px solid var(--cpp-line);
	background:
		radial-gradient(420px 320px at 0% 0%, rgba(236, 106, 60, 0.12), transparent 70%),
		#fff !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-aside::before,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-aside::after {
	content: none !important;
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-intro {
	position: sticky;
	top: 40px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-aside .cpp-eyebrow {
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-aside h1 {
	margin: 0 0 14px !important;
	font-size: 30px !important;
	line-height: 1.15 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-aside p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: var(--cpp-muted) !important;
}

/* The stage list repeated the stepper; the stepper above the form wins. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-step-list {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-reassure {
	margin-top: auto !important;
	padding: 14px 16px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: var(--cpp-canvas) !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-reassure p {
	font-size: 13px !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-reassure strong {
	font-weight: 600 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-main {
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	padding: 32px 32px 64px !important;
	background: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application.cpp-application--wide .cpp-onboarding-main {
	max-width: 1180px;
}

/* Slim stepper: five dots and labels on one line, no extra card. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-progress-shell {
	margin: 0 0 20px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application :is(.cpp-pipeline-head, .cpp-pipeline-meter, .cpp-pipeline-help, .cpp-pipeline-text small) {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-stages {
	position: relative;
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-rail {
	top: 13px !important;
	left: 10% !important;
	right: 10% !important;
	height: 2px !important;
	background: var(--cpp-line) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-rail-fill {
	height: 2px !important;
	background: var(--cpp-orange) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-stage {
	position: relative;
	z-index: 1;
	display: flex !important;
	min-height: 0 !important;
	flex-direction: column;
	align-items: center;
	gap: 6px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-dot {
	display: inline-grid !important;
	width: 28px !important;
	height: 28px !important;
	place-items: center;
	border: 1.5px solid var(--cpp-line-strong) !important;
	border-radius: var(--cpp-r-pill) !important;
	background: #fff !important;
	color: var(--cpp-muted) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	box-shadow: 0 0 0 4px var(--cpp-canvas) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-stage.is-done .cpp-pipeline-dot {
	border-color: var(--cpp-cta) !important;
	background: var(--cpp-cta) !important;
	color: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-stage.is-current .cpp-pipeline-dot {
	border-color: var(--cpp-orange) !important;
	background: #fff !important;
	color: var(--cpp-orange-ink) !important;
	box-shadow: 0 0 0 4px var(--cpp-canvas), 0 0 0 6px rgba(236, 106, 60, 0.18) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-text strong {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-stage:is(.is-current, .is-done) .cpp-pipeline-text strong {
	color: var(--cpp-ink) !important;
}

/* The form card. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-card {
	padding: 32px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-surface) !important;
	background: #fff !important;
	box-shadow: var(--cpp-shadow-sm) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-step-icon {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-step-header {
	display: block !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
	border: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-step-header h1 {
	margin: 0 0 6px !important;
	font-size: clamp(24px, 2.2vw, 28px) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-step-header p:not(.cpp-eyebrow) {
	margin: 0 !important;
	font-size: 15px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-step {
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	background: none !important;
}

/* Body copy stays regular weight; only names and headings are heavy. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application :is(p, li, small, label > span:not(:first-child), .cpp-form-note, .cpp-field-hint) {
	font-weight: 400 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application :is(strong, b) {
	font-weight: 600 !important;
}

@media (max-width: 1000px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-layout {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-aside {
		display: none !important;
	}
}

@media (max-width: 640px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-main {
		padding: 20px 16px 48px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-card {
		padding: 20px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-pipeline-text strong {
		font-size: 11px !important;
	}
}

/* Choice cards (who is applying, how to search): icon, text, tick in a row. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option {
	position: relative;
	display: grid !important;
	grid-template-columns: 40px minmax(0, 1fr) 20px !important;
	align-items: start;
	gap: 14px !important;
	padding: 16px 18px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: #fff !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option:hover {
	border-color: var(--cpp-line-strong) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option:has(input:checked) {
	border-color: var(--cpp-orange) !important;
	background: #fffaf7 !important;
	box-shadow: 0 0 0 3px rgba(236, 106, 60, 0.14) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option > input {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-mark {
	display: inline-grid !important;
	width: 40px !important;
	height: 40px !important;
	margin: 0 !important;
	place-items: center;
	border: 0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: var(--cpp-orange-soft) !important;
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-mark svg {
	width: 20px;
	height: 20px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-copy {
	display: grid;
	gap: 2px;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-copy strong {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-copy small {
	font-size: 13px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-applicant-points {
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-applicant-points li {
	position: relative;
	margin: 2px 0 !important;
	padding-left: 16px !important;
	font-size: 13px !important;
	color: var(--cpp-ink-2) !important;
	list-style: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-applicant-points li::marker {
	content: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-applicant-points li::before {
	content: "" !important;
	position: absolute;
	top: 0.62em;
	left: 2px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #b8c0cc;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-tick {
	position: static !important;
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	border: 1.5px solid var(--cpp-line-strong) !important;
	border-radius: 50% !important;
	background: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-tick::before,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-tick::after {
	content: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option:has(input:checked) .cpp-identifier-tick {
	border: 6px solid var(--cpp-orange) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option > .cpp-identifier-mark { grid-column: 1 !important; grid-row: 1 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option > .cpp-identifier-copy { grid-column: 2 !important; grid-row: 1 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option > .cpp-identifier-tick { grid-column: 3 !important; grid-row: 1 !important; }

/* Narrow three-up search choices stack the icon above the text. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option:not(.cpp-applicant-option) {
	grid-template-columns: minmax(0, 1fr) 20px !important;
	gap: 10px !important;
}
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option:not(.cpp-applicant-option) > .cpp-identifier-copy { grid-column: 1 / -1 !important; grid-row: 2 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option:not(.cpp-applicant-option) > .cpp-identifier-tick { grid-column: 2 !important; }

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(input, textarea)::placeholder {
	font-weight: 400 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-identifier-option:has(input:focus-visible) {
	outline: 2px solid var(--cpp-orange) !important;
	outline-offset: 2px;
}

/* FMCSA match: one tidy card, facts in an even grid. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-confirm {
	margin: 0 0 24px !important;
	padding: 0 !important;
	overflow: hidden;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: #fff !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-confirm__head {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin: 0 !important;
	padding: 16px 20px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cpp-line) !important;
	background: var(--cpp-canvas) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-confirm__head h2 {
	margin: 2px 0 0 !important;
	font-size: 18px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-match-label {
	font-family: var(--cpp-font-body) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-confirm__facts {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 14px 20px !important;
	margin: 0 !important;
	padding: 16px 20px !important;
	border: 0 !important;
	background: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-confirm__facts > div {
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-confirm__facts dt {
	margin: 0 0 2px !important;
	font-family: var(--cpp-font-body) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-confirm__facts dd {
	margin: 0 !important;
	font-family: var(--cpp-font-body) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-confirm__note {
	margin: 0 !important;
	padding: 12px 20px !important;
	border-top: 1px solid var(--cpp-line) !important;
	font-size: 13px !important;
	color: var(--cpp-muted) !important;
}

/* A form inside the step card does not draw a second card. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-onboarding-card .cpp-service-form-card {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(select, option) {
	font-weight: 400 !important;
}

/* File pickers: the native button follows the design. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app input[type="file"] {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 8px 14px;
	border: 1px solid var(--cpp-line-strong);
	border-radius: var(--cpp-r-control);
	background: #fff;
	color: var(--cpp-ink);
	font: 500 13px var(--cpp-font-body);
	cursor: pointer;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app input[type="file"]::file-selector-button:hover {
	background: var(--cpp-soft);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app fieldset {
	border-radius: var(--cpp-r-card) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app legend {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--cpp-ink) !important;
}

/* ------------------------------------------------------------- pricing */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-grid { gap: 16px !important; align-items: stretch; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-grid--1 { grid-template-columns: minmax(0, 420px) !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

@media (max-width: 900px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-plan-grid--3, .cppv-plan-grid--4) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 620px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan {
	padding: 24px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-surface) !important;
	background: #fff !important;
	box-shadow: var(--cpp-shadow-xs) !important;
	transform: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan:hover {
	border-color: var(--cpp-line-strong) !important;
	box-shadow: var(--cpp-shadow-sm) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan.is-selected {
	border-color: var(--cpp-orange) !important;
	box-shadow: 0 0 0 3px rgba(236, 106, 60, 0.16), var(--cpp-shadow-sm) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan h3 {
	margin: 0 0 4px !important;
	font-size: 18px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-desc {
	min-height: 0 !important;
	margin: 0 0 16px !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-price {
	display: flex !important;
	align-items: baseline;
	gap: 4px;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-price b,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-price b * {
	font-family: var(--cpp-font-display) !important;
	font-size: 36px !important;
	font-weight: 650 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-price > span {
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-price-note {
	display: block;
	margin: 2px 0 0 !important;
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan .cppv-features {
	display: grid;
	gap: 8px;
	margin: 20px 0 24px !important;
	padding: 20px 0 0 !important;
	border-top: 1px solid var(--cpp-line) !important;
	flex: 1 1 auto;
}

/* What a plan leaves out is told by the plan above it ("Everything in
   Starter"); crossed-out lines doubled the card height and read as noise. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan .cppv-features li.is-excluded {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-features li {
	display: grid !important;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-features li > svg {
	width: 16px !important;
	height: 16px !important;
	margin-top: 2px;
	color: var(--cpp-success) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-badge {
	position: absolute !important;
	top: -11px !important;
	left: 20px !important;
	padding: 3px 10px !important;
	border: 0 !important;
	background: var(--cpp-orange) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan:not(.is-featured) .cppv-plan-badge {
	background: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan-actions .cpp-button {
	width: 100%;
	justify-content: center;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan--sales {
	background: linear-gradient(135deg, #fff, var(--cpp-canvas)) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan--sales .cppv-features {
	border-top: 0 !important;
	padding-top: 0 !important;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-price--custom b,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-price--custom b * {
	font-size: 26px !important;
}

/* Yearly / monthly switch: a segmented control. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-picker-head {
	display: flex;
	justify-content: center;
	margin: 0 0 28px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-interval {
	display: inline-flex !important;
	gap: 4px;
	padding: 4px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: var(--cpp-soft) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-interval button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: transparent !important;
	color: var(--cpp-muted) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-interval button.is-active {
	background: #fff !important;
	color: var(--cpp-ink) !important;
	box-shadow: var(--cpp-shadow-xs) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-save {
	padding: 2px 8px !important;
	border-radius: var(--cpp-r-pill) !important;
	background: var(--cpp-success-bg) !important;
	color: var(--cpp-success) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
}

/* Drivers and the order summary sit side by side under the plans. */
@media (min-width: 900px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-picker-foot {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
		align-items: start;
		gap: 16px;
		margin-top: 16px;
	}
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-drivers, .cppv-summary) {
	padding: 20px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: #fff !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-drivers {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-drivers strong {
	display: block;
	font-size: 14px !important;
	font-weight: 600 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-drivers small {
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-stepper {
	display: inline-flex !important;
	overflow: hidden;
	border: 1px solid var(--cpp-line-strong) !important;
	border-radius: var(--cpp-r-control) !important;
	background: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-stepper button {
	width: 36px;
	min-height: 36px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: var(--cpp-ink-2) !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-stepper button:hover:not(:disabled) {
	background: var(--cpp-soft) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-stepper input {
	width: 52px !important;
	min-height: 36px !important;
	border: 0 !important;
	border-inline: 1px solid var(--cpp-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: center;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-summary h3,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-summary > strong:first-child {
	font-size: 15px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-promo summary {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--cpp-orange-ink) !important;
	cursor: pointer;
}

/* ------------------------------------------------- preview (in review) */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-nav {
	display: grid;
	gap: 2px;
	margin-top: 4px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-nav button {
	display: flex !important;
	width: 100%;
	min-height: 38px;
	align-items: center;
	gap: 10px;
	padding: 8px 10px !important;
	border: 0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: transparent !important;
	color: #a3acb9 !important;
	box-shadow: none !important;
	cursor: default;
	opacity: 1 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-nav button.is-active {
	background: var(--cpp-orange-soft) !important;
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-nav .cpp-nav-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-nav .cpp-nav-label {
	flex: 1 1 auto;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: inherit !important;
	text-align: left;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-lock {
	width: 14px;
	height: 14px;
	color: #c3c9d2;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-body {
	display: grid;
	gap: 20px;
	width: 100%;
	max-width: var(--cpp-main-measure, 1240px);
	margin: 0 auto;
	padding: 28px 0 48px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-status {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
	gap: 32px;
	align-items: center;
	padding: 28px 32px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-surface);
	background:
		radial-gradient(520px 220px at 100% 0%, rgba(236, 106, 60, 0.10), transparent 70%),
		#fff;
	box-shadow: var(--cpp-shadow-xs);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-status h1 {
	margin: 0 0 8px !important;
	font-size: clamp(24px, 2.2vw, 30px) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-status-main > p:not(.cpp-eyebrow) {
	max-width: 620px;
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--cpp-muted);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-eta {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: var(--cpp-r-pill);
	background: var(--cpp-info-bg);
	color: var(--cpp-info) !important;
	font-size: 13px !important;
	font-weight: 500;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-eta svg {
	width: 16px;
	height: 16px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-actions:empty {
	display: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-steps {
	position: relative;
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-steps::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 11px;
	width: 2px;
	background: var(--cpp-line);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-steps li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--cpp-muted);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-steps li::before {
	content: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-steps li > span:last-child {
	display: grid;
	padding-top: 2px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-steps small {
	font-size: 12px !important;
	font-weight: 400;
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-dot {
	position: relative;
	z-index: 1;
	display: inline-grid;
	width: 24px;
	height: 24px;
	flex: 0 0 24px;
	place-items: center;
	border: 2px solid var(--cpp-line-strong);
	border-radius: 50%;
	background: #fff;
	color: #fff;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-dot svg {
	width: 14px;
	height: 14px;
	stroke-width: 2.4;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .is-done {
	color: var(--cpp-ink);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .is-done .cpp-preview-dot {
	border-color: var(--cpp-success);
	background: var(--cpp-success);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .is-current {
	color: var(--cpp-ink);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .is-current .cpp-preview-dot {
	border-color: var(--cpp-orange);
	box-shadow: 0 0 0 4px rgba(236, 106, 60, 0.16);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .is-current .cpp-preview-dot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cpp-orange);
	animation: cpp-preview-pulse 1.6s ease-in-out infinite;
}

@keyframes cpp-preview-pulse {
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	html body .cpp-app.cpp-preview .is-current .cpp-preview-dot::after { animation: none; }
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-card);
	background: var(--cpp-line);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-facts > div {
	padding: 14px 18px;
	background: #fff;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-facts dt {
	margin: 0 0 2px;
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-facts dd {
	margin: 0;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 20px;
	align-items: start;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-locked {
	position: relative;
	min-height: 360px;
	overflow: hidden;
	border-radius: var(--cpp-r-surface);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-ghost {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	opacity: 0.85;
	filter: grayscale(1);
	pointer-events: none;
	user-select: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-card {
	display: grid;
	gap: 10px;
	padding: 20px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-card);
	background: #fff;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-card--wide {
	grid-column: 1 / -1;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-card i {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: var(--cpp-r-control);
	background: #eceef2;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-card b {
	display: block;
	width: 80%;
	height: 10px;
	border-radius: var(--cpp-r-pill);
	background: #eceef2;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-card b.is-short {
	width: 45%;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-meter {
	display: block;
	height: 6px;
	border-radius: var(--cpp-r-pill);
	background: linear-gradient(90deg, #d7dbe2 35%, #eceef2 35%);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-card h3 {
	margin: 0 !important;
	font-size: 15px !important;
	color: #9aa3b0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-ghost-row em {
	display: block;
	padding: 12px;
	font-size: 12px;
	font-style: normal;
	color: #a3acb9;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-control);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-lock-note {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: radial-gradient(closest-side, rgba(246, 247, 249, 0.92), rgba(246, 247, 249, 0.35));
	text-align: center;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-lock-note svg {
	width: 40px;
	height: 40px;
	padding: 10px;
	border: 1px solid var(--cpp-line);
	border-radius: 50%;
	background: #fff;
	color: var(--cpp-ink-2);
	box-shadow: var(--cpp-shadow-sm);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-lock-note strong {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-tips {
	padding: 20px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-card);
	background: #fff;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-tips h2 {
	margin: 0 0 12px !important;
	font-size: 16px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-tips ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-tips li {
	display: grid;
	grid-template-columns: 16px minmax(0, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	color: var(--cpp-ink-2);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-tips li::before {
	content: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-tips li svg {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--cpp-success);
}

@media (max-width: 1100px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview :is(.cpp-preview-status, .cpp-preview-grid) {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 760px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-sidebar {
		display: none !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-dashboard-main {
		padding: 0 16px 32px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-status {
		padding: 20px;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview .cpp-preview-ghost {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------- sign-in */

/* Split screen: the form on a clean white half, the brand story over the
   road photo on the other. No floating card, no second logo. */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login {
	display: block !important;
	min-height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login :is(.cpp-login-backdrop, .cpp-login-backdrop-label) {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-shell {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
	overflow: visible !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-panel {
	order: 1;
	display: flex !important;
	flex-direction: column;
	width: 100% !important;
	min-height: 100vh !important;
	padding: 28px 48px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story {
	order: 2;
	position: relative;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	margin: 12px !important;
	padding: 48px !important;
	overflow: hidden;
	border: 0 !important;
	border-radius: var(--cpp-r-surface) !important;
	background:
		linear-gradient(180deg, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.88)),
		url("../images/overhead-carrier-partner.jpg") center / cover no-repeat !important;
	color: #fff !important;
	box-shadow: none !important;
	min-height: calc(100vh - 24px);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story::before,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story::after {
	content: none !important;
	display: none !important;
}

/* The logo lives once, above the form. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story-brand {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story-content {
	margin-top: auto;
	max-width: 520px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story .cpp-eyebrow {
	color: #ffc2a8 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story h2 {
	margin: 0 0 14px !important;
	font-size: clamp(28px, 2.6vw, 38px) !important;
	line-height: 1.12 !important;
	color: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story p {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.82) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story ul {
	display: grid;
	gap: 10px;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story li {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	color: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story li::before {
	content: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story li > span {
	display: inline-grid !important;
	width: 22px !important;
	height: 22px !important;
	flex: 0 0 22px;
	place-items: center;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(236, 106, 60, 0.9) !important;
	color: #fff !important;
	font-size: 12px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story-foot {
	margin: 32px 0 0 !important;
	font-size: 12px !important;
	color: rgba(255, 255, 255, 0.7) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story-foot span {
	margin-right: 6px;
	color: #4ade80 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar .cpp-brand {
	display: inline-flex !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar .cpp-brand img {
	width: auto;
	max-height: 40px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar .cpp-secure-label {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login :is([data-cpp-invite], .cpp-login-form) {
	width: 100%;
	max-width: 400px;
	margin: auto !important;
	padding: 32px 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login [data-cpp-invite]:empty {
	display: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-head {
	margin: 0 0 24px !important;
	padding: 0 !important;
	border: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-head h1 {
	margin: 0 0 6px !important;
	font-size: 30px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-head p:not(.cpp-eyebrow) {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-fields {
	display: grid !important;
	gap: 16px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-row {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-check {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 14px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-check span {
	font-weight: 400 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-button--block {
	width: 100%;
	min-height: 44px !important;
	justify-content: center;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-foot {
	display: grid;
	gap: 16px;
	margin: 24px 0 0 !important;
	padding: 24px 0 0 !important;
	border-top: 1px solid var(--cpp-line) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-help {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-help summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--cpp-ink-2) !important;
	cursor: pointer;
	list-style: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-help summary::-webkit-details-marker {
	display: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-help summary::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: 2px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.15s ease;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-help[open] summary::after {
	transform: rotate(225deg) translateY(-2px);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-help :is(p, li) {
	font-size: 13px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-help ul {
	margin: 8px 0 0 !important;
	padding-left: 18px !important;
}

/* "Register a carrier" and "Contact support" sit on one baseline. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-support {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-support > :is(a, button) {
	display: inline-flex !important;
	align-items: center;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	color: var(--cpp-orange-ink) !important;
	text-decoration: none !important;
	vertical-align: baseline;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-support > :is(a, button):hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-welcome {
	display: flex;
	gap: 12px;
	margin: 0 0 20px !important;
	padding: 12px 14px !important;
	border: 1px solid #cdebd8 !important;
	border-radius: var(--cpp-r-card) !important;
	background: var(--cpp-success-bg) !important;
}

@media (max-width: 960px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-shell {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-story {
		display: none !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-panel {
		padding: 20px 20px 32px !important;
	}
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar {
	width: 100% !important;
	flex-direction: row !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar .cpp-brand img,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar .cpp-brand svg {
	height: 36px !important;
	max-height: none !important;
	width: auto !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar-actions {
	margin-left: auto;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar-actions {
	justify-content: flex-end !important;
	width: auto !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar .cpp-brand {
	max-width: 200px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-login .cpp-login-toolbar .cpp-brand > * {
	height: 44px !important;
}

/* -------------------------------------------------------- settings tabs */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-tabs {
	position: sticky;
	z-index: 15;
	top: 64px;
	display: flex;
	gap: 4px;
	margin: 0 0 20px;
	padding: 4px;
	overflow-x: auto;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-card);
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	scrollbar-width: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-tabs button {
	flex: 0 0 auto;
	min-height: 36px !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: transparent !important;
	color: var(--cpp-muted) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	white-space: nowrap;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-tabs button:hover {
	color: var(--cpp-ink) !important;
	background: var(--cpp-soft) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-tabs button.is-active {
	background: var(--cpp-ink) !important;
	color: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-pane {
	display: grid;
	gap: 16px;
	max-width: 920px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-pane[hidden] {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-pane > .cpp-settings-panel {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 24px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: #fff !important;
	box-shadow: var(--cpp-shadow-xs) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-panel > header {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 18px !important;
	padding: 0 0 16px !important;
	border-bottom: 1px solid var(--cpp-line) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-panel > header h2 {
	margin: 0 0 4px !important;
	font-size: 17px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-panel > header p:not(.cpp-eyebrow) {
	margin: 0 !important;
	font-size: 13px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-panel > header .cpp-eyebrow {
	display: none !important;
}

/* Toggle rows: a quiet list, not a stack of grey boxes. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-toggle {
	display: grid !important;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: start;
	gap: 14px !important;
	margin: 0 !important;
	padding: 12px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--cpp-line) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-toggle:last-of-type {
	border-bottom: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-toggle strong {
	font-size: 14px !important;
	font-weight: 500 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-toggle small {
	display: block;
	font-size: 13px !important;
	color: var(--cpp-muted) !important;
}

/* The save bar floats at the bottom of the window. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-save {
	position: sticky !important;
	z-index: 15;
	bottom: 16px;
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 920px;
	margin: 20px 0 0 !important;
	padding: 12px 12px 12px 20px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--cpp-ink) !important;
	box-shadow: var(--cpp-shadow) !important;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-save strong {
	display: block;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-save small {
	font-size: 13px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-tabs {
	max-width: 920px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-panel .cpp-button {
	width: auto !important;
	justify-self: start;
	align-self: flex-start;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-pane > .cpp-settings-panel:has(.cpp-demo-data-toggle) {
	order: 9;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-panel > :is(.cpp-form-grid, .cpp-field, .cpp-settings-toggle, fieldset):first-of-type {
	margin-top: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-check.is-restricted {
	padding-left: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-check.is-restricted small {
	display: block;
	color: var(--cpp-warning) !important;
	font-size: 12px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-settings-warning {
	padding: 10px 14px !important;
	border: 1px solid #fde3b0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: var(--cpp-warning-bg) !important;
	color: var(--cpp-warning) !important;
	font-size: 13px !important;
}

/* ---------------------------------------------------- plans & payments */

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-promo-list {
	display: grid;
	gap: 12px;
	margin-bottom: 12px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-promo-editor, .cppv-addon-editor) {
	padding: 20px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-promo-editor, .cppv-addon-editor) > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-promo-editor, .cppv-addon-editor) h3 {
	margin: 0 !important;
	font-size: 16px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-promo-used {
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: var(--cpp-r-pill);
	background: var(--cpp-soft);
	font-family: var(--cpp-font-body);
	font-size: 12px !important;
	font-weight: 500;
	color: var(--cpp-muted) !important;
	vertical-align: middle;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-promo-discount {
	display: grid !important;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 8px;
}

/* Fieldsets read as cards with a title, not a border cut by a legend. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app fieldset.cppv-card {
	display: grid;
	gap: 14px;
	margin: 0 !important;
	padding: 20px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app fieldset.cppv-card > legend {
	float: left;
	width: 100%;
	margin: 0 0 4px !important;
	padding: 0 !important;
	font-family: var(--cpp-font-display) !important;
	font-size: 16px !important;
	font-weight: 650 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app fieldset.cppv-card > legend + * {
	clear: both;
}

/* Section tabs in Plans & payments match the settings tabs. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-tabs {
	display: flex;
	gap: 4px;
	padding: 4px !important;
	overflow-x: auto;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-tabs button {
	flex: 0 0 auto;
	min-height: 36px !important;
	padding: 0 14px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--cpp-muted) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-tabs button:is(.is-active, [aria-selected="true"]) {
	background: var(--cpp-ink) !important;
	color: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-settings-form > .cpp-button--outline {
	width: auto !important;
	justify-self: start;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-save-bar {
	position: sticky !important;
	z-index: 15;
	bottom: 16px;
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin: 20px 0 0 !important;
	padding: 12px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: rgba(255, 255, 255, 0.95) !important;
	box-shadow: var(--cpp-shadow) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-save-bar .cpp-form-error {
	flex: 1 1 auto;
	margin: 0 !important;
}

/* ---------- Stored files (owner) ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files { display: grid; gap: 20px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files .cppv-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; background: linear-gradient(120deg, var(--cpp-orange-soft, #fff4ec), var(--cpp-surface, #fff) 70%); border: 1px solid var(--cpp-line, #e7e5e4); border-radius: var(--cpp-radius-lg, 14px); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-hero > div { display: flex; gap: 16px; align-items: flex-start; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-hero > div > .cppv-icon { width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--cpp-surface, #fff); color: var(--cpp-orange, #f26b1d); flex: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-hero h2 { margin: 0 0 4px; font-size: 18px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-hero p { margin: 0; max-width: 60ch; color: var(--cpp-muted, #57534e); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-hero .cpp-button { flex: none; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-card { padding: 20px 22px; border-radius: var(--cpp-radius-lg, 14px); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-head h2 { margin: 0 0 4px; font-size: 17px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-head p { margin: 0; color: var(--cpp-muted, #57534e); font-size: 14px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-head .cpp-field--search { min-width: 220px; margin: 0; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files .cppv-check-cell { width: 36px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files .cpp-table-wrap { max-height: 420px; overflow: auto; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-missing { margin: 0; padding-left: 18px; color: var(--cpp-muted, #57534e); columns: 2; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-foot { margin: 0; font-size: 13px; color: var(--cpp-muted, #57534e); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-foot code { font-size: 12px; word-break: break-all; }
@media (max-width: 720px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-hero, html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-head { flex-direction: column; align-items: stretch; }
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-files-missing { columns: 1; }
}

/* KPI tiles (Revenue, Stored files): one card each, label / number / note stacked. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-summary-grid.cppv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 20px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-summary-grid.cppv-kpis > article { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; padding: 18px 20px; background: var(--cpp-surface, #fff); border: 1px solid var(--cpp-line); border-radius: var(--cpp-radius-lg); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-summary-grid.cppv-kpis > article > span { font-size: 13px; color: var(--cpp-muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-summary-grid.cppv-kpis > article > strong { font-family: var(--cpp-font-display, inherit); font-size: 28px; line-height: 1.1; color: var(--cpp-ink, #0f172a); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-summary-grid.cppv-kpis > article > small { font-size: 12.5px; color: var(--cpp-muted); }

/* ---------- wp-admin "Server settings": same look as the app ---------- */
.cpp-settings-admin { font-family: "Poppins", "Manrope", system-ui, sans-serif; color: #0f172a; max-width: 1180px; margin: 24px 24px 40px 4px; }
.cpp-settings-admin h1, .cpp-settings-admin h2, .cpp-settings-admin h3 { font-family: "Bricolage Grotesque", "Manrope", system-ui, sans-serif; color: #0f172a; letter-spacing: -0.01em; }
.cpp-settings-admin .cpp-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.cpp-settings-admin .cpp-admin-head p { margin: 0 0 2px; color: #ea580c; font-size: 13px; font-weight: 500; }
.cpp-settings-admin .cpp-admin-head h1 { margin: 0; padding: 0; font-size: 28px; font-weight: 650; }
.cpp-settings-admin .button { border-radius: 8px; min-height: 38px; padding: 0 16px; line-height: 36px; font-weight: 500; box-shadow: none; }
.cpp-settings-admin .button-primary { background: #0f172a; border-color: #0f172a; }
.cpp-settings-admin .button-primary:hover, .cpp-settings-admin .button-primary:focus { background: #1e293b; border-color: #1e293b; }
.cpp-settings-admin .nav-tab-wrapper { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 0 22px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fff; }
.cpp-settings-admin .nav-tab { margin: 0; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: #475569; font-size: 14px; font-weight: 500; line-height: 1.4; }
.cpp-settings-admin .nav-tab:hover { background: #f1f5f9; color: #0f172a; }
.cpp-settings-admin .nav-tab-active, .cpp-settings-admin .nav-tab-active:hover { background: #0f172a; color: #fff; }
.cpp-settings-admin > p, .cpp-settings-admin .cpp-screen-intro { max-width: 75ch; color: #475569; font-size: 14px; line-height: 1.6; }
.cpp-settings-admin .notice { border-radius: 10px; border: 1px solid #e6e8ec; border-left-width: 4px; box-shadow: none; }
.cpp-settings-admin table.widefat { border: 1px solid #e6e8ec; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); border-collapse: separate; border-spacing: 0; }
.cpp-settings-admin table.widefat th, .cpp-settings-admin table.widefat td { padding: 12px 16px; font-size: 13.5px; vertical-align: middle; color: #0f172a; }
.cpp-settings-admin table.widefat thead th, .cpp-settings-admin table.widefat thead td { background: #f8fafc; color: #64748b; font-weight: 500; font-size: 12.5px; }
.cpp-settings-admin table.widefat.striped > tbody > :nth-child(odd) { background: #fff; }
.cpp-settings-admin table.widefat tbody tr + tr > * { border-top: 1px solid #f1f5f9; }
.cpp-settings-admin code { border-radius: 6px; background: #f1f5f9; padding: 2px 6px; font-size: 12px; }
.cpp-settings-admin .cpp-admin-checkup { display: flex; align-items: center; gap: 10px; }
.cpp-admin-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.5; background: #f1f5f9; color: #334155; white-space: nowrap; }
.cpp-admin-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cpp-admin-chip--ready { background: #ecfdf5; color: #047857; }
.cpp-admin-chip--suggestion, .cpp-admin-chip--suggestions { background: #fff7ed; color: #c2410c; }
.cpp-admin-chip--blocked { background: #fef2f2; color: #b91c1c; }
.cpp-settings-admin .cpp-board { gap: 14px; }
.cpp-settings-admin .cpp-board-column { border-radius: 12px; }
.cpp-settings-admin .cpp-board-card { border-radius: 10px; }
.cpp-settings-admin .cpp-board-more { margin: 4px 2px 0; font-size: 13px; color: #64748b; }
.cpp-settings-admin .cpp-board { display: grid !important; grid-auto-flow: row !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; overflow: visible !important; align-items: start; }
.cpp-settings-admin .cpp-board-column { min-width: 0 !important; width: auto !important; }
.cpp-settings-admin .cpp-board-card dd { overflow-wrap: anywhere; }
.cpp-settings-admin form p:has(> .button) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cpp-settings-admin table.widefat th:nth-child(2) { white-space: nowrap; }

/* ---------- Document center: one even grid of identical cards ----------
 * Every card has the same frame: scope and status on top, the title, the
 * file (when there is one), then one row of actions pinned to the bottom.
 * Cards in a row share one height, nothing spans two columns, and less
 * frequent actions live in the card's "More" menu. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-grid,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-driver-document-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)) !important;
	grid-auto-rows: auto !important;
	align-items: stretch !important;
	gap: 16px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot {
	display: flex !important;
	flex-direction: column !important;
	grid-column: auto !important;
	grid-row: auto !important;
	gap: 10px !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 16px 18px 14px !important;
	border: 1px solid var(--cpp-line) !important;
	border-radius: var(--cpp-r-card) !important;
	background: #fff !important;
	box-shadow: var(--cpp-shadow-xs) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	min-height: 24px;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > header .cpp-slot-scope {
	min-width: 0;
	margin: 0 !important;
	overflow: hidden;
	font-size: 12px !important;
	line-height: 1.3 !important;
	color: var(--cpp-muted) !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > header > :where(.cpp-status, .cpp-chip, .cpp-badge, [class*="cpp-status--"]) {
	flex: 0 0 auto;
	max-width: none !important;
	white-space: nowrap !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > h3 {
	display: -webkit-box;
	margin: 0 !important;
	overflow: hidden;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: -0.01em !important;
	color: var(--cpp-ink) !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	text-wrap: pretty;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-file {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 8px 10px;
	border-radius: var(--cpp-r-control);
	background: var(--cpp-canvas);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-file > .cpp-slot-icon {
	flex: 0 0 auto;
	width: 18px !important;
	min-width: 18px !important;
	max-width: none !important;
	height: 18px !important;
	color: var(--cpp-muted);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-file > div {
	display: grid;
	min-width: 0;
	gap: 1px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-file strong {
	overflow: hidden;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--cpp-ink) !important;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-file small {
	font-size: 12px !important;
	line-height: 1.35 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-slot-guidance {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot:not(.has-file) > .cpp-slot-guidance {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-slot-expiry {
	margin: 0 !important;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-slot-description {
	display: -webkit-box;
	margin: 0 !important;
	overflow: hidden;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--cpp-muted) !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-slot-frequency {
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-review-banner {
	margin: 0 !important;
	padding: 8px 10px !important;
	font-size: 12.5px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-detail {
	margin: 0 !important;
	font-size: 12.5px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-detail > summary {
	width: max-content;
	max-width: 100%;
	cursor: pointer;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-detail > summary:hover {
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-detail > p {
	margin: 6px 0 0 !important;
	font-size: 12.5px !important;
	line-height: 1.5 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-slot-history {
	padding-top: 2px;
	font-size: 12.5px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-slot-history .cpp-version-history {
	margin: 0 !important;
	border-bottom: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-slot-history .cpp-version-history summary {
	padding: 10px 0 !important;
	font-weight: 600 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > .cpp-slot-history .cpp-version-history ol {
	padding: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot > footer {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	margin: auto 0 0 !important;
	padding: 12px 0 0 !important;
	border-top: 1px solid var(--cpp-line) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-actions {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 6px !important;
	min-width: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-actions > * {
	flex: 0 0 auto !important;
	width: auto !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-slot-actions :where(.cpp-button) {
	min-height: 34px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	white-space: nowrap !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-slot .cpp-help-link {
	flex: 0 0 auto;
	margin-left: auto !important;
	font-size: 12.5px !important;
	color: var(--cpp-muted) !important;
	white-space: nowrap;
}

/* The card's "More" menu. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-more {
	position: relative;
	display: inline-flex;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-more > summary {
	display: inline-flex !important;
	width: 34px !important;
	min-width: 34px !important;
	height: 34px !important;
	min-height: 34px !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	cursor: pointer;
	list-style: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-more > summary::-webkit-details-marker {
	display: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-more > summary .cpp-slot-icon {
	width: 18px !important;
	min-width: 18px !important;
	max-width: none !important;
	height: 18px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 6px);
	left: 0;
	display: grid;
	min-width: 190px;
	padding: 6px;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-card);
	background: #fff;
	box-shadow: var(--cpp-shadow);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-height: 36px !important;
	padding: 0 10px !important;
	border: 0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cpp-ink) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	text-decoration: none !important;
	cursor: pointer;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu-item:hover,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu-item:focus-visible {
	background: var(--cpp-soft) !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu-item:not(:has(svg)) {
	padding-left: 37px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu-item .cpp-slot-icon {
	flex: 0 0 auto;
	width: 17px !important;
	min-width: 17px !important;
	max-width: none !important;
	height: 17px !important;
	color: var(--cpp-muted);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu-item.is-danger,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu-item.is-danger .cpp-slot-icon {
	color: var(--cpp-danger) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-slot-menu-item.is-danger:hover {
	background: var(--cpp-danger-bg) !important;
}

/* ---------- Company profile: tighter ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-pack-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important; gap: 8px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-pack-grid label { padding: 8px 10px !important; min-height: 0 !important; font-size: 13px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-more { margin-top: 20px; border: 1px solid var(--cpp-line); border-radius: var(--cpp-radius-lg); background: var(--cpp-surface, #fff); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-family: var(--cpp-font-display); font-weight: 600; font-size: 15px; color: var(--cpp-ink); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-more > summary::-webkit-details-marker { display: none; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-more > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-more[open] > summary::after { transform: rotate(-135deg); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-more > .cpp-fmcsa-dashboard { margin: 0 !important; border-radius: 0 0 var(--cpp-radius-lg) var(--cpp-radius-lg) !important; }

/* ---------- Team & alerts: list and its add form share one card ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-team-alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; align-items: start; margin-top: 20px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-team-panel { margin: 0 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-team-panel > h2 { margin-bottom: 4px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-panel-note { margin: 0 0 14px !important; color: var(--cpp-muted); font-size: 13.5px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-team-alerts .cpp-table :is(th, td):nth-child(3) { display: none; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform { margin: 18px 0 0 !important; padding: 18px 0 0 !important; border: 0 !important; border-top: 1px solid var(--cpp-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform h3 { margin: 0 0 4px !important; font-size: 15px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform > p { margin: 0 0 12px !important; color: var(--cpp-muted); font-size: 13.5px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform .cpp-inline-form { padding: 0 !important; border: 0 !important; background: none !important; display: flex !important; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform .cpp-inline-form > .cpp-field { flex: 1 1 200px; margin: 0 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform .cpp-inline-form > .cpp-button { flex: none; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform .cpp-check { margin-top: 12px !important; font-size: 13px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-team-panel .cpp-callout { margin-top: 16px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-team-alerts .cpp-table { min-width: 0 !important; width: 100% !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-team-alerts .cpp-table :is(th, td):last-child { width: 1%; white-space: nowrap; text-align: right; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform { display: block !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform .cpp-field-hint { display: none !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform .cpp-inline-form > .cpp-field { position: relative; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-subform .cpp-inline-form { margin-bottom: 8px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-team-alerts .cpp-table td[colspan] { text-align: left; white-space: normal; width: auto; }

/* ---------- Console: portal team ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-stack { display: grid; gap: 20px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-stack > * { margin: 0 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-identity { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details { margin-top: 14px !important; padding: 0 !important; border: 1px solid var(--cpp-line) !important; border-radius: var(--cpp-radius) !important; background: var(--cpp-surface, #fff); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details > summary::-webkit-details-marker { display: none; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details > summary span { display: grid; gap: 2px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details > summary strong { font-size: 14.5px; color: var(--cpp-ink); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details > summary small { font-size: 12.5px; color: var(--cpp-muted); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--cpp-muted); border-bottom: 2px solid var(--cpp-muted); transform: rotate(45deg); transition: transform .2s; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details[open] > summary::after { transform: rotate(-135deg); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-details > :not(summary) { padding: 0 16px 16px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-option-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 8px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-assignment-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-access-assignment-grid h3 { font-size: 13.5px !important; margin: 0 0 8px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-assignment-list { max-height: 260px; overflow: auto; }
@media (max-width: 720px) { html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-access-identity, .cpp-access-assignment-grid) { grid-template-columns: 1fr; } }

/* ---------- Pagination and dense queue tables ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-pagination { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-pagination > div { display: flex !important; flex-direction: row !important; gap: 6px; flex-wrap: wrap; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-pagination .cpp-button { min-width: 36px; width: auto !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-pagination .cpp-button[aria-current="page"] { background: var(--cpp-ink) !important; color: #fff !important; border-color: var(--cpp-ink) !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-table td { padding-top: 12px !important; padding-bottom: 12px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-table td > small { white-space: normal; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-console .cpp-table td .cpp-chip + small { display: none; }

/* ---------- Driver dashboard ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-driver-doc-card--missing .cpp-slot-guidance { display: none !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-driver-doc-card > div > p:not([class]) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; color: var(--cpp-muted); }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-driver-doc-card footer > span { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 4px; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-driver-doc-card footer .cpp-chip { width: auto !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-driver-hero aside .cpp-meter { margin-top: 10px; }

/* ---------- Phones: one compact header, no duplicated title ---------- */
@media (max-width: 782px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-dashboard-topbar { min-height: 0 !important; padding: 8px 16px !important; display: flex !important; justify-content: flex-end !important; }
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-dashboard-topbar .cpp-topbar-context { display: none !important; }
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-dashboard-topbar :is([data-cpp-help-open], .cpp-quick-start-button) { display: none !important; }
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-dashboard-topbar .cpp-account-menu { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 8px; width: 100%; justify-content: space-between; }
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-dashboard-topbar .cpp-account-trigger small { display: none !important; }
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness-head { flex-wrap: wrap !important; gap: 8px; }
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness-head .cpp-chip { max-width: 100%; }
}
@media (max-width: 520px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-hero-readiness .cpp-readiness-legend { grid-template-columns: 1fr 1fr !important; }
}
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help-support { display: flex !important; align-items: center !important; gap: 10px !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help-support > span[aria-hidden] { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; color: #8a94a6; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help-support > span:not([aria-hidden]) { font-size: 14px !important; font-weight: 500 !important; }
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help-support svg { width: 16px; height: 16px; }

/* Console action queues: all five cards on one row on a laptop screen. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-queue-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (min-width: 621px) and (max-width: 1220px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-queue-grid:has(> :nth-child(4)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-queue-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   6.3.0 — fixed sidebars, white-on-orange, alignment pass, enterprise
   sales and offers, account decisions
   ================================================================== */

/* ---------- Sidebars: fixed, full height, always a plain rectangle ----------
   The app frame used to clip its children, so the "sticky" sidebar scrolled
   away with the page and its white background stopped halfway down. On the
   full-screen app it is now pinned to the viewport; the work area keeps its
   own column. A long menu still scrolls inside it, with the scrollbar shown
   only while the pointer is over the menu. */
@media (min-width: 761px) {
	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard {
		overflow: visible !important;
	}

	html body:not(.cpp-canvas) .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard {
		overflow: clip !important;
	}

	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard > .cpp-sidebar {
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		z-index: 40;
		width: 256px;
		height: 100vh;
		height: 100dvh;
		max-height: none !important;
		border-radius: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: transparent transparent;
	}

	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard > .cpp-sidebar:hover {
		scrollbar-color: #d3d7de transparent;
	}

	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard > .cpp-sidebar::-webkit-scrollbar {
		width: 6px;
	}

	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard > .cpp-sidebar::-webkit-scrollbar-thumb {
		border-radius: 6px;
		background: transparent;
	}

	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard > .cpp-sidebar:hover::-webkit-scrollbar-thumb {
		background: #d3d7de;
	}

	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard > .cpp-dashboard-main {
		grid-column: 2;
		overflow-x: clip;
	}

	/* With the frame no longer clipping, the translucent top bar can stay
	   in view as well, so the account menu is always one click away. */
	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard > .cpp-dashboard-main > .cpp-dashboard-topbar {
		position: sticky !important;
		top: 0 !important;
		z-index: 30 !important;
	}
}

@media (min-width: 761px) and (max-width: 1100px) {
	html body.cpp-canvas .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-dashboard > .cpp-sidebar {
		width: 232px;
	}
}

/* Laptop screens: a tighter menu so it fits without scrolling. */
@media (min-width: 761px) and (max-height: 860px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar {
		padding-top: 14px !important;
		padding-bottom: 10px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-workspace-identity {
		margin-bottom: 6px !important;
		padding-bottom: 10px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-progress {
		margin-bottom: 4px !important;
		padding: 10px 12px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar .cpp-nav-group {
		margin-bottom: 6px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar .cpp-nav-group-label {
		margin: 4px 0 2px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-sidebar nav button, .cpp-sidebar-help .cpp-sidebar-help-action, .cpp-sidebar-help .cpp-sidebar-help-support, .cpp-preview-nav button) {
		min-height: 32px !important;
		padding-top: 5px !important;
		padding-bottom: 5px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-sidebar-help {
		padding-top: 8px !important;
	}
}

/* ---------- Language flags: small rounded rectangles, centred ----------
 * Every flag is drawn at one 3:2 size and cropped from its centre, so
 * flags with different source proportions line up exactly. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-language-menu__flag {
	display: block;
	flex: 0 0 24px !important;
	align-self: center !important;
	width: 24px !important;
	height: 16px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	object-fit: cover;
	object-position: 50% 50%;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-language-menu__toggle {
	align-items: center !important;
	gap: 8px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-language-menu__option {
	display: grid !important;
	grid-template-columns: 24px minmax(0, 1fr) 16px !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 48px !important;
	padding: 8px 10px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-language-menu__option > span:nth-child(2) {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	gap: 1px !important;
	align-self: center !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-language-menu__option strong {
	display: block;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-language-menu__option small {
	display: block;
	font-size: 11.5px !important;
	line-height: 1.25 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-language-menu__check {
	align-self: center !important;
	line-height: 1 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-us-flag {
	flex: 0 0 24px !important;
	width: 24px !important;
	height: 16px !important;
	border-radius: 4px !important;
	background-position: 50% 50% !important;
	background-size: cover !important;
}

/* ---------- Quick start guide: a plain side menu, not an arch ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-help-tabs {
	align-self: stretch;
	gap: 2px !important;
	padding: 16px 12px !important;
	border: 0 !important;
	border-right: 1px solid var(--cpp-line) !important;
	border-radius: 0 !important;
	background: var(--cpp-canvas) !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-help-tabs button {
	display: flex !important;
	width: 100%;
	min-height: 38px;
	align-items: center;
	justify-content: flex-start !important;
	padding: 8px 12px !important;
	border: 0 !important;
	border-radius: var(--cpp-r-control) !important;
	background: transparent !important;
	color: var(--cpp-ink-2) !important;
	box-shadow: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-align: left !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-help-tabs button:hover {
	background: #fff !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-help-tabs button.is-active {
	background: var(--cpp-orange-soft) !important;
	color: var(--cpp-orange-ink) !important;
}

@media (max-width: 760px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-help-tabs {
		border-right: 0 !important;
		border-bottom: 1px solid var(--cpp-line) !important;
		padding: 8px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-help-tabs button {
		width: auto;
		flex: 0 0 auto;
	}
}

/* ---------- Upsell and similar icon cards: one centred block ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-upsell, .cppv-export, .cppv-contact, .cppv-covered) {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-upsell, .cppv-export, .cppv-contact, .cppv-covered) > .cppv-icon {
	box-sizing: content-box;
	flex: 0 0 22px;
	width: 22px !important;
	height: 22px !important;
	padding: 9px;
	border-radius: 10px;
	background: var(--cpp-orange-soft);
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-upsell, .cppv-export, .cppv-contact, .cppv-covered) > div {
	display: flex !important;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	min-height: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-upsell, .cppv-export, .cppv-contact, .cppv-covered) > div > :is(h3, p) {
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-upsell, .cppv-export, .cppv-contact) > :is(.cpp-button, a.cpp-button, button) {
	flex: none;
	align-self: center;
}

@media (max-width: 620px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-upsell {
		flex-wrap: wrap;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-upsell > div {
		flex-basis: calc(100% - 60px);
	}
}

/* ---------- FMCSA name results: one tidy row per company ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto auto !important;
	align-items: center !important;
	gap: 20px !important;
	padding: 18px 20px 18px 24px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__main h3 {
	margin: 6px 0 2px !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__status {
	display: grid !important;
	grid-template-columns: 100px 184px;
	align-items: center;
	gap: 16px !important;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__status > div {
	display: grid !important;
	gap: 6px !important;
	min-width: 0;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__status dt {
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__status dd {
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__status .cpp-chip {
	display: inline-flex !important;
	width: auto !important;
	max-width: none !important;
	justify-content: flex-start !important;
	overflow: visible !important;
	white-space: nowrap !important;
	text-overflow: clip !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__action {
	display: flex !important;
	justify-content: flex-end;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__action .cpp-button {
	display: inline-flex !important;
	width: auto !important;
	min-width: max-content;
	min-height: 40px !important;
	align-items: center;
	padding: 0 16px !important;
	white-space: nowrap !important;
}

@media (max-width: 1080px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result {
		grid-template-columns: minmax(0, 1fr) auto !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__status {
		grid-column: 1;
		grid-row: 2;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__action {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 620px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 14px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__status {
		grid-template-columns: repeat(2, minmax(0, max-content));
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__action {
		grid-column: 1;
		grid-row: auto;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-carrier-result__action .cpp-button {
		width: 100% !important;
		justify-content: center;
	}
}

/* ---------- Sign-up: the reassurance sits under the intro ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-onboarding-intro .cpp-onboarding-reassure {
	margin: 24px 0 0 !important;
}

/* Every notice, error and form in a sign-up step uses the full width of
   the step, so their edges line up. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-step > :is(.cpp-delivery-receipt, .cpp-inline-success, .cpp-inline-note, .cpp-form-error, .cpp-alert, .cpp-resume-link, .cpp-test-code, form, .cpp-notice-card) {
	box-sizing: border-box;
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-otp-card {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-application .cpp-otp-card > :is(.cpp-field, .cpp-form-note, .cpp-form-actions) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-delivery-receipt, .cpp-inline-success) {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 0 !important;
	margin-bottom: 14px !important;
	padding: 14px 16px !important;
	border: 1px solid #cfe9d8 !important;
	border-radius: var(--cpp-r-card) !important;
	background: var(--cpp-success-bg) !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-inline-success {
	flex-direction: column;
	align-items: flex-start !important;
	gap: 2px !important;
	color: var(--cpp-success) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-inline-success strong {
	font-size: 14px !important;
	font-weight: 600 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-inline-success span {
	font-size: 13px !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-delivery-receipt > span {
	display: inline-grid !important;
	flex: 0 0 32px;
	width: 32px !important;
	height: 32px !important;
	place-items: center;
	margin: 0 !important;
	border-radius: 8px !important;
	background: #fff !important;
	color: var(--cpp-success) !important;
	font-size: 15px !important;
	line-height: 1 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-delivery-receipt p {
	display: flex !important;
	flex-direction: column;
	gap: 2px;
	margin: 0 !important;
}

/* ---------- Password reveal: centred in the field ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-password-input {
	position: relative !important;
	display: block !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-password-input input {
	width: 100%;
	margin: 0 !important;
	padding-right: 48px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-password-toggle {
	position: absolute !important;
	top: 50% !important;
	right: 5px !important;
	bottom: auto !important;
	display: grid !important;
	width: 34px !important;
	height: 34px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	place-items: center;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--cpp-muted) !important;
	transform: translateY(-50%) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-password-toggle:hover {
	background: var(--cpp-soft) !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-password-toggle svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* ---------- Small alignment fixes ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-button, .cpp-chip, .cpp-status-chip, .cpp-nav-badge, .cpp-pill) {
	align-items: center;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-button > :is(svg, .cppv-icon) {
	flex: none;
	align-self: center;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-reason strong {
	letter-spacing: 0 !important;
	text-transform: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-task-modal .cpp-task-detail {
	white-space: pre-line;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-task-card .cpp-task-detail {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* Enterprise card on the plan picker: a dark button, so the trial button
   stays the one orange action on the page. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan--sales .cppv-plan-actions .cpp-button:not(.cpp-button--ghost):not(.cpp-button--outline) {
	border-color: var(--cpp-ink) !important;
	background: var(--cpp-ink) !important;
	color: #fff !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-plan--sales .cppv-plan-actions .cpp-button:not(.cpp-button--ghost):not(.cpp-button--outline):hover {
	border-color: #1e293b !important;
	background: #1e293b !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-sent {
	display: flex;
	width: 100%;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid #cfe9d8;
	border-radius: var(--cpp-r-control);
	background: var(--cpp-success-bg);
	color: var(--cpp-success);
	font-size: 14px;
	font-weight: 500;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-sent .cppv-icon {
	width: 16px;
	height: 16px;
}

/* ---------- Talk to sales popup ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-modal--sales {
	width: min(620px, 100%) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-form {
	display: grid;
	gap: 16px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-intro {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px 16px !important;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-form .cpp-field {
	display: grid !important;
	gap: 6px !important;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-form .cpp-field > span small {
	margin-left: 4px;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-form textarea {
	min-height: 84px;
	resize: vertical;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-points {
	display: grid;
	gap: 10px;
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-card);
	background: var(--cpp-canvas);
	list-style: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-points li {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.5 !important;
	color: var(--cpp-ink-2) !important;
	list-style: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-points li::before,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-points li::marker {
	content: none !important;
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-points .cppv-icon {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--cpp-orange-ink);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-modal-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 !important;
	padding-top: 16px;
	border-top: 1px solid var(--cpp-line);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-modal-actions .cpp-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-modal-actions .cpp-button .cppv-icon {
	width: 16px;
	height: 16px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-direct {
	margin: -4px 0 0 !important;
	text-align: right;
	font-size: 13px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-direct a {
	font-weight: 500;
	color: var(--cpp-orange-ink) !important;
	text-decoration: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-done {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding: 12px 8px 0;
	text-align: center;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-done h3 {
	margin: 4px 0 0 !important;
	font-family: var(--cpp-font-display) !important;
	font-size: 22px !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-done p {
	max-width: 440px;
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-done-mark {
	display: inline-grid;
	width: 52px;
	height: 52px;
	place-items: center;
	border-radius: 50%;
	background: var(--cpp-success-bg);
	color: var(--cpp-success);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-done-mark .cppv-icon {
	width: 26px;
	height: 26px;
	stroke-width: 2.2;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-done .cppv-modal-actions {
	width: 100%;
	justify-content: center;
	margin-top: 8px !important;
}

@media (max-width: 560px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-modal-actions .cpp-button {
		flex: 1 1 auto;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-sales-direct {
		text-align: center;
	}
}

/* ---------- Custom offer: card, popup and facts ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0;
	margin: 0 !important;
	overflow: hidden;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-card);
	background: #fff;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-facts > div {
	display: grid;
	gap: 4px;
	margin: 0 !important;
	padding: 14px 16px;
	border-right: 1px solid var(--cpp-line);
	border-bottom: 1px solid var(--cpp-line);
	margin-right: -1px !important;
	margin-bottom: -1px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-facts dt {
	margin: 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-facts dd {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-facts dd b {
	font-family: var(--cpp-font-display) !important;
	font-size: 22px !important;
	font-weight: 650 !important;
	line-height: 1.1;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-facts dd .cppv-per {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-prompt .cppv-offer-facts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-prompt .cppv-offer-price {
	order: -1;
	grid-column: 1 / -1;
	background: var(--cpp-canvas);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-prompt .cppv-offer-price dd b {
	font-size: 28px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-note {
	margin: 0 !important;
	padding: 12px 14px;
	border-left: 3px solid var(--cpp-orange);
	border-radius: 0 var(--cpp-r-control) var(--cpp-r-control) 0;
	background: var(--cpp-orange-soft);
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--cpp-ink-2) !important;
	white-space: pre-line;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-card {
	display: grid !important;
	gap: 16px;
	border-color: rgba(236, 106, 60, 0.45) !important;
	box-shadow: 0 0 0 4px rgba(236, 106, 60, 0.08) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-head > .cppv-icon {
	box-sizing: content-box;
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	padding: 9px;
	border-radius: 10px;
	background: var(--cpp-orange-soft);
	color: var(--cpp-orange-ink);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-head :is(.cpp-eyebrow, h2) {
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-head h2 {
	font-size: 20px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-actions .cpp-button {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-actions .cpp-button .cppv-icon {
	width: 16px;
	height: 16px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-prompt {
	display: grid;
	gap: 16px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-prompt > p:first-child {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-offer-prompt .cppv-trust {
	justify-content: center;
	margin: -4px 0 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-more-plans {
	padding: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-more-plans > summary {
	display: flex;
	min-height: 52px;
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--cpp-ink);
	list-style: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-more-plans > summary::-webkit-details-marker {
	display: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-more-plans > summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin-left: auto;
	border-right: 1.5px solid var(--cpp-muted);
	border-bottom: 1.5px solid var(--cpp-muted);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.15s ease;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-more-plans[open] > summary::after {
	transform: rotate(-135deg) translateY(-2px);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-more-plans[open] > summary {
	border-bottom: 1px solid var(--cpp-line);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-more-plans > [data-cppv-purchase] {
	padding: 20px;
}

/* Staff side: the offer and review panels inside a task. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-task-offer {
	display: grid;
	gap: 14px;
	margin: 0 0 18px !important;
	padding: 18px !important;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-card);
	background: #fff;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-task-offer > header :is(.cpp-eyebrow, h3) {
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-task-offer > header h3 {
	margin-top: 2px !important;
	font-size: 17px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-offer-current {
	display: grid;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid #cfe9d8;
	border-radius: var(--cpp-r-control);
	background: var(--cpp-success-bg);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-offer-current strong {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--cpp-success) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-offer-current span {
	font-size: 14px !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-offer-form {
	display: grid;
	gap: 14px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-offer-form .cpp-form-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 14px 16px !important;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-offer-form .cpp-task-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-task-save-hint, .cpp-task-blocked) {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--cpp-muted) !important;
}

@media (max-width: 560px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-offer-form .cpp-form-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ---------- Declined or suspended: one calm popup over a greyed app ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-preview--decision > :is(.cpp-sidebar, .cpp-dashboard-main) {
	filter: grayscale(1);
	opacity: 0.45;
	pointer-events: none;
	user-select: none;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-layer {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 24px;
	overflow-y: auto;
	background: rgba(15, 23, 42, 0.32);
	backdrop-filter: blur(2px);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision {
	display: grid;
	gap: 18px;
	width: min(600px, 100%);
	margin: auto;
	padding: 28px !important;
	border: 1px solid var(--cpp-line);
	border-radius: var(--cpp-r-surface);
	background: #fff;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
	color: var(--cpp-ink);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-head > div:not(.cpp-decision-lang) {
	flex: 1 1 auto;
	min-width: 0;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-head .cpp-eyebrow {
	margin: 0 0 2px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-head h1 {
	margin: 0 !important;
	font-family: var(--cpp-font-display) !important;
	font-size: 22px !important;
	font-weight: 650 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-lang {
	flex: none;
	align-self: flex-start;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-mark {
	display: inline-grid;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 12px;
	background: var(--cpp-danger-bg);
	color: var(--cpp-danger);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-mark--declined {
	background: var(--cpp-warning-bg);
	color: var(--cpp-warning);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-mark svg {
	width: 22px;
	height: 22px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-intro {
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision .cpp-decision-reason {
	display: grid !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--cpp-line) !important;
	border-left: 3px solid var(--cpp-danger) !important;
	border-radius: var(--cpp-r-control) !important;
	background: var(--cpp-canvas) !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision .cpp-decision-reason strong {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision .cpp-decision-reason p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision .cpp-decision-reason small {
	font-size: 12px !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-facts {
	display: grid;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-facts li {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--cpp-ink-2) !important;
	list-style: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-facts li::before,
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-facts li::marker {
	content: none !important;
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-facts svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--cpp-muted);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-appeal {
	display: grid;
	gap: 8px;
	padding-top: 18px;
	border-top: 1px solid var(--cpp-line);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-appeal h2 {
	margin: 0 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-appeal > p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--cpp-ink-2) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-form {
	display: grid;
	gap: 10px;
	margin-top: 4px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-form .cpp-field {
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-form textarea {
	min-height: 88px;
	resize: vertical;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-form .cpp-button {
	justify-self: start;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-sent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	padding: 12px 14px;
	border: 1px solid #cfe9d8;
	border-radius: var(--cpp-r-control);
	background: var(--cpp-success-bg);
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-sent svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	color: var(--cpp-success);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	margin: 0 !important;
	padding-top: 18px;
	border-top: 1px solid var(--cpp-line);
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-actions .cpp-button {
	width: auto !important;
}

/* Leaving is the quiet option: a plain link on the left. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-actions > .cpp-button:last-child:not(:first-child) {
	order: -1;
	margin-right: auto !important;
	padding-inline: 4px !important;
	border-color: transparent !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-actions > .cpp-button:last-child:not(:first-child):hover {
	color: var(--cpp-ink) !important;
}

@media (max-width: 560px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-layer {
		align-items: end;
		padding: 12px;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision {
		padding: 20px !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-head {
		flex-wrap: wrap;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-lang {
		order: -1;
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-actions .cpp-button {
		flex: 1 1 100%;
		justify-content: center;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-decision-actions > .cpp-button:last-child:not(:first-child) {
		order: 0;
		margin-right: 0 !important;
	}
}

/* ---------- Console tables fit a laptop screen without sideways scroll ---------- */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-table :is(th, td) {
	padding-left: 12px !important;
	padding-right: 12px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-table :is(th, td):first-child {
	padding-left: 16px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-table :is(th, td):last-child {
	padding-right: 16px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-cell-time {
	display: block;
	min-width: 88px;
	white-space: normal !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-table :is(th, td):last-child {
	min-width: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-carrier-actions {
	width: 1%;
	white-space: nowrap;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-carrier-actions {
	text-align: right;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-carrier-actions .cpp-button {
	padding: 0 10px !important;
}

@media (max-width: 1360px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-carrier-actions {
		white-space: normal;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-carrier-actions .cpp-button {
		display: flex !important;
		width: 100% !important;
		justify-content: center;
		margin: 0 !important;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-console .cpp-carrier-actions .cpp-button + .cpp-button {
		margin-top: 6px !important;
	}
}

/* =====================================================================
 * Button colors (6.3.1)
 *
 * Every button's background, text and border color are set here, and only
 * here, always as a matched pair. The block lives in a cascade layer:
 * !important declarations inside a layer outrank every unlayered !important
 * rule whatever its selector, so no context rule in this plugin, and no
 * theme, can put a white label on a white button again. Size, spacing and
 * shape stay with the component rules elsewhere.
 *
 * To add a look, give it a set of --cpp-btn-* values below. Never set
 * `color` or `background` on a button anywhere else.
 * ===================================================================== */
@layer cpp-buttons {
	/* Primary: white on the deeper orange (4.1:1 or better). :where keeps
	   this default at the lowest weight so every look below overrides it. */
	.cpp-app :where(.cpp-button, .cpp-btn, #wp-submit) {
		--cpp-btn-bg: var(--cpp-cta, #d4552a);
		--cpp-btn-fg: #fff;
		--cpp-btn-line: var(--cpp-cta, #d4552a);
		--cpp-btn-bg-hover: var(--cpp-cta-hover, #bf4920);
		--cpp-btn-fg-hover: #fff;
		--cpp-btn-line-hover: var(--cpp-cta-hover, #bf4920);
	}

	/* Secondary: white on navy. */
	.cpp-app :is(.cpp-button, .cpp-btn):is(.cpp-button--secondary, .is-secondary),
	.cpp-app .cpp-button-secondary {
		--cpp-btn-bg: #0e1b2f;
		--cpp-btn-fg: #fff;
		--cpp-btn-line: #0e1b2f;
		--cpp-btn-bg-hover: #172a47;
		--cpp-btn-fg-hover: #fff;
		--cpp-btn-line-hover: #172a47;
	}

	/* Outline, ghost and icon buttons: dark ink on white. */
	.cpp-app :is(.cpp-button, .cpp-btn):is(.cpp-button--outline, .is-outline, .cpp-button--ghost, .is-ghost, .cpp-button--icon, .is-icon),
	.cpp-app :is(.cpp-button-outline, .cpp-button-ghost),
	.cpp-app .cpp-row-actions > .cpp-button:not(.cpp-button--danger):not(.is-danger) {
		--cpp-btn-bg: #fff;
		--cpp-btn-fg: var(--cpp-ink, #0f172a);
		--cpp-btn-line: var(--cpp-line-strong, #d3d7de);
		--cpp-btn-bg-hover: var(--cpp-soft, #f3f4f6);
		--cpp-btn-fg-hover: var(--cpp-ink, #0f172a);
		--cpp-btn-line-hover: #b9bfc8;
	}

	/* Outline keeps its warm hover. */
	.cpp-app :is(.cpp-button, .cpp-btn):is(.cpp-button--outline, .is-outline),
	.cpp-app .cpp-button-outline {
		--cpp-btn-bg-hover: var(--cpp-orange-soft, #fff1eb);
		--cpp-btn-line-hover: var(--cpp-orange, #ec6a3c);
	}

	/* Danger: white on red. */
	.cpp-app :is(.cpp-button, .cpp-btn):is(.cpp-button--danger, .is-danger),
	.cpp-app .cpp-button-danger {
		--cpp-btn-bg: var(--cpp-danger, #b42318);
		--cpp-btn-fg: #fff;
		--cpp-btn-line: var(--cpp-danger, #b42318);
		--cpp-btn-bg-hover: #8f1c13;
		--cpp-btn-fg-hover: #fff;
		--cpp-btn-line-hover: #8f1c13;
	}

	/* Quiet danger beside other choices in the applicant dialog: red on white. */
	.cpp-app .cpp-applicant-actions :is(.cpp-button, .cpp-btn):is(.cpp-button--danger, .is-danger) {
		--cpp-btn-bg: #fff;
		--cpp-btn-fg: var(--cpp-danger, #b42318);
		--cpp-btn-line: #ecc7c3;
		--cpp-btn-bg-hover: var(--cpp-danger-bg, #fef3f2);
		--cpp-btn-fg-hover: var(--cpp-danger, #b42318);
		--cpp-btn-line-hover: var(--cpp-danger, #b42318);
	}

	/* Dark ink: the current page number and the Enterprise plan. */
	.cpp-app .cpp-pagination :is(.cpp-button, .cpp-btn):is([aria-current="page"], .is-current),
	.cpp-app .cppv-plan--sales .cppv-plan-actions .cpp-button:not(.cpp-button--ghost):not(.cpp-button--outline) {
		--cpp-btn-bg: var(--cpp-ink, #0f172a);
		--cpp-btn-fg: #fff;
		--cpp-btn-line: var(--cpp-ink, #0f172a);
		--cpp-btn-bg-hover: #1e293b;
		--cpp-btn-fg-hover: #fff;
		--cpp-btn-line-hover: #1e293b;
	}

	/* A text-only action at the end of the decision screen. */
	.cpp-app .cpp-decision-actions > .cpp-button:last-child:not(:first-child) {
		--cpp-btn-bg: transparent;
		--cpp-btn-fg: var(--cpp-muted, #64748b);
		--cpp-btn-line: transparent;
		--cpp-btn-bg-hover: transparent;
		--cpp-btn-fg-hover: var(--cpp-ink, #0f172a);
		--cpp-btn-line-hover: transparent;
	}

	/* The one place the pairs are applied. */
	.cpp-app :is(.cpp-button, .cpp-btn, #wp-submit),
	.cpp-app :is(.cpp-button-secondary, .cpp-button-outline, .cpp-button-ghost, .cpp-button-danger),
	.cpp-app :is(.cpp-button, .cpp-btn, #wp-submit):is(:link, :visited, :focus, :active) {
		border-color: var(--cpp-btn-line) !important;
		background-color: var(--cpp-btn-bg) !important;
		background-image: none !important;
		color: var(--cpp-btn-fg) !important;
		-webkit-text-fill-color: currentColor !important;
	}

	.cpp-app :is(.cpp-button, .cpp-btn, #wp-submit):hover:not(:disabled):not([aria-disabled="true"]),
	.cpp-app :is(.cpp-button-secondary, .cpp-button-outline, .cpp-button-ghost, .cpp-button-danger):hover:not(:disabled) {
		border-color: var(--cpp-btn-line-hover) !important;
		background-color: var(--cpp-btn-bg-hover) !important;
		color: var(--cpp-btn-fg-hover) !important;
	}

	/* Labels and icons inside a button always take the button's own color. */
	.cpp-app :is(.cpp-button, .cpp-btn, .cpp-button-secondary, .cpp-button-outline, .cpp-button-ghost, .cpp-button-danger) :is(span, b, strong, small, em, i, svg) {
		color: inherit !important;
		-webkit-text-fill-color: currentColor !important;
	}
}

/* ---------- Table row actions: one tidy row, never broken labels ----------
 * Buttons keep their labels on one line. When the table is narrow they
 * stack, right-aligned and equally wide, instead of wrapping words. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cppv-row-menu {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 6px !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cppv-row-menu, .cpp-row-actions) .cpp-button {
	white-space: nowrap !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-table td.cpp-row-actions:has(> .cppv-row-menu) {
	width: 1%;
	min-width: 168px;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-table td:has(> .cppv-row-menu) .cppv-row-menu:not(:has(> :nth-child(3))) {
	flex-wrap: nowrap !important;
}

@media (min-width: 1400px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-table td.cpp-row-actions:has(> .cppv-row-menu > :nth-child(3)),
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-table:has(.cppv-row-menu > :nth-child(3)) td.cpp-row-actions:has(> .cppv-row-menu) {
		min-width: 340px;
	}

	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-table:has(.cppv-row-menu > :nth-child(3)) .cppv-row-menu {
		flex-wrap: nowrap !important;
	}
}

/* ---------- FMCSA record header: light, like every other card ----------
 * The dark slab left the company name in dark ink on navy. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-dashboard--rich > .cpp-fmcsa-hero {
	border-bottom: 1px solid var(--cpp-line) !important;
	background:
		radial-gradient(600px 200px at 100% 0%, rgba(236, 106, 60, 0.08), transparent 70%),
		linear-gradient(180deg, #fff, #fff) !important;
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-dashboard--rich .cpp-fmcsa-hero :is(h2, h3, .cpp-fmcsa-identity strong) {
	color: var(--cpp-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-dashboard--rich .cpp-fmcsa-hero p:not(.cpp-eyebrow),
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-dashboard--rich .cpp-fmcsa-identity > span:not(.cpp-chip) {
	color: var(--cpp-muted) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-dashboard--rich .cpp-fmcsa-hero .cpp-eyebrow {
	color: var(--cpp-orange-ink) !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-fmcsa-tabs button.is-active {
	border-color: var(--cpp-cta) !important;
	background: var(--cpp-cta) !important;
	color: #fff !important;
}

/* Sidebar group labels: quiet but readable. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-nav-group-label {
	color: #6b7789 !important;
}

/* On phones the account row wraps and the language button can sit at the
   left edge, so its menu opens to the right instead of off-screen. */
@media (max-width: 760px) {
	html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-account-menu .cpp-language-menu__options {
		right: auto !important;
		left: 0 !important;
		max-width: calc(100vw - 32px);
	}
}

/* ---------- Upload form rhythm ----------
 * The document reader is empty until a file is read; it no longer opens a
 * blank row. The expiration field's label sits on the same line and gap as
 * its neighbour, whatever badge it carries. */
html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-document-reader:not(:has(> .cpp-document-read-status:not([hidden]))) {
	display: none !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app .cpp-expiration-field > label {
	display: grid !important;
	gap: 6px !important;
	margin: 0 !important;
}

html body .cpp-app.cpp-app.cpp-app.cpp-app.cpp-app.cpp-app :is(.cpp-field, .cpp-expiration-field > label) > span:first-child {
	display: flex;
	min-height: 20px;
	align-items: center;
	gap: 6px;
}