/**
 * Carrier Partner Portal — SaaS experience layer
 *
 * This file is deliberately loaded after portal.css. It provides one
 * authoritative component definition for the public application and auth
 * experiences while the older dashboard styles remain backwards compatible.
 */

.cpp-app {
	--cpp-public-content: 980px;
	--cpp-public-gutter: clamp(18px, 4vw, 64px);
	--cpp-auth-shell: 1380px;
	--cpp-auth-panel: 580px;
	--cpp-saas-line: #dbe2e8;
	--cpp-saas-line-strong: #c5d0d9;
	--cpp-saas-ink: #142033;
	--cpp-saas-muted: #607083;
	--cpp-saas-soft: #f5f7f9;
	--cpp-saas-orange: #ef7249;
	--cpp-saas-orange-dark: #b83f1d;
	--cpp-saas-orange-soft: #fff1eb;
	--cpp-saas-green: #087343;
	--cpp-saas-green-soft: #e8f6ef;
	--cpp-saas-shadow: 0 24px 70px rgba(15, 31, 49, 0.11);
}

html body .cpp-app.cpp-standalone {
	width: var(--cpp-client-viewport-width, 100vw);
	max-width: var(--cpp-client-viewport-width, 100vw);
	min-height: 100dvh;
	margin-inline: calc(50% - var(--cpp-client-viewport-half, 50vw));
	border: 0;
	border-radius: 0;
	overflow-x: clip;
}

/* ---------------------------------------------------------------------
 * Public application shell
 * ------------------------------------------------------------------ */

html body .cpp-app.cpp-application {
	min-height: 100dvh;
	background:
		linear-gradient(rgba(20, 32, 51, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20, 32, 51, 0.035) 1px, transparent 1px),
		#f7f9fb;
	background-size: 40px 40px;
}

html body .cpp-app.cpp-application .cpp-app-header {
	position: relative;
	z-index: 5;
	display: flex;
	min-height: 80px;
	justify-content: space-between;
	padding: 14px var(--cpp-public-gutter);
	border-bottom: 1px solid rgba(197, 208, 217, 0.86);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(18px);
}

.cpp-app .cpp-application-brand {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.cpp-app .cpp-application-brand .cpp-brand-logo {
	display: block;
	width: clamp(142px, 14vw, 190px);
	height: auto;
}

.cpp-app .cpp-application-home {
	border-radius: 8px;
	outline-offset: 5px;
}

.cpp-app .cpp-application-home:focus-visible {
	outline: 3px solid rgba(238, 111, 70, 0.45);
}

.cpp-app .cpp-application-brand-copy {
	display: grid;
	gap: 2px;
	padding-left: 18px;
	border-left: 1px solid var(--cpp-saas-line);
	color: var(--cpp-saas-ink);
	line-height: 1.25;
}

.cpp-app .cpp-application-brand-copy strong {
	font-size: 0.84rem;
	font-weight: 800;
}

.cpp-app .cpp-application-brand-copy small {
	color: var(--cpp-saas-muted);
	font-size: 0.72rem;
}

html body .cpp-app.cpp-application .cpp-onboarding-layout {
	display: grid;
	min-height: calc(100dvh - 80px);
	grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.82fr);
}

