html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
				font-family: arial;
				color: rgb(87, 87, 87);
			}

			@keyframes fadeItRed {
				30% {
					background-color: red;
				}

				31% {
					background-color: white;
				}
			}

			.fade-bg-warning {
				background-image: none !important;
				animation: fadeItRed 1s ease-in-out;
			}

			.button-row {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex-direction: row;
				width: 100%;
				background-color: #000;
				color: #fff;
			}

			.action-button {
				padding: 8px 20px;
				border: none;
				color: white;
				background-color: #000;
				height: 50px;
				cursor: pointer;
				font-size: 1em;
			}

			.capture-button {
				background: #23316c;
				padding: 8px 20px;
				outline: none;
				border-radius: 26px;
				color: white;
			}

			.h1 {
				font-size: 1.8em;
				margin: 0.67em 0;
			}

			.h2 {
				font-size: 1.5em;
				margin: 0.83em 0;
			}

			.h3 {
				font-size: 1.17em;
				margin: 1em 0;
			}

			.row {
				display: block;
				margin-top: 24px;
				margin-bottom: 5px;
			}

			ul {
				list-style: none;
				text-align: left;
				width: 300px;
				margin-left: auto;
				margin-right: auto;
			}

			#uiContainer {
				padding: 8px 16px;
				text-align: center;
			}

			#uiContainer select {
				width: 260px;
			}

			select {
				height: 3em;
			}

			#misnapError {
				margin-top: 15px;
				font-size: 14pt;
				font-family: arial;
				color: red;
			}

			#misnapWarning {
				margin-top: 15px;
				font-size: 14pt;
				font-family: arial;
				color: red;
			}

			#capturedVideo {
				width: 80%;
				display: none;
			}

			#integratorDocTypeInput {
				padding: 4px;
			}

			.loader-wrap {
				position: fixed;
				width: 50px;
				height: 50px;
				top: 50%;
				left: 50%;
				margin-left: -60px;
				margin-top: -60px;
				display: none;
			}

			.loader {
				border: 16px solid #f3f3f3;
				/* Light grey */
				border-top: 16px solid #3498db;
				border-bottom: 16px solid #3498db;
				/* Blue */
				border-radius: 50%;
				width: 50px;
				height: 50px;
				animation: spin 2s linear infinite;
			}

			.loader-content-wrapper {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				/* justify-content: center; */
				padding: 40px 0;
				gap: 10px;
				z-index: 9999;
				width: 100%;
				position: absolute;
				background: #fff;
				height: 100%;
			}

			.api-loader {
				border: 5px solid #f3f3f3;
				border-top: 5px solid #0a508c;
				border-bottom: 5px solid #0a508c;
				border-radius: 50%;
				width: 15px;
				height: 15px;
				animation: spin 2s linear infinite;
			}

			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			.result-data {
				width: 80%;
				height: 200px;
			}

			.version {
				font-size: smaller;
				position: absolute;
				top: 0px;
				right: 0px;
				color: gray;
			}

			.image-holder {
				border: 1px solid gray;
				margin-bottom: 5px;
				width: 80%;
				padding: 5px;
			}

			.image-hoder.title {
				display: block;
			}

			.image-holder img {
				width: 80%;
				text-align: center;
			}

			.hidden-element {
				display: none;
			}

			/*end sample page css*/

			/* (Example) optional override the default size of hint message levels */
			div#mitekHintMessage.small {
				font-size: 1.2em;
			}

			div#mitekHintMessage.medium {
				font-size: 1.7em;
			}

			div#mitekHintMessage.large {
				font-size: 2.2em;
			}

			#failedResultImage {
				border: 1px dashed red;
			}

			#demoCancelButton {
				border-radius: 50%;
				padding: 0.5em;
				width: 30px;
				height: 30px;
				border: 2px solid rgb(31, 31, 31);
				color: rgb(31, 31, 31);
				position: absolute;
				right: 25px;
				top: 25px;
				z-index: 100;
			}

			#demoCancelButton::before {
				content: " ";
				position: absolute;
				display: block;
				background-color: rgb(31, 31, 31);
				width: 2px;
				left: 12px;
				top: 5px;
				bottom: 5px;
				transform: rotate(45deg);
			}

			#demoCancelButton:hover {
				border: 2px solid rgb(31, 31, 31);
				background-color: rgb(192, 192, 192);
				color: #ffffff;
			}

			#demoCancelButton::after {
				content: " ";
				position: absolute;
				display: block;
				background-color: rgb(31, 31, 31);
				height: 2px;
				top: 12px;
				left: 5px;
				right: 5px;
				transform: rotate(45deg);
			}

			#hide {
				display: none;
			}

			.errorMessageWrapper {
				font-size: 1.2em;
				text-align: center;
				padding: 24px;
			}

			.header-container {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 36px;
				height: 64px;
			}

			.logo {
				width: 64px;
				height: 64px;
				object-fit: contain;
			}

			.title {
				font-size: 2em;
				margin-left: 10px;
				color: rgb(138, 187, 69);
				height: 64px;
				line-height: 64px;
			}

			.header {
				font-size: 1.2em;
				margin: 15px 0 8px 0;
				text-align: center;
			}

			.header-success-message {
				font-size: 1em;
				color: #0a508c;
				margin: 15px 0;
				text-align: center;
			}

			.instructions {
				font-size: 0.9em;
				margin: 5px 0;
				padding: 0 10px;
				text-align: center;
			}

			.instructions-list {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				width: 100%;
			}

			.instructions-list-ul {
				list-style: none;
				padding: 0;
				margin: 8px auto;
				/* text-align: center; */
				/* white-space: pre; */
				/* width: 100%; */
				/* display: flex; */
				/* flex-direction: column; */
				/* max-width: 600px;  */
			}

			.instruction-list-item {
				font-size: 0.9em !important;
				margin: 5px 0;
				padding: 0 30px;
				position: relative;
				display: block;
				text-align: left;
				/* white-space: normal;  */
				/* overflow: visible;    */
				/* text-overflow: unset;  */
				width: 100%;
				/* display: flex; */
				/* align-items: center; */
				box-sizing: border-box;
				line-height: 1.4;
			}

			.instruction-list-item::before {
				content: "➜";
				color: red;
				position: absolute;
				left: 10px;
				font-size: 1.2em;
				top: 50%;
				/* Center the arrow vertically */
				transform: translateY(-50%);
			}

			.success-instructions {
				padding-top: 40px;
				gap: 8px;
			}

			/* #captureSuccess {
                text-align: center;
                width: 100%;
                height: 40px;
                margin-top: 12px;
            } */

			/* Add these styles for landscape orientation */
			@media screen and (orientation: portrait) {
				#mitekDisplayContainer {
					transform: rotate(-90deg);
					transform-origin: left top;
					width: 100vh;
					height: 100vw;
					position: absolute;
					top: 100%;
					left: 0;
				}

				#mitekHintMessage {
					transform: rotate(-90deg) !important;
					position: fixed !important;
					top: 50% !important;
					left: 50% !important;
					transform-origin: center !important;
					z-index: 9999 !important;
				}
			}

			#rotateMessage {
				position: fixed;
				inset: 0;
				width: 100%;
				height: 100%;
				height: 100dvh;
				background-color: var(--white);
				z-index: 10000;
				display: flex;
				flex-direction: column;
				align-items: stretch;
				justify-content: flex-start;
				overflow: hidden;
				font-family: "DM Sans", sans-serif;
			}

			#rotateMessage {
				--primary: #23408c;
				--primary-dark: #1a3068;
				--primary-lighter: #ecedf2;
				--accent-green: #8ab33c;
				--accent-green-dark: #6d9230;
				--accent-green-light: #e4f0d8;
				--gray-100: #f5f5f5;
				--gray-300: #e0e0e0;
				--gray-400: #bdbdbd;
				--gray-500: #9e9e9e;
				--gray-600: #757575;
				--gray-700: #616161;
				--gray-800: #424242;
				--gray-900: #212121;
				--white: #ffffff;
				--blue-deep: #23408c;
			}

			/* ZOCCAM "Paper Check" rotate screen (portrait) */
			#rotateMessage .phone-frame {
				width: 100%;
				max-width: 100vw;
				height: 100vh;
				height: 100dvh;
				background: var(--white);
				position: relative;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}

			#rotateMessage .header {
				background: linear-gradient(
					135deg,
					var(--accent-green) 0%,
					var(--accent-green-dark) 100%
				);
				margin: 0;
				padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
				flex-shrink: 0;
			}

			#rotateMessage .header-top {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}

			#rotateMessage .back-btn {
				position: absolute;
				left: 0;
				display: flex;
				align-items: center;
				gap: 3px;
				color: var(--white);
				font-size: 14px;
				font-weight: 500;
				cursor: default;
				background: none;
				border: none;
				font-family: inherit;
			}

			#rotateMessage .back-btn svg {
				width: 18px;
				height: 18px;
			}

			#rotateMessage .header-title {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 16px;
				font-weight: 700;
				color: var(--white);
			}

			#rotateMessage .video-section {
				width: 100%;
				height: 33vh;
				min-height: 180px;
				margin: 0;
				background: #000;
				flex-shrink: 0;
				overflow: hidden;
			}

			#rotateMessage .phone-rotate-video {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}

			#rotateMessage .content {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				padding: 20px 24px 12px;
				overflow-y: auto;
				min-height: 0;
				text-align: center;
			}

			#rotateMessage .rotate-title {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 22px;
				font-weight: 800;
				color: var(--gray-900);
				margin: 0 0 8px;
				line-height: 1.3;
			}

			#rotateMessage .rotate-subtitle {
				font-size: 15px;
				color: var(--gray-600);
				line-height: 1.5;
				margin: 0 0 20px;
				max-width: 300px;
			}

			#rotateMessage .status-indicator {
				display: flex;
				align-items: center;
				gap: 8px;
				padding: 10px 20px;
				border-radius: 24px;
				background: var(--primary-lighter);
				transition: all 0.4s ease;
				margin-bottom: 24px;
			}

			#rotateMessage .status-indicator.detected {
				background: var(--accent-green-light);
			}

			#rotateMessage .status-dot {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: var(--primary);
				animation: zoccamBlink 1.5s ease-in-out infinite;
			}

			#rotateMessage .status-indicator.detected .status-dot {
				background: var(--accent-green);
				animation: none;
			}

			@keyframes zoccamBlink {
				0%,
				100% {
					opacity: 1;
				}
				50% {
					opacity: 0.3;
				}
			}

			#rotateMessage .status-text {
				font-size: 13px;
				font-weight: 600;
				color: var(--primary);
			}

			#rotateMessage .status-indicator.detected .status-text {
				color: var(--accent-green-dark);
			}

			#rotateMessage .next-steps {
				width: 100%;
				max-width: 300px;
				text-align: left;
			}

			#rotateMessage .next-label {
				font-size: 10px;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: 0.08em;
				color: var(--gray-400);
				margin-bottom: 10px;
			}

			#rotateMessage .next-step-row {
				display: flex;
				align-items: flex-start;
				gap: 12px;
				padding: 6px 0;
			}

			#rotateMessage .next-step-num {
				width: 28px;
				height: 28px;
				border-radius: 50%;
				background: var(--gray-100);
				border: 1.5px solid var(--gray-300);
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 13px;
				font-weight: 700;
				color: var(--gray-500);
				flex-shrink: 0;
				margin-top: 1px;
			}

			#rotateMessage .next-step-text {
				font-size: 15px;
				color: var(--gray-700);
				line-height: 1.4;
				font-weight: 500;
				flex: 1;
			}

			#rotateMessage .footer {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
				gap: 7px;
				flex-shrink: 0;
				border-top: 1px solid var(--gray-300);
			}

			#rotateMessage .footer-logo {
				width: 24px;
				height: 24px;
				background: var(--blue-deep);
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--white);
				font-family: "Plus Jakarta Sans", sans-serif;
				font-weight: 800;
				font-size: 12px;
			}

			#rotateMessage .footer-text {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-weight: 700;
				font-size: 14px;
				color: var(--accent-green);
				letter-spacing: 0.05em;
			}

			#rotateMessage .success-overlay {
				position: absolute;
				inset: 0;
				background: rgba(255, 255, 255, 0.95);
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.4s ease;
				z-index: 10;
			}

			#rotateMessage .success-overlay.show {
				opacity: 1;
				pointer-events: all;
			}

			#rotateMessage .success-check {
				width: 64px;
				height: 64px;
				border-radius: 50%;
				background: var(--accent-green);
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20px;
				animation: zoccamPopIn 0.4s ease both;
			}

			#rotateMessage .success-check svg {
				width: 32px;
				height: 32px;
				color: var(--white);
			}

			@keyframes zoccamPopIn {
				0% {
					transform: scale(0);
				}
				70% {
					transform: scale(1.15);
				}
				100% {
					transform: scale(1);
				}
			}

			#rotateMessage .success-text {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 20px;
				font-weight: 700;
				color: var(--gray-900);
				margin-bottom: 8px;
			}

			#rotateMessage .success-subtext {
				font-size: 14px;
				color: var(--gray-600);
			}

			.rotate-content {
				padding: 20px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.rotate-image {
				padding: 10px;
				height: 80px;
				width: 80px;
				margin-right: 12px;
			}

			.rotate-icon {
				font-size: 48px;
				animation: rotate 2s infinite linear;
				margin-bottom: 20px;
			}

			.rotate-text {
				font-size: 1.2em;
				margin-bottom: 10px;
				display: flex;
				align-items: center;
			}

			.rotate-video-container {
				margin-top: 30px;
				width: 100%;
				max-width: 560px;
				position: relative;
			}

			.rotate-video {
				width: 100%;
				height: 315px;
				max-width: 560px;
				border-radius: 8px;
				background-color: #000;
				display: block;
			}

			.rotate-video-fallback {
				display: none;
				width: 100%;
				max-width: 560px;
				margin-top: 20px;
				text-align: center;
			}

			.rotate-video-fallback-link {
				display: inline-block;
				padding: 12px 24px;
				background-color: #ff0000;
				color: white;
				text-decoration: none;
				border-radius: 8px;
				font-size: 1em;
				font-weight: bold;
			}

			.rotate-video-fallback-link:hover {
				background-color: #cc0000;
			}

			.rotate-video-thumbnail {
				width: 100%;
				max-width: 560px;
				height: 315px;
				border-radius: 8px;
				cursor: pointer;
				display: none;
				position: relative;
				background-color: #000;
				background-size: cover;
				background-position: center;
			}

			.rotate-video-thumbnail::after {
				content: "▶";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				font-size: 60px;
				color: white;
				text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
			}

			.rotate-video-text {
				font-size: 16px;
				font-weight: bolder;
			}
			.rotate-header {
				margin: 20px;
				text-align: center;
			}
			.rotate-video-section {
				margin-top: 30px;
				text-align: center;
			}

			.rotate-video-button {
				background-color: #23316ce6;
				color: white;
				border: none;
				font-size: 12px;
				font-weight: bold;
				padding: 10px 12px;
				border-radius: 4px;
				margin-top: 10px;
			}

			#successResultImage {
				width: 100%;
				height: auto;
				aspect-ratio: 2.83 / 1; /* Standard US check aspect ratio (width:height) */
				object-fit: contain; /* Ensures the image fits within the aspect ratio without cropping */
			}

			/* Capture instructions (CHECK_FRONT / CHECK_BACK) — ZOCCAM layout */
			#contentWrapper {
				flex-direction: column;
				box-sizing: border-box;
				min-height: 100dvh;
				max-height: 100dvh;
				overflow: hidden;
				padding-bottom: env(safe-area-inset-bottom, 0px);
			}

			#contentWrapper .ci-capture-shell {
				flex: 1 1 auto;
				flex-direction: column;
				min-height: 0;
				font-family: "DM Sans", sans-serif;
				--ci-primary: #23408c;
				--ci-primary-dark: #1a3068;
				--ci-primary-lighter: #ecedf2;
				--ci-accent-green: #8ab33c;
				--ci-accent-green-dark: #6d9230;
				--ci-accent-green-light: #e4f0d8;
				--ci-gray-100: #f5f5f5;
				--ci-gray-200: #eeeeee;
				--ci-gray-300: #e0e0e0;
				--ci-gray-400: #bdbdbd;
				--ci-gray-500: #9e9e9e;
				--ci-gray-600: #757575;
				--ci-gray-700: #616161;
				--ci-gray-800: #424242;
				--ci-gray-900: #212121;
				--ci-white: #ffffff;
			}

			#contentWrapper .ci-capture-shell:not(.hidden-element) {
				display: flex;
			}

			#contentWrapper .ci-capture-shell .ci-landscape-frame {
				width: 100%;
				max-width: 100%;
				flex: 1 1 auto;
				min-height: 0;
				background: var(--ci-white);
				position: relative;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}

			#contentWrapper .ci-capture-shell .ci-top-bar {
				background: linear-gradient(
					135deg,
					var(--ci-accent-green) 0%,
					var(--ci-accent-green-dark) 100%
				);
				padding: 8px 24px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
			}

			#contentWrapper .ci-capture-shell .ci-top-bar-logo {
				display: flex;
				align-items: center;
				gap: 8px;
			}

			#contentWrapper .ci-capture-shell .ci-top-bar-logo-img {
				width: 22px;
				height: 22px;
				display: block;
				object-fit: contain;
				flex-shrink: 0;
			}

			#contentWrapper .ci-capture-shell .ci-top-bar-text {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-weight: 700;
				font-size: 14px;
				color: var(--ci-white);
				letter-spacing: 0.04em;
			}

			#contentWrapper .ci-capture-shell .ci-top-bar-divider {
				width: 1px;
				height: 16px;
				background: rgba(255, 255, 255, 0.35);
				margin: 0 12px;
			}

			#contentWrapper .ci-capture-shell .ci-top-bar-title {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 13px;
				font-weight: 600;
				color: rgba(255, 255, 255, 0.9);
			}

			#contentWrapper .ci-capture-shell .ci-main-content {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				align-content: center;
				padding: clamp(8px, 2.5vmin, 32px) clamp(12px, 3vmin, 32px);
				gap: clamp(10px, 3vmin, 36px);
				min-height: 0;
				overflow: hidden;
			}

			#contentWrapper .ci-capture-shell .ci-check-visual {
				flex: 0 1 auto;
				width: min(260px, 88vw, 70vmin);
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			#contentWrapper .ci-capture-shell .ci-check-card {
				width: min(240px, 100%, 65vmin);
				height: auto;
				aspect-ratio: 240 / 135;
				background: var(--ci-white);
				border: 2.5px solid var(--ci-gray-800);
				border-radius: 5px;
				position: relative;
				box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
					0 2px 6px rgba(0, 0, 0, 0.1);
				padding: 8px 10px 6px;
				transform: rotate(-1.5deg);
				font-family: "DM Sans", sans-serif;
				overflow: hidden;
				box-sizing: border-box;
			}

			#contentWrapper .ci-capture-shell .ci-check-top {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 3px;
			}

			#contentWrapper .ci-capture-shell .ci-check-name-block {
				display: flex;
				flex-direction: column;
			}

			#contentWrapper .ci-capture-shell .ci-check-person-name {
				font-size: 7.5px;
				font-weight: 700;
				color: var(--ci-gray-900);
				line-height: 1.2;
			}

			#contentWrapper .ci-capture-shell .ci-check-bank-row {
				display: flex;
				align-items: flex-start;
				gap: 3px;
				margin-top: 2px;
				margin-bottom: 3px;
			}

			#contentWrapper .ci-capture-shell .ci-bank-logo {
				width: 12px;
				height: 12px;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			#contentWrapper .ci-capture-shell .ci-bank-logo svg {
				width: 100%;
				height: 100%;
				display: block;
			}

			#contentWrapper .ci-capture-shell .ci-check-bank-name {
				font-size: 5.5px;
				font-weight: 600;
				color: var(--ci-primary);
				letter-spacing: 0.03em;
				margin-top: 2px;
			}

			#contentWrapper .ci-capture-shell .ci-check-number {
				font-size: 6.5px;
				color: var(--ci-gray-500);
				font-weight: 600;
			}

			#contentWrapper .ci-capture-shell .ci-check-date-row {
				display: flex;
				align-items: baseline;
				gap: 4px;
				margin-bottom: 4px;
				justify-content: flex-end;
			}

			#contentWrapper .ci-capture-shell .ci-check-date-label {
				font-size: 5px;
				color: var(--ci-gray-500);
				font-weight: 500;
			}

			#contentWrapper .ci-capture-shell .ci-check-date-line {
				font-size: 6px;
				color: var(--ci-gray-800);
				font-weight: 600;
				border-bottom: 1px solid var(--ci-gray-300);
				padding-bottom: 1px;
				min-width: 50px;
				text-align: center;
			}

			#contentWrapper .ci-capture-shell .ci-check-payto-row {
				display: flex;
				align-items: baseline;
				gap: 4px;
				margin-bottom: 3px;
			}

			#contentWrapper .ci-capture-shell .ci-check-payto-label {
				font-size: 4.5px;
				color: var(--ci-gray-500);
				font-weight: 500;
				white-space: nowrap;
				flex-shrink: 0;
			}

			#contentWrapper .ci-capture-shell .ci-check-payto-line {
				font-size: 6px;
				color: var(--ci-gray-800);
				font-weight: 600;
				border-bottom: 1px solid var(--ci-gray-300);
				padding-bottom: 1px;
				flex: 1;
			}

			#contentWrapper .ci-capture-shell .ci-check-amount-box {
				font-size: 6.5px;
				font-weight: 700;
				color: var(--ci-gray-900);
				border: 1.5px solid var(--ci-gray-800);
				border-radius: 2px;
				padding: 1px 5px;
				margin-left: 4px;
				white-space: nowrap;
				flex-shrink: 0;
			}

			#contentWrapper .ci-capture-shell .ci-check-written-row {
				display: flex;
				align-items: baseline;
				gap: 4px;
				margin-bottom: 6px;
				border-bottom: 1px solid var(--ci-gray-300);
				padding-bottom: 2px;
			}

			#contentWrapper .ci-capture-shell .ci-check-written {
				font-size: 5.5px;
				color: var(--ci-gray-700);
				font-weight: 500;
			}

			#contentWrapper .ci-capture-shell .ci-check-dollars {
				font-size: 5px;
				color: var(--ci-gray-500);
				font-weight: 600;
				margin-left: auto;
			}

			#contentWrapper .ci-capture-shell .ci-check-bottom-row {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				position: absolute;
				bottom: 16px;
				left: 10px;
				right: 10px;
			}

			#contentWrapper .ci-capture-shell .ci-check-memo {
				display: flex;
				flex-direction: column;
				gap: 1px;
				flex: 0.45;
			}

			#contentWrapper .ci-capture-shell .ci-check-memo-label {
				font-size: 4.5px;
				color: var(--ci-gray-500);
				font-weight: 500;
			}

			#contentWrapper .ci-capture-shell .ci-check-memo-text {
				font-size: 5.5px;
				color: var(--ci-gray-700);
				font-weight: 500;
				border-bottom: 1px solid var(--ci-gray-300);
				padding-bottom: 1px;
			}

			#contentWrapper .ci-capture-shell .ci-check-signature {
				flex: 0.45;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			#contentWrapper .ci-capture-shell .ci-signature-text {
				font-family: "Great Vibes", cursive;
				font-size: 14px;
				color: var(--ci-primary);
				margin-bottom: -3px;
				line-height: 1;
			}

			#contentWrapper .ci-capture-shell .ci-check-sig-line {
				width: 100%;
				height: 1px;
				background: var(--ci-gray-400);
			}

			#contentWrapper .ci-capture-shell .ci-check-routing {
				position: absolute;
				bottom: 4px;
				left: 10px;
				font-size: 5px;
				color: var(--ci-gray-400);
				font-family: monospace;
				letter-spacing: 0.5px;
			}

			#contentWrapper .ci-capture-shell .ci-scan-corner {
				position: absolute;
				width: 20px;
				height: 20px;
				border-color: var(--ci-accent-green);
				border-style: solid;
				border-width: 0;
				animation: ciScanPulse 2s ease-in-out infinite;
			}

			#contentWrapper .ci-capture-shell .ci-scan-corner.ci-tr {
				animation-delay: 0.2s;
			}
			#contentWrapper .ci-capture-shell .ci-scan-corner.ci-bl {
				animation-delay: 0.4s;
			}
			#contentWrapper .ci-capture-shell .ci-scan-corner.ci-br {
				animation-delay: 0.6s;
			}

			#contentWrapper .ci-capture-shell .ci-scan-corner.ci-tl {
				top: -6px;
				left: -4px;
				border-top-width: 3.5px;
				border-left-width: 3.5px;
				border-radius: 4px 0 0 0;
			}
			#contentWrapper .ci-capture-shell .ci-scan-corner.ci-tr {
				top: -6px;
				right: -4px;
				border-top-width: 3.5px;
				border-right-width: 3.5px;
				border-radius: 0 4px 0 0;
			}
			#contentWrapper .ci-capture-shell .ci-scan-corner.ci-bl {
				bottom: -6px;
				left: -4px;
				border-bottom-width: 3.5px;
				border-left-width: 3.5px;
				border-radius: 0 0 0 4px;
			}
			#contentWrapper .ci-capture-shell .ci-scan-corner.ci-br {
				bottom: -6px;
				right: -4px;
				border-bottom-width: 3.5px;
				border-right-width: 3.5px;
				border-radius: 0 0 4px 0;
			}

			@keyframes ciScanPulse {
				0%,
				100% {
					opacity: 0.6;
				}
				50% {
					opacity: 1;
				}
			}

			#contentWrapper .ci-capture-shell .ci-capture-instructions {
				flex: 1 1 50%;
				display: flex;
				flex-direction: column;
				gap: clamp(2px, 1vmin, 6px);
				min-width: 0;
				min-height: 0;
				text-align: left;
				justify-content: center;
			}

			#contentWrapper .ci-capture-shell .ci-title-row {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 8px;
				margin-bottom: clamp(6px, 1.5vmin, 12px);
			}

			#contentWrapper .ci-capture-shell .ci-instructions-title {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: clamp(22.5px, 5.4vmin, 30px);
				font-weight: 800;
				color: var(--ci-gray-900);
				margin: 0;
				line-height: 1.2;
				text-align: center;
			}

			#contentWrapper .ci-capture-shell .ci-title-icon {
				width: clamp(22px, 5vmin, 30px);
				height: clamp(22px, 5vmin, 30px);
				object-fit: contain;
				display: block;
				flex-shrink: 0;
			}

			#contentWrapper .ci-capture-shell .ci-instruction-item {
				display: flex;
				align-items: flex-start;
				gap: clamp(6px, 2vmin, 10px);
				padding: clamp(2px, 0.8vmin, 6px) 0;
				font-weight: 600;
			}

			#contentWrapper .ci-capture-shell .ci-instruction-icon {
				width: clamp(22px, 6vmin, 28px);
				height: clamp(22px, 6vmin, 28px);
				border-radius: 50%;
				background: var(--ci-primary-lighter);
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				margin-top: 1px;
			}

			#contentWrapper .ci-capture-shell .ci-instruction-icon svg {
				width: clamp(11px, 3vmin, 14px);
				height: clamp(11px, 3vmin, 14px);
				color: var(--ci-primary);
			}

			#contentWrapper .ci-capture-shell .ci-instruction-text {
				font-size: clamp(13px, 3.2vmin, 16px);
				color: var(--ci-gray-700);
				line-height: 1.4;
				font-weight: 600;
			}

			#contentWrapper .ci-capture-shell .ci-instruction-text strong {
				color: inherit;
				font-weight: 700;
			}

			/* Step 2 — back of check (same shell, back-only pieces) */
			#contentWrapper #capture-back .ci-success-banner {
				background: var(--ci-accent-green-light);
				color: var(--ci-gray-800);
				font-size: clamp(11px, 2.8vmin, 13px);
				font-weight: 600;
				padding: clamp(6px, 1.8vmin, 10px) clamp(12px, 3vmin, 24px);
				text-align: center;
				flex-shrink: 0;
				border-bottom: 1px solid var(--ci-gray-200);
				line-height: 1.25;
			}

			#contentWrapper #capture-back .ci-check-back-card {
				width: min(240px, 100%, 65vmin);
				height: auto;
				aspect-ratio: 240 / 135;
				background: linear-gradient(
					180deg,
					#fafafa 0%,
					#f0f2f5 100%
				);
				border: 2.5px solid var(--ci-gray-800);
				border-radius: 5px;
				position: relative;
				box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
					0 2px 6px rgba(0, 0, 0, 0.1);
				padding: 8px 10px 18px;
				transform: rotate(1.8deg);
				overflow: hidden;
				box-sizing: border-box;
			}

			#contentWrapper #capture-back .ci-back-watermark {
				position: absolute;
				inset: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 11px;
				font-weight: 800;
				letter-spacing: 0.2em;
				color: rgba(35, 64, 140, 0.07);
				text-transform: uppercase;
				pointer-events: none;
				transform: rotate(-16deg);
				font-family: "Plus Jakarta Sans", sans-serif;
			}

			#contentWrapper #capture-back .ci-back-top-rule {
				font-size: 5px;
				color: var(--ci-gray-500);
				text-align: center;
				text-transform: uppercase;
				letter-spacing: 0.08em;
				margin-bottom: 6px;
			}

			#contentWrapper #capture-back .ci-back-endorse-box {
				border: 2px dashed var(--ci-gray-400);
				border-radius: 4px;
				padding: 10px 8px;
				margin: 0 0 6px;
				min-height: 48px;
				background: rgba(35, 64, 140, 0.05);
				position: relative;
				z-index: 1;
			}

			#contentWrapper #capture-back .ci-back-endorse-label {
				font-size: 6px;
				font-weight: 700;
				color: var(--ci-gray-600);
				text-transform: uppercase;
				letter-spacing: 0.06em;
				margin-bottom: 4px;
			}

			#contentWrapper #capture-back .ci-back-endorse-hint {
				font-size: 7px;
				color: var(--ci-gray-700);
				line-height: 1.35;
			}

			#contentWrapper #capture-back .ci-back-micr {
				position: absolute;
				bottom: 5px;
				left: 10px;
				right: 10px;
				font-size: 5px;
				font-family: monospace;
				color: var(--ci-gray-500);
				letter-spacing: 0.35px;
				text-align: center;
				z-index: 1;
			}

			#contentWrapper #capture-back .ci-flip-badge {
				position: absolute;
				top: -10px;
				right: -8px;
				width: 38px;
				height: 38px;
				border-radius: 50%;
				background: linear-gradient(
					135deg,
					var(--ci-primary) 0%,
					var(--ci-primary-dark) 100%
				);
				color: var(--ci-white);
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4px 14px rgba(35, 64, 140, 0.35);
				z-index: 2;
			}

			#contentWrapper #capture-back .ci-flip-badge svg {
				width: 18px;
				height: 18px;
			}

			#contentWrapper #uiContainer {
				padding: 0;
				flex: 0 0 auto;
			}

			#contentWrapper #action-buttons.capture-bottom-bar {
				align-items: center;
				justify-content: space-between;
				padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
				flex-shrink: 0;
				border-top: 1px solid #eeeeee;
				background: #ffffff;
				box-sizing: border-box;
				width: 100%;
			}

			#contentWrapper #action-buttons.capture-bottom-bar:not(.hidden-element) {
				display: flex;
			}

			#contentWrapper #action-buttons.capture-bottom-bar .cancel-btn {
				display: flex;
				align-items: center;
				gap: 6px;
				background: none;
				border: none;
				color: #757575;
				font-family: "DM Sans", sans-serif;
				font-size: 14px;
				font-weight: 600;
				cursor: pointer;
				padding: 10px 0;
				transition: color 0.2s;
				height: auto;
			}

			#contentWrapper #action-buttons.capture-bottom-bar .cancel-btn:hover:not(:disabled) {
				color: #424242;
			}

			#contentWrapper #action-buttons.capture-bottom-bar .cancel-btn svg {
				width: 16px;
				height: 16px;
				flex-shrink: 0;
			}

			#contentWrapper #action-buttons.capture-bottom-bar .continue-btn {
				display: flex;
				align-items: center;
				gap: 8px;
				background: linear-gradient(135deg, #23408c 0%, #1a3068 100%);
				border: none;
				border-radius: 10px;
				color: #ffffff;
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: 15px;
				font-weight: 700;
				padding: 12px 28px;
				cursor: pointer;
				transition: all 0.2s ease;
				box-shadow: 0 4px 14px rgba(35, 64, 140, 0.3);
				letter-spacing: 0.02em;
				height: auto;
			}

			#contentWrapper #action-buttons.capture-bottom-bar .continue-btn:hover:not(:disabled) {
				transform: translateY(-1px);
				box-shadow: 0 6px 20px rgba(35, 64, 140, 0.4);
			}

			#contentWrapper #action-buttons.capture-bottom-bar .continue-btn:active:not(:disabled) {
				transform: translateY(0);
			}

			#contentWrapper #action-buttons.capture-bottom-bar .continue-btn svg {
				width: 16px;
				height: 16px;
				flex-shrink: 0;
			}

			#contentWrapper
				#action-buttons.capture-bottom-bar
				.continue-btn:disabled,
			#contentWrapper #action-buttons.capture-bottom-bar .cancel-btn:disabled {
				opacity: 0.55;
				cursor: not-allowed;
				transform: none;
				box-shadow: none;
			}

			#capture-success:not(.hidden-element) {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px 16px;
				text-align: center;
			}

			.capture-success-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 6px;
				max-width: 420px;
			}

			.capture-success-icon {
				width: clamp(56px, 11vmin, 92px);
				height: clamp(56px, 11vmin, 92px);
				object-fit: contain;
				display: block;
			}

			.capture-success-title {
				font-family: "Plus Jakarta Sans", sans-serif;
				font-size: clamp(32px, 7vmin, 52px);
				font-weight: 800;
				line-height: 1.05;
				color: #212121;
				margin: 0;
			}

			.capture-success-subtitle {
				font-size: clamp(24px, 4.2vmin, 34px);
				line-height: 1.1;
				color: #212121;
				margin: 0;
			}

			.capture-success-note {
				font-size: clamp(24px, 4.2vmin, 34px);
				line-height: 1.1;
				color: #212121;
				margin: 0;
			}

			#capture-success-buttons:not(.hidden-element) {
				margin-top: 10px;
				display: flex;
				justify-content: center;
			}

			@media screen and (max-width: 720px) {
				#contentWrapper .ci-capture-shell .ci-main-content {
					flex-direction: column;
					align-items: center;
				}

				#contentWrapper .ci-capture-shell .ci-check-visual {
					width: min(260px, 92vw);
				}

				#contentWrapper .ci-capture-shell .ci-top-bar {
					padding: 6px 14px;
				}

				#contentWrapper .ci-capture-shell .ci-top-bar-title {
					font-size: 12px;
				}

				#contentWrapper .ci-capture-shell .ci-top-bar-text {
					font-size: 13px;
				}
			}

			@media screen and (max-height: 720px) {
				#contentWrapper .ci-capture-shell .ci-main-content {
					padding: clamp(6px, 1.5vmin, 14px)
						clamp(10px, 2.5vmin, 16px);
					gap: clamp(8px, 2vmin, 14px);
				}

				#contentWrapper #action-buttons.capture-bottom-bar {
					padding-top: 8px;
					padding-left: 12px;
					padding-right: 12px;
				}

				#contentWrapper
					#action-buttons.capture-bottom-bar
					.continue-btn {
					padding: 10px 20px;
					font-size: 14px;
				}
			}

			/* Small devices: allow vertical scrolling instead of cramped fit */
			@media screen and (max-width: 640px), screen and (max-height: 640px) {
				#contentWrapper {
					max-height: none;
					overflow-y: auto;
				}

				#contentWrapper .ci-capture-shell .ci-landscape-frame {
					overflow-y: auto;
					-webkit-overflow-scrolling: touch;
				}
			}

			@keyframes rotate {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			@media screen and (orientation: landscape) {
				#rotateMessage {
					display: none !important;
				}
			}

			@media screen and (orientation: portrait) {
				#rotateMessage {
					display: flex !important;
				}
			}

			@media screen and (max-height: 328px) {
				#uiContainer {
					padding: 0px;
				}

				.header-container {
					margin-top: 15px;
				}

				.logo {
					width: 54px;
					height: 54px;
				}

				.header {
					font-size: 1.2em;
					margin: 15px 0 0 0;
					text-align: center;
				}

				.action-button {
					height: 45px;
				}
			}