html body .cpp-app.cpp-application .cpp-onboarding-aside {
	position: relative;
	display: flex;
	min-height: calc(100dvh - 80px);
	flex-direction: column;
	padding: clamp(42px, 6vw, 84px) clamp(28px, 4.2vw, 72px);
	border-right: 1px solid rgba(197, 208, 217, 0.8);
	background:
		radial-gradient(circle at 10% 4%, rgba(239, 114, 73, 0.12), transparent 32%),
		linear-gradient(155deg, #152337 0%, #0d1828 100%);
	color: #fff;
}

html body .cpp-app.cpp-application .cpp-onboarding-intro {
	max-width: 560px;
}

html body .cpp-app.cpp-application .cpp-onboarding-intro .cpp-eyebrow {
	color: #ffb69e;
}

html body .cpp-app.cpp-application .cpp-onboarding-intro h1 {
	margin: 14px 0 18px;
	color: #fff;
	font-size: clamp(2rem, 3.15vw, 3.8rem);
	line-height: 1.02;
	letter-spacing: -0.055em;
	text-wrap: balance;
}

html body .cpp-app.cpp-application .cpp-onboarding-intro > p:last-child {
	max-width: 50ch;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.96rem;
	line-height: 1.75;
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list {
	display: grid;
	gap: 5px;
	margin-top: clamp(34px, 6vh, 68px);
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list article {
	display: grid;
	align-items: center;
	gap: 14px;
	grid-template-columns: 34px minmax(0, 1fr);
	min-height: 66px;
	padding: 10px 14px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: transparent;
	color: rgba(255, 255, 255, 0.54);
	transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list article:is(.is-active, .is-complete) {
	border-color: rgba(255, 255, 255, 0.11);
	background: rgba(255, 255, 255, 0.075);
	color: #fff;
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list article.is-active {
	border-color: rgba(239, 114, 73, 0.48);
	background: rgba(239, 114, 73, 0.14);
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list article > b {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	color: inherit;
	font-size: 0.72rem;
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list article.is-active > b {
	border-color: var(--cpp-saas-orange);
	background: var(--cpp-saas-orange);
	color: #111820;
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list article strong,
html body .cpp-app.cpp-application .cpp-onboarding-step-list article small {
	display: block;
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list article strong {
	font-size: 0.86rem;
}

html body .cpp-app.cpp-application .cpp-onboarding-step-list article small {
	margin-top: 3px;
	color: inherit;
	font-size: 0.72rem;
	opacity: 0.76;
}

html body .cpp-app.cpp-application .cpp-onboarding-reassure {
	margin-top: auto;
	padding-top: 30px;
	color: rgba(255, 255, 255, 0.7);
}

html body .cpp-app.cpp-application .cpp-onboarding-reassure p {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.65;
}

html body .cpp-app.cpp-application .cpp-onboarding-reassure strong {
	color: #fff;
}

html body .cpp-app.cpp-application .cpp-onboarding-main {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: clamp(22px, 3vw, 34px);
	padding: clamp(34px, 5vw, 76px) var(--cpp-public-gutter) clamp(64px, 8vw, 110px);
}

html body .cpp-app.cpp-application :where(.cpp-test-mode-banner, .cpp-progress-shell, .cpp-onboarding-card) {
	width: 100%;
	max-width: var(--cpp-public-content);
	margin-inline: auto;
}

html body .cpp-app.cpp-application .cpp-onboarding-main > .cpp-onboarding-card {
	width: 100%;
	max-width: var(--cpp-public-content);
}

html body .cpp-app.cpp-application .cpp-progress-shell {
	display: block;
	flex: none;
}

html body .cpp-app.cpp-application .cpp-pipeline {
	width: 100%;
	max-width: none;
	padding: clamp(20px, 2.7vw, 30px);
	border: 1px solid var(--cpp-saas-line);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 14px 40px rgba(15, 31, 49, 0.08);
}

.cpp-app .cpp-pipeline-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 17px;
}

.cpp-app .cpp-pipeline-head .cpp-eyebrow {
	margin: 0 0 4px;
	color: var(--cpp-saas-orange-dark);
	font-size: 0.68rem;
}

.cpp-app .cpp-pipeline-head strong {
	display: block;
	color: var(--cpp-saas-ink);
	font-size: 0.96rem;
	line-height: 1.35;
}

.cpp-app .cpp-pipeline-percent {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: baseline;
	gap: 5px;
	padding: 7px 11px;
	border: 1px solid #f5c0ad;
	border-radius: 999px;
	background: var(--cpp-saas-orange-soft);
	color: var(--cpp-saas-orange-dark);
	font-size: 0.86rem;
	font-weight: 850;
}

.cpp-app .cpp-pipeline-percent small {
	font-size: 0.66rem;
	font-weight: 750;
}

.cpp-app .cpp-pipeline-meter {
	height: 7px;
	margin-bottom: 24px;
	overflow: hidden;
	border-radius: 999px;
	background: #e8edf1;
}

.cpp-app .cpp-pipeline-meter > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #dd542c, #f58a64);
	box-shadow: 0 0 18px rgba(239, 114, 73, 0.42);
	transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body .cpp-app.cpp-app .cpp-pipeline-stages {
	position: relative;
	display: grid;
	align-items: start;
	gap: 0;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.cpp-app .cpp-pipeline-rail {
	position: absolute;
	z-index: 0;
	top: 17px;
	left: 12.5%;
	width: 75%;
	height: 2px;
	overflow: hidden;
	background: #dce3e8;
}

.cpp-app .cpp-pipeline-rail-fill {
	display: block;
	height: 100%;
	background: var(--cpp-saas-orange);
	transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

html body .cpp-app.cpp-app .cpp-pipeline-stage {
	position: relative;
	z-index: 1;
	display: grid;
	min-width: 0;
	justify-items: center;
	gap: 9px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #8b97a4;
	cursor: default;
	text-align: center;
}

html body .cpp-app.cpp-app .cpp-pipeline-stage:not(.is-locked) {
	cursor: pointer;
}

html body .cpp-app.cpp-app .cpp-pipeline-stage[data-pipeline-drag-handle] {
	cursor: grab;
	touch-action: none;
}

html body .cpp-app.cpp-app .cpp-pipeline-stage[data-pipeline-drag-handle].is-dragging {
	cursor: grabbing;
}

.cpp-app .cpp-pipeline-stage.is-drop-target .cpp-pipeline-dot {
	border-color: var(--cpp-saas-green);
	background: var(--cpp-saas-green-soft);
	color: var(--cpp-saas-green);
	box-shadow: 0 0 0 5px #fff, 0 0 0 8px rgba(8, 115, 67, 0.13);
}

.cpp-app .cpp-pipeline-stage.is-drop-blocked .cpp-pipeline-dot {
	border-color: #b64236;
	background: #fff0ee;
	color: #9b2f27;
}

.cpp-app .cpp-pipeline-dot {
	display: grid;
	width: 36px;
	height: 36px;
	place-items: center;
	border: 2px solid #d4dce3;
	border-radius: 50%;
	background: #fff;
	color: #8995a2;
	font-size: 0.78rem;
	font-weight: 850;
	box-shadow: 0 0 0 5px #fff;
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.cpp-app .cpp-pipeline-stage:is(.is-current, .is-done) .cpp-pipeline-dot {
	border-color: var(--cpp-saas-orange);
	background: var(--cpp-saas-orange);
	color: #13181d;
}

.cpp-app .cpp-pipeline-stage.is-current .cpp-pipeline-dot {
	box-shadow: 0 0 0 5px #fff, 0 0 0 8px rgba(239, 114, 73, 0.17);
	transform: scale(1.04);
}

html body .cpp-app.cpp-app .cpp-pipeline-text {
	display: grid;
	width: 100%;
	min-width: 0;
	gap: 2px;
	justify-items: center;
}

html body .cpp-app.cpp-app .cpp-pipeline-text strong,
html body .cpp-app.cpp-app .cpp-pipeline-text small {
	display: block;
	width: 100%;
	max-width: none;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

.cpp-app .cpp-pipeline-text strong {
	color: var(--cpp-saas-ink);
	font-size: 0.78rem;
	line-height: 1.25;
}

.cpp-app .cpp-pipeline-text small {
	color: #85909c;
	font-size: 0.65rem;
	line-height: 1.3;
}

.cpp-app .cpp-pipeline-stage.is-locked .cpp-pipeline-text strong {
	color: #8894a0;
}

.cpp-app .cpp-pipeline-help {
	margin: 17px 0 0;
	padding-top: 14px;
	border-top: 1px solid #e9edf0;
	color: var(--cpp-saas-muted);
	font-size: 0.72rem;
	text-align: center;
}

html body .cpp-app.cpp-application .cpp-onboarding-card {
	overflow: hidden;
	border: 1px solid var(--cpp-saas-line);
	border-radius: 24px;
	background: #fff;
	box-shadow: var(--cpp-saas-shadow);
}

/* ---------------------------------------------------------------------
 * FMCSA result cards
 * ------------------------------------------------------------------ */

.cpp-app .cpp-name-results > header {
	display: grid;
	gap: 4px;
	margin-bottom: 18px;
}

.cpp-app .cpp-name-results > header :where(h2, p) {
	margin: 0;
}

html body .cpp-app.cpp-app .cpp-carrier-result {
	position: relative;
	display: grid;
	align-items: stretch;
	gap: 18px;
	grid-template-columns: minmax(190px, 1.35fr) minmax(350px, 1fr) auto;
	padding: clamp(20px, 2.6vw, 28px);
	overflow: hidden;
	border: 1px solid var(--cpp-saas-line);
	border-radius: 18px;
	background: linear-gradient(140deg, #fff 0%, #fff 67%, #f8fafb 100%);
	box-shadow: 0 10px 32px rgba(15, 31, 49, 0.06);
}

html body .cpp-app.cpp-app .cpp-carrier-result::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: var(--cpp-saas-orange);
	content: "";
}

html body .cpp-app.cpp-app .cpp-carrier-result:hover {
	border-color: var(--cpp-saas-line-strong);
	box-shadow: 0 18px 44px rgba(15, 31, 49, 0.1);
	transform: translateY(-1px);
}

.cpp-app .cpp-carrier-result__main {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
}

.cpp-app .cpp-carrier-result__source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin-bottom: 8px;
}

.cpp-app .cpp-carrier-result__source span {
	padding: 3px 7px;
	border-radius: 5px;
	background: #16243a;
	color: #fff;
	font-size: 0.57rem;
	font-weight: 850;
	letter-spacing: 0.1em;
}

.cpp-app .cpp-carrier-result__source strong {
	color: var(--cpp-saas-orange-dark);
	font-size: 0.7rem;
	letter-spacing: 0.09em;
}

html body .cpp-app.cpp-app .cpp-carrier-result__main h3 {
	margin: 0 0 7px;
	color: var(--cpp-saas-ink);
	font-size: clamp(1.05rem, 1.65vw, 1.36rem);
	line-height: 1.18;
	letter-spacing: -0.025em;
	text-transform: none;
}

.cpp-app .cpp-carrier-result__sub,
.cpp-app .cpp-carrier-result__address {
	margin: 0;
	color: var(--cpp-saas-muted);
	font-size: 0.78rem;
	line-height: 1.5;
}

.cpp-app .cpp-carrier-result__sub span {
	margin-right: 6px;
	color: #39495b;
	font-size: 0.64rem;
	font-weight: 850;
	letter-spacing: 0.08em;
}

html body .cpp-app.cpp-app .cpp-carrier-result__status {
	display: grid;
	align-items: stretch;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
}

html body .cpp-app.cpp-app .cpp-carrier-result__status > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	gap: 9px;
	padding: 13px;
	border: 1px solid #e1e7ec;
	border-radius: 12px;
	background: rgba(247, 249, 251, 0.92);
}

.cpp-app .cpp-carrier-result__status dt {
	color: #657487;
	font-size: 0.58rem;
	font-weight: 850;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.cpp-app .cpp-carrier-result__status dd {
	display: flex;
	margin: 0;
}

html body .cpp-app.cpp-app .cpp-carrier-result__status .cpp-chip {
	display: inline-flex;
	width: 100%;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	gap: 7px;
	overflow: hidden;
	white-space: normal !important;
	text-overflow: clip;
	overflow-wrap: anywhere !important;
	word-break: normal !important;
	line-height: 1.2;
	text-align: center;
}

.cpp-app .cpp-carrier-result__action {
	display: flex;
	align-items: center;
}

html body .cpp-app.cpp-app .cpp-carrier-result__action .cpp-button {
	min-height: 46px;
	padding-inline: 18px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * One checkbox, one check mark
 * ------------------------------------------------------------------ */

html body .cpp-app.cpp-app :where(.cpp-check, .cpp-checkbox, #loginform .login-remember label) {
	display: grid;
	align-items: start;
	gap: 10px;
	grid-template-columns: 18px minmax(0, 1fr);
}

html body .cpp-app.cpp-app :where(.cpp-check, .cpp-checkbox, #loginform .login-remember label) > input[type="checkbox"] {
	position: relative !important;
	display: block !important;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	border: 1.5px solid #b9c5cf !important;
	border-radius: 5px !important;
	outline-offset: 3px;
	background: #fff !important;
	background-image: none !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	transform: none !important;
	translate: none !important;
}

html body .cpp-app.cpp-app :where(.cpp-check, .cpp-checkbox, #loginform .login-remember label) > input[type="checkbox"]::before {
	display: none !important;
	content: none !important;
}

html body .cpp-app.cpp-app :where(.cpp-check, .cpp-checkbox, #loginform .login-remember label) > input[type="checkbox"]::after {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: block !important;
	width: 8px !important;
	height: 4px !important;
	margin: 0 !important;
	border: solid #fff !important;
	border-width: 0 0 2px 2px !important;
	background: transparent !important;
	content: "" !important;
	opacity: 0;
	transform: translate(-50%, -62%) rotate(-45deg) !important;
	transition: opacity 100ms ease;
}

html body .cpp-app.cpp-app :where(.cpp-check, .cpp-checkbox, #loginform .login-remember label) > input[type="checkbox"]:checked {
	border-color: var(--cpp-saas-orange-dark) !important;
	background: var(--cpp-saas-orange-dark) !important;
	background-image: none !important;
}

html body .cpp-app.cpp-app :where(.cpp-check, .cpp-checkbox, #loginform .login-remember label) > input[type="checkbox"]:checked::after {
	opacity: 1;
}

html body .cpp-app.cpp-app :where(.cpp-check, .cpp-checkbox) > .cpp-field-error {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	grid-column: 2 / -1;
	overflow-wrap: anywhere;
}

/* Fixed U.S. phone control. */
html body .cpp-app.cpp-app .cpp-phone-field {
	align-self: start;
	align-content: start;
}

html body .cpp-app.cpp-app .cpp-phone-control {
	display: grid;
	overflow: hidden;
	height: 44px;
	min-width: 0;
	min-height: 44px;
	max-height: 44px;
	align-self: start;
	align-items: stretch;
	grid-template-columns: auto minmax(0, 1fr);
	border: 1px solid #c8d1da;
	border-radius: 14px;
	background: #fff;
	transition: border-color 140ms ease, box-shadow 140ms ease;
}

html body .cpp-app.cpp-app .cpp-phone-control:focus-within {
	border-color: var(--cpp-saas-orange);
	box-shadow: 0 0 0 3px rgba(238, 111, 70, 0.16);
}

html body .cpp-app.cpp-app .cpp-phone-prefix {
	display: inline-flex;
	height: 100%;
	min-width: 82px;
	min-height: 0;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 14px;
	border-right: 1px solid #d9e0e6;
	color: #1d2938;
	font-size: 0.9rem;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

html body .cpp-app.cpp-app .cpp-us-flag {
	display: block;
	width: 25px;
	height: 18px;
	flex: 0 0 25px;
	border-radius: 3px;
	background: #fff url("../images/flag-us.svg") center / cover no-repeat;
	box-shadow: 0 0 0 1px rgba(23, 35, 49, 0.12);
}

html body .cpp-app.cpp-app .cpp-phone-control > input {
	width: 100%;
	height: 100% !important;
	min-width: 0;
	min-height: 0 !important;
	max-height: 100% !important;
	margin: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body .cpp-app.cpp-app .cpp-phone-field.is-invalid .cpp-phone-control {
	border-color: #bf2f28;
	box-shadow: 0 0 0 3px rgba(191, 47, 40, 0.12);
}

html body .cpp-app.cpp-app .cpp-honeypot {
	position: absolute !important;
	left: -10000px !important;
	display: none !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Theme resets may add their own bullets or check marks. Keep one portal marker. */
html body .cpp-app.cpp-app :where(.cpp-setup-steps, .cpp-password-checklist, .cpp-login-story-content ul) {
	padding-inline-start: 0 !important;
	list-style: none !important;
}

html body .cpp-app.cpp-app :where(.cpp-setup-steps, .cpp-password-checklist, .cpp-login-story-content ul) > li {
	list-style: none !important;
}

html body .cpp-app.cpp-app :where(.cpp-setup-steps, .cpp-password-checklist, .cpp-login-story-content ul) > li::marker,
html body .cpp-app.cpp-app :where(.cpp-setup-steps, .cpp-password-checklist, .cpp-login-story-content ul) > li::before,
html body .cpp-app.cpp-app :where(.cpp-setup-steps, .cpp-password-checklist, .cpp-login-story-content ul) > li::after {
	display: none !important;
	content: none !important;
}

/*
 * The portal draws its own tick inside a badge element. A theme that also
 * decorates "success" text or list items produced two check marks side by
 * side — one bare, one badged — on the sign-in story panel and on the
 * invitation-accepted card. The badge is the marker; suppress the rest.
 */
html body .cpp-app.cpp-app .cpp-step-check::before,
html body .cpp-app.cpp-app .cpp-step-check::after,
html body .cpp-app.cpp-app .cpp-password-tick::before,
html body .cpp-app.cpp-app .cpp-success-mark::before,
html body .cpp-app.cpp-app .cpp-success-mark::after,
html body .cpp-app.cpp-app .cpp-login-welcome-mark::before,
html body .cpp-app.cpp-app .cpp-login-welcome-mark::after,
html body .cpp-app.cpp-app .cpp-login-story-content li > span::before,
html body .cpp-app.cpp-app .cpp-login-story-content li > span::after {
	display: none !important;
	content: none !important;
}

/* ---------------------------------------------------------------------
 * Immersive authentication shell
 * ------------------------------------------------------------------ */

html body .cpp-app.cpp-login {
	position: relative;
	isolation: isolate;
	display: block;
	min-height: 100dvh;
	padding: clamp(18px, 3vw, 42px);
	overflow: visible;
	border: 0;
	border-radius: 0;
	/* Dark fallback only: the photograph is painted by .cpp-login-backdrop,
	   which sits behind this shell. Keeping a solid colour here means the
	   panel never flashes white before the image decodes. */
	background: #101a28;
	box-shadow: none;
}

.cpp-app.cpp-login .cpp-login-backdrop {
	position: fixed;
	z-index: -2;
	inset: 0;
	background:
		linear-gradient(105deg, rgba(8, 18, 32, 0.86) 0%, rgba(8, 18, 32, 0.7) 44%, rgba(8, 18, 32, 0.5) 100%),
		url("../images/overhead-carrier-partner.jpg") center center / cover no-repeat;
	transform: translateZ(0);
}

.cpp-app.cpp-login .cpp-login-backdrop::after {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 15% 12%, rgba(239, 114, 73, 0.2), transparent 27%),
		linear-gradient(180deg, transparent 65%, rgba(4, 10, 18, 0.4));
	content: "";
}

html body .cpp-app.cpp-login .cpp-login-shell {
	position: relative;
	z-index: 2;
	display: grid;
	width: min(100%, var(--cpp-auth-shell));
	min-height: calc(100dvh - clamp(36px, 6vw, 84px));
	grid-template-columns: minmax(300px, 1fr) minmax(480px, var(--cpp-auth-panel));
	margin: 0 auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 28px;
	background: rgba(9, 20, 34, 0.58);
	box-shadow: 0 36px 120px rgba(2, 8, 17, 0.5);
	backdrop-filter: blur(18px);
}

html body .cpp-app.cpp-login.is-wide .cpp-login-shell,
html body .cpp-app.cpp-login.is-invite-flow .cpp-login-shell {
	grid-template-columns: minmax(280px, 0.72fr) minmax(650px, 1.45fr);
}

.cpp-app .cpp-login-story {
	display: flex;
	min-width: 0;
	flex-direction: column;
	justify-content: space-between;
	padding: clamp(34px, 5vw, 76px);
	color: #fff;
}

.cpp-app .cpp-login-story-brand {
	display: inline-flex;
	width: max-content;
	max-width: 210px;
	padding: 13px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 12px 34px rgba(4, 10, 18, 0.18);
}

.cpp-app .cpp-login-story-brand .cpp-brand-logo {
	display: block;
	width: 170px;
	max-width: 100%;
	height: auto;
}

.cpp-app .cpp-login-story-content {
	max-width: 620px;
	margin-block: clamp(48px, 10vh, 130px);
}

.cpp-app .cpp-login-story-content .cpp-eyebrow {
	color: #ffb9a1;
}

html body .cpp-app.cpp-app .cpp-login-story-content h2 {
	margin: 14px 0 20px;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	font-size: clamp(2rem, 3.5vw, 4.4rem) !important;
	line-height: 1 !important;
	letter-spacing: -0.055em !important;
	text-transform: none !important;
	text-wrap: balance;
}

.cpp-app .cpp-login-story-content > p:last-of-type {
	max-width: 54ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.96rem;
	line-height: 1.75;
}

.cpp-app .cpp-login-story-content ul {
	display: grid;
	gap: 18px;
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * Align the badge to the first line rather than the centre of the row. A
 * point long enough to wrap used to push its tick halfway down the block,
 * which read as a stray mark floating beside the text.
 */
.cpp-app .cpp-login-story-content li {
	display: grid;
	align-items: start;
	gap: 13px;
	grid-template-columns: 24px minmax(0, 1fr);
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.82rem;
	line-height: 1.6;
}

.cpp-app .cpp-login-story-content li > span {
	display: grid;
	width: 24px;
	height: 24px;
	place-items: center;
	border-radius: 50%;
	background: rgba(239, 114, 73, 0.2);
	color: #ff9e7d;
	font-size: 0.68rem;
	font-weight: 850;
	line-height: 1;
}

.cpp-app .cpp-login-story-foot {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: rgba(255, 255, 255, 0.56);
	font-size: 0.68rem;
	line-height: 1.5;
}

.cpp-app .cpp-login-story-foot > span {
	color: #63d49c;
	font-size: 0.58rem;
}

html body .cpp-app.cpp-login .cpp-login-panel {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	max-width: none;
	min-width: 0;
	min-height: 100%;
	flex: none;
	flex-basis: auto;
	flex-direction: column;
	padding: clamp(28px, 4vw, 54px);
	border: 0;
	border-radius: 0;
	background: #fff;
	box-shadow: -18px 0 54px rgba(5, 14, 25, 0.12);
	transition: none;
}

html body .cpp-app.cpp-login.is-wide .cpp-login-panel {
	width: 100%;
	max-width: none;
	flex-basis: auto;
	padding: clamp(30px, 4vw, 58px);
}

.cpp-app .cpp-login-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 clamp(34px, 5vh, 58px);
}

.cpp-app .cpp-login-toolbar > .cpp-brand {
	display: none;
}

.cpp-app .cpp-login-toolbar-actions {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.cpp-app .cpp-login-toolbar .cpp-secure-label {
	flex: 0 0 auto;
}

html body .cpp-app.cpp-login .cpp-login-form,
html body .cpp-app.cpp-login [data-cpp-invite]:not(:empty),
html body .cpp-app.cpp-login [data-portal-auth-step]:not(:empty),
html body .cpp-app.cpp-login [data-password-recovery]:not(:empty) {
	width: 100%;
	max-width: none;
	margin: auto;
}

html body .cpp-app.cpp-login .cpp-login-form {
	max-width: 470px;
}

html body .cpp-app.cpp-login .cpp-login-head h1 {
	margin: 6px 0 10px;
	color: var(--cpp-saas-ink);
	font-size: clamp(2.25rem, 4vw, 3.65rem);
	line-height: 0.98;
	letter-spacing: -0.055em;
	text-transform: none;
}

.cpp-app.cpp-login .cpp-login-head > p:last-child {
	font-size: 0.9rem;
	line-height: 1.65;
}

.cpp-app.cpp-login .cpp-login-fields {
	gap: 17px;
}

.cpp-app.cpp-login .cpp-login-foot {
	max-width: 470px;
	margin-inline: auto;
}

.cpp-app.cpp-login .cpp-login-backdrop-label {
	display: none;
}

.cpp-app .cpp-invite-card {
	width: 100%;
	max-width: 900px;
	margin: auto;
}

.cpp-app .cpp-invite-head {
	display: grid;
	gap: 9px;
	max-width: 720px;
	margin-bottom: 28px;
}

.cpp-app .cpp-invite-head :where(p, h1) {
	margin: 0;
}

html body .cpp-app.cpp-app .cpp-invite-head h1 {
	color: var(--cpp-saas-ink);
	font-size: clamp(2.15rem, 4vw, 4.35rem) !important;
	line-height: 0.98 !important;
	letter-spacing: -0.055em !important;
	text-transform: none !important;
	text-wrap: balance;
}

.cpp-app .cpp-invite-head > p:last-child {
	max-width: 66ch;
	color: var(--cpp-saas-muted);
	font-size: 0.9rem;
	line-height: 1.65;
}

.cpp-app .cpp-invite-card form {
	display: grid;
	gap: 18px;
}

html body .cpp-app.cpp-login .cpp-password-layout {
	display: grid;
	align-items: start;
	gap: 24px;
	grid-template-columns: minmax(280px, 1fr) minmax(320px, 0.92fr);
}

.cpp-app .cpp-password-layout > div:first-child {
	display: grid;
	gap: 16px;
}

html body .cpp-app.cpp-app .cpp-auth-step {
	width: 100%;
	max-width: 920px;
	margin: auto;
}

/* Three equal centers, with a connector behind the marks. */
html body .cpp-app.cpp-app .cpp-auth-flow {
	position: relative;
	display: grid;
	align-items: start;
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 34px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--cpp-saas-line);
	list-style: none;
}

.cpp-app .cpp-auth-flow::before {
	position: absolute;
	top: 14px;
	left: 16.666%;
	width: 66.666%;
	height: 2px;
	background: #dfe5e9;
	content: "";
}

html body .cpp-app.cpp-app .cpp-auth-flow li {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 9px;
	margin: 0;
	color: #8a96a3;
	font-size: 0.76rem;
	font-weight: 750;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
}

html body .cpp-app.cpp-app .cpp-auth-flow-mark {
	display: grid;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 1.5px solid #c9d2d9;
	border-radius: 50%;
	background: #fff;
	color: #7a8794;
	font-size: 0.7rem;
	font-weight: 850;
	box-shadow: 0 0 0 6px #fff;
}

.cpp-app .cpp-auth-flow li.is-current .cpp-auth-flow-mark {
	border-color: var(--cpp-saas-orange);
	background: var(--cpp-saas-orange);
	color: #14191e;
}

.cpp-app .cpp-auth-flow li.is-done .cpp-auth-flow-mark {
	border-color: var(--cpp-saas-green);
	background: var(--cpp-saas-green);
	color: #fff;
}

.cpp-app .cpp-auth-flow li.is-current {
	color: var(--cpp-saas-ink);
}

.cpp-app .cpp-auth-flow li.is-done {
	color: var(--cpp-saas-green);
}

html body .cpp-app.cpp-app .cpp-auth-head h2,
html body .cpp-app.cpp-app .cpp-auth-step > h2 {
	margin: 7px 0 0;
	color: var(--cpp-saas-ink);
	font-size: clamp(1.8rem, 3vw, 3.1rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.045em !important;
	text-transform: none !important;
	text-wrap: balance;
}

.cpp-app .cpp-auth-lede {
	max-width: 70ch;
	color: var(--cpp-saas-muted);
	font-size: 0.92rem;
	line-height: 1.65;
}

/* Eight codes always resolve to complete, equal rows. */
html body .cpp-app.cpp-app .cpp-recovery-codes {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 58px;
	margin: 24px 0;
	padding: 18px;
	border: 1px solid var(--cpp-saas-line);
	border-radius: 16px;
	background: var(--cpp-saas-soft);
}

html body .cpp-app.cpp-app .cpp-recovery-codes code {
	display: grid;
	width: 100%;
	height: 58px !important;
	min-height: 58px;
	place-items: center;
	padding: 0 12px;
	border: 1px solid var(--cpp-saas-line);
	border-radius: 10px;
	background: #fff;
	color: var(--cpp-saas-ink);
	font-size: 0.84rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.cpp-app .cpp-recovery-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------------------------------------------------------------------
 * Upload progress and expiration policy
 * ------------------------------------------------------------------ */

html body .cpp-app.cpp-app .cpp-upload-progress {
	position: relative;
	display: grid;
	width: 100%;
	height: auto;
	min-height: 0;
	gap: 11px;
	margin: 16px 0 0;
	padding: 15px 16px;
	overflow: hidden;
	border: 1px solid #d7e0e6;
	border-left: 4px solid var(--cpp-saas-orange);
	border-radius: 12px;
	background: #f7f9fa;
	color: var(--cpp-saas-ink);
}

html body .cpp-app.cpp-app .cpp-upload-progress[hidden] {
	display: none;
}

html body .cpp-app.cpp-app .cpp-upload-progress-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

html body .cpp-app.cpp-app .cpp-upload-progress-head strong {
	display: block;
	min-width: 0;
	color: var(--cpp-saas-ink);
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.35;
}

html body .cpp-app.cpp-app .cpp-upload-progress-head small {
	position: static !important;
	display: block;
	flex: 0 0 auto;
	margin: 0;
	color: var(--cpp-saas-orange-dark);
	font-size: 0.75rem;
	font-weight: 850;
	line-height: 1.35;
	white-space: nowrap;
}

html body .cpp-app.cpp-app .cpp-upload-track {
	position: relative;
	display: block;
	width: 100%;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #dfe6eb;
}

html body .cpp-app.cpp-app .cpp-upload-track > i {
	position: static;
	display: block;
	width: var(--cpp-upload-progress, 0%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #dd542c, #f58a64);
	box-shadow: 0 0 14px rgba(239, 114, 73, 0.3);
	transition: width 180ms ease;
}

html body .cpp-app.cpp-app .cpp-upload-progress > small {
	position: static !important;
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	color: var(--cpp-saas-muted);
	font-size: 0.72rem;
	line-height: 1.5;
	white-space: normal;
}

.cpp-app .cpp-upload-progress.is-indeterminate .cpp-upload-track > i {
	width: 36%;
	animation: cpp-saas-upload 1.15s ease-in-out infinite;
}

@keyframes cpp-saas-upload {
	0% { transform: translateX(-120%); }
	100% { transform: translateX(330%); }
}

.cpp-app .cpp-field-requirement {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin-left: auto;
	padding: 3px 7px;
	border: 1px solid #f0baa7;
	border-radius: 999px;
	background: var(--cpp-saas-orange-soft);
	color: var(--cpp-saas-orange-dark);
	font-size: 0.58rem;
	font-weight: 850;
	letter-spacing: 0.035em;
	line-height: 1;
	text-transform: uppercase;
	vertical-align: middle;
}

.cpp-app .cpp-field-requirement.is-optional {
	border-color: #d8e0e6;
	background: #f4f6f8;
	color: #6a7886;
}

.cpp-app .cpp-expiration-field .cpp-form-note {
	margin-top: 7px;
}

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

@media (max-width: 1120px) {
	html body .cpp-app.cpp-application .cpp-onboarding-layout {
		grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr);
	}

	html body .cpp-app.cpp-application .cpp-onboarding-aside {
		padding-inline: 28px;
	}

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

	.cpp-app .cpp-carrier-result__action {
		grid-column: auto;
		justify-content: stretch;
		padding-top: 4px;
	}

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

@media (max-width: 960px) {
	html body .cpp-app.cpp-application .cpp-onboarding-layout {
		display: block;
	}

	html body .cpp-app.cpp-application .cpp-onboarding-aside {
		min-height: 0;
		padding-block: 38px;
		border-right: 0;
	}

	html body .cpp-app.cpp-application .cpp-onboarding-intro h1 {
		max-width: 760px;
		font-size: clamp(2rem, 7vw, 3.6rem);
	}

	html body .cpp-app.cpp-application .cpp-onboarding-step-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		margin-top: 30px;
	}

	html body .cpp-app.cpp-application .cpp-onboarding-step-list article {
		display: grid;
		min-height: 0;
		justify-items: center;
		gap: 8px;
		grid-template-columns: minmax(0, 1fr);
		padding: 12px 8px;
		text-align: center;
	}

	html body .cpp-app.cpp-application .cpp-onboarding-step-list article small {
		display: none;
	}

	html body .cpp-app.cpp-application .cpp-onboarding-reassure {
		display: none;
	}

	html body .cpp-app.cpp-login {
		padding: 0;
	}

	html body .cpp-app.cpp-login .cpp-login-shell,
	html body .cpp-app.cpp-login.is-wide .cpp-login-shell,
	html body .cpp-app.cpp-login.is-invite-flow .cpp-login-shell {
		width: 100%;
		min-height: 100dvh;
		grid-template-columns: minmax(0, 1fr);
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.cpp-app .cpp-login-story {
		display: none;
	}

	html body .cpp-app.cpp-login .cpp-login-panel {
		min-height: 100dvh;
		padding: clamp(24px, 6vw, 52px);
	}

	.cpp-app .cpp-login-toolbar > .cpp-brand {
		display: block;
	}

	.cpp-app .cpp-login-toolbar > .cpp-brand .cpp-brand-logo {
		display: block;
		width: 145px;
	}

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

	.cpp-app .cpp-login-toolbar-actions .cpp-secure-label {
		display: none;
	}
}

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

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

	.cpp-app .cpp-carrier-result__action {
		grid-column: auto;
	}

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

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

@media (max-width: 680px) {
	html body .cpp-app.cpp-application .cpp-app-header {
		min-height: 66px;
		padding: 10px 16px;
	}

	.cpp-app .cpp-application-brand-copy,
	.cpp-app.cpp-application .cpp-secure-label {
		display: none;
	}

	.cpp-app .cpp-application-brand .cpp-brand-logo {
		width: 134px;
	}

	html body .cpp-app.cpp-application .cpp-onboarding-main {
		padding: 22px 14px 58px;
	}

	html body .cpp-app.cpp-application .cpp-pipeline {
		padding: 18px 14px;
		border-radius: 16px;
	}

	.cpp-app .cpp-pipeline-head {
		align-items: flex-start;
	}

	.cpp-app .cpp-pipeline-percent small,
	.cpp-app .cpp-pipeline-text small {
		display: none;
	}

	html body .cpp-app.cpp-app .cpp-pipeline-stage {
		padding-inline: 3px;
	}

	.cpp-app .cpp-pipeline-text strong {
		font-size: 0.66rem;
	}

	html body .cpp-app.cpp-application .cpp-onboarding-card {
		border-radius: 17px;
	}

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

	.cpp-app .cpp-login-toolbar {
		margin-bottom: 34px;
	}

	.cpp-app .cpp-login-toolbar-actions .cpp-language-switcher {
		min-width: 0;
	}

	html body .cpp-app.cpp-app .cpp-invite-head h1,
	html body .cpp-app.cpp-app .cpp-auth-head h2,
	html body .cpp-app.cpp-app .cpp-auth-step > h2 {
		font-size: clamp(1.85rem, 10vw, 2.7rem);
	}

	.cpp-app .cpp-recovery-actions {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.cpp-app .cpp-recovery-actions .cpp-button {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 520px) {
	html body .cpp-app.cpp-application .cpp-onboarding-aside {
		padding: 30px 18px;
	}

	html body .cpp-app.cpp-application .cpp-onboarding-step-list article strong {
		font-size: 0.68rem;
	}

	html body .cpp-app.cpp-login .cpp-login-panel,
	html body .cpp-app.cpp-login.is-wide .cpp-login-panel {
		padding: 22px 17px 34px;
	}

	.cpp-app .cpp-login-toolbar > .cpp-brand .cpp-brand-logo {
		width: 124px;
	}

	.cpp-app .cpp-login-row {
		align-items: flex-start;
	}

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

	.cpp-app .cpp-auth-flow li {
		font-size: 0.66rem;
	}

	html body .cpp-app.cpp-app .cpp-upload-progress-head {
		gap: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpp-app .cpp-pipeline-meter > span,
	.cpp-app .cpp-pipeline-rail-fill,
	.cpp-app .cpp-pipeline-dot,
	.cpp-app .cpp-upload-progress.is-indeterminate .cpp-upload-track > i {
		animation: none !important;
		transition: none !important;
	}
}