@incodetech/web 2.2.0 → 2.3.0-rc.1

package/dist/workflow/styles.css

@@ -11,11 +11,10 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-tracking: initial;
-      --tw-outline-style: solid;
       --tw-duration: initial;
+      --tw-outline-style: solid;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
     }
   }
 }
@@ -44,6 +43,263 @@
   }
 }
 
+@keyframes incodeToastFadeInOut {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -20px);
+  }
+
+  15% {
+    opacity: 1;
+    transform: translate(-50%);
+  }
+
+  85% {
+    opacity: 1;
+    transform: translate(-50%);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -20px);
+  }
+}
+
+.IncodeCameraButton {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCameraButton .IncodeCameraButtonBackground {
+  fill: var(--color-icon-neutral-800-static, var(--icon-neutral-800-static));
+}
+
+.IncodeCameraButton .IncodeCameraButtonRing, .IncodeCameraButton .IncodeCameraButtonPath {
+  fill: var(--color-icon-neutral-50, var(--icon-neutral-50-static));
+}
+
+.IncodePrivacyLensBanner {
+  max-width: var(--privacy-lens-banner-max-w);
+  text-align: center;
+  color: var(--privacy-lens-banner-color);
+  font-size: var(--privacy-lens-banner-font-size);
+  line-height: var(--privacy-lens-banner-line-height);
+  padding: var(--privacy-lens-banner-padding);
+  margin-inline: auto;
+}
+
+.IncodeCaptureStatusPage .IncodeCaptureStatusContainer {
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeCaptureStatusPage .IncodeCaptureStatusTitle {
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+}
+
+.IncodeSelfieManualCapture {
+  max-width: var(--manual-face-capture-max-w);
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeSelfieManualCaptureText {
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+}
+
+.IncodeSelfieManualCaptureButton {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadContainer {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  width: 100%;
+  padding-block: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadFormats {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadError {
+  align-items: flex-start;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  width: 100%;
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+  display: flex;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadError p {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  flex: 1;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadFooter {
+  margin-top: auto;
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+  row-gap: var(--spacing-24, var(--spacing-24, 24px));
+  width: 100%;
+  padding-top: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
+  background-color: var(--color-surface-brand-50, var(--surface-brand-50));
+  width: 100%;
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
+  padding-right: var(--spacing-12, var(--spacing-12, 12px));
+  padding-left: var(--spacing-32, var(--spacing-32, 32px));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  list-style-type: disc;
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard li {
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-s-size);
+  font-weight: var(--typography-button-s-weight);
+  line-height: var(--typography-button-s-line-height);
+  letter-spacing: var(--typography-button-s-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+}
+
+.IncodeSelfieManualUploadPage .IncodeSelfieManualUploadHintCard li + li {
+  margin-top: var(--spacing-4, var(--spacing-4, 4px));
+}
+
+.IncodeSelfieUploadSlot {
+  cursor: pointer;
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-regular, var(--primitive-border-width-1));
+  --tw-border-style: solid;
+  border-style: solid;
+  border-color: var(--color-border-neutral-100, var(--border-neutral-100));
+  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
+  width: 100%;
+  padding-block: var(--spacing-24, var(--spacing-24, 24px));
+  padding-right: var(--spacing-24, var(--spacing-24, 24px));
+  padding-left: var(--spacing-20, var(--spacing-20, 20px));
+  text-align: left;
+  display: flex;
+}
+
+.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotIcon {
+  width: var(--spacing-24, var(--spacing-24, 24px));
+  height: var(--spacing-24, var(--spacing-24, 24px));
+  color: var(--color-icon-neutral-500, var(--icon-neutral-500));
+  flex-shrink: 0;
+  justify-content: center;
+  display: flex;
+}
+
+.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotLabel {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  flex: 1;
+  overflow: hidden;
+}
+
+.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotAction {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.IncodeSelfieUploadSlot .IncodeSelfieUploadSlotPill {
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  border-radius: var(--radius-full, var(--border-radius-full));
+  background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
+  padding-block: var(--spacing-8, var(--spacing-8, 8px));
+  padding-right: var(--spacing-8, var(--spacing-8, 8px));
+  padding-left: var(--spacing-16, var(--spacing-16, 16px));
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-s-size);
+  font-weight: var(--typography-button-s-weight);
+  line-height: var(--typography-button-s-line-height);
+  letter-spacing: var(--typography-button-s-letter-spacing);
+  color: var(--color-button-primary-text-default, var(--button-primary-text-default));
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
+  transition-duration: .2s;
+  display: inline-flex;
+}
+
+.IncodeSelfieUploadSlot:focus-visible {
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--color-border-status-focus, var(--border-status-focus));
+}
+
+.IncodeSelfieUploadSlot:hover:not(:disabled) .IncodeSelfieUploadSlotPill {
+  background-color: var(--color-button-primary-surface-hover, var(--button-primary-surface-hover));
+}
+
+.IncodeSelfieUploadSlot:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+.IncodeSelfieUploadSlot + .IncodeSelfieUploadSlotInput {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
 .IncodeCaptureContainer {
   flex-direction: column;
   flex: 1;
@@ -58,192 +314,677 @@
 
 .IncodeCaptureContainer .IncodeCaptureFrame {
   aspect-ratio: 1;
+  width: 100%;
+  max-width: var(--face-capture-frame-max-w);
   border-radius: var(--radius-full, var(--border-radius-full));
   border-style: var(--tw-border-style);
   border-width: 12px;
   border-color: #0000;
-  width: 100%;
-  max-width: 335px;
   position: relative;
 }
 
-.IncodeCaptureContainer .IncodeCaptureVideoWrapper {
-  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
-  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
-  width: calc(100% - 24px);
-  height: calc(100% - 24px);
-  translate: var(--tw-translate-x) var(--tw-translate-y);
-  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
-  border-radius: var(--radius-full, var(--border-radius-full));
-  background-color: var(--color-white, #fff);
+.IncodeCaptureContainer .IncodeCaptureVideoWrapper {
+  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  width: calc(100% - 24px);
+  height: calc(100% - 24px);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
+  border-radius: var(--radius-full, var(--border-radius-full));
+  background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  overflow: hidden;
+}
+
+.IncodeCaptureContainer .IncodeCaptureVideo {
+  z-index: 50;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.IncodeCaptureContainer .IncodeCaptureVideoElement {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeMediaCoverPending {
+  opacity: 0;
+}
+
+.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {
+  transform: scaleX(-1);
+}
+
+.IncodeCaptureContainer .IncodeCaptureAvatarHost {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.IncodeCaptureContainer .IncodeCaptureAvatarElement {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeMediaCoverPending {
+  opacity: 0;
+}
+
+.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {
+  transform: scaleX(-1);
+}
+
+.IncodeCaptureVisuallyHidden {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.IncodeFaceOutline {
+  width: 100%;
+  height: 100%;
+}
+
+.IncodeLoadingBorder {
+  aspect-ratio: 1;
+  width: 100%;
+  max-width: var(--face-capture-frame-max-w);
+  position: absolute;
+}
+
+.IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  position: absolute;
+}
+
+.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {
+  animation: var(--animate-spin, spin 1s linear infinite);
+}
+
+.IncodeLoadingBorder .IncodeLoadingBorderPath {
+  transition: all 1s ease-in-out;
+}
+
+.IncodeNotification {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeNotification .IncodeNotificationText {
+  text-align: center;
+  font-family: var(--typography-feedback-family);
+  font-size: var(--typography-feedback-l-size);
+  font-weight: var(--typography-feedback-l-weight);
+  line-height: var(--typography-feedback-l-line-height);
+  letter-spacing: var(--typography-feedback-l-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+}
+
+.IncodeVideoSelfieCapturePage {
+  background-color: var(--capture-page-backdrop-color);
+}
+
+.IncodeVideoSelfieCapturePage .IncodePageInner {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeVideoSelfieCapturePage .IncodePageContent {
+  flex: 1;
+  position: relative;
+}
+
+.IncodeVideoSelfieOverlay {
+  pointer-events: none;
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  z-index: 10;
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  container-type: inline-size;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage {
+  background-color: var(--color-surface-neutral-900-static, var(--surface-neutral-900-static));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodePageInner {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodePageContent {
+  flex: 1;
+  position: relative;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCamera {
+  width: 100%;
+  height: 100%;
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraContent {
+  align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: center;
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraIcon {
+  width: var(--spacing-40, var(--spacing-40, 40px));
+  height: var(--spacing-40, var(--spacing-40, 40px));
+}
+
+.IncodeVideoSelfieSwitchingCameraPage .IncodeVideoSelfieSwitchingCameraTitle {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+}
+
+.IncodeVideoSelfieTutorialPage .IncodePageContent {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeVideoSelfieTutorialBody {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  flex: 1;
+  overflow-y: auto;
+}
+
+.IncodeVideoSelfieTutorialSteps {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  margin-inline: auto;
+  display: flex;
+}
+
+.IncodeVideoSelfieTutorialStep {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  display: flex;
+}
+
+.IncodeVideoSelfieTutorialStepIcon {
+  width: var(--spacing-40, var(--spacing-40, 40px));
+  height: var(--spacing-40, var(--spacing-40, 40px));
+  border-radius: var(--radius-small, var(--border-radius-small));
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  border-color: var(--color-border-neutral-100, var(--border-neutral-100));
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+.IncodeVideoSelfieTutorialStepIcon svg {
+  height: var(--spacing-24, var(--spacing-24, 24px));
+  width: var(--spacing-24, var(--spacing-24, 24px));
+}
+
+.IncodeVideoSelfieTutorialStep:not(:last-child) .IncodeVideoSelfieTutorialStepIcon:after {
+  content: "";
+  height: var(--spacing-8, var(--spacing-8, 8px));
+  width: var(--spacing-2, var(--spacing-2, 2px));
+  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+  background-color: var(--color-border-neutral-100, var(--border-neutral-100));
+  position: absolute;
+  top: 100%;
+  left: 50%;
+}
+
+.IncodeVideoSelfieTutorialStepLabel {
+  text-align: left;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h4-size);
+  font-weight: var(--typography-headline-h4-weight);
+  line-height: var(--typography-headline-h4-line-height);
+  letter-spacing: var(--typography-headline-h4-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+}
+
+.IncodeVideoSelfieTutorialActions {
+  bottom: var(--spacing-0, var(--spacing-none, 0px));
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  width: 100%;
+  padding-top: var(--spacing-24, var(--spacing-24, 24px));
+  padding-bottom: var(--spacing-24, var(--spacing-24, 24px));
+  flex-shrink: 0;
+  display: flex;
+  position: sticky;
+}
+
+.IncodeVideoSelfieTutorialStartButton {
+  max-width: var(--incode-form-max-w);
+  margin: auto;
+}
+
+.IncodeVsStepsHeader {
+  inset-inline: var(--spacing-0, var(--spacing-none, 0px));
+  top: var(--spacing-0, var(--spacing-none, 0px));
+  gap: var(--spacing-2, var(--spacing-2, 2px));
+  width: 100%;
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  padding-top: var(--spacing-24, var(--spacing-24, 24px));
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+  z-index: var(--video-selfie-chrome-z-index);
+  background-color: #0000;
+  list-style-type: none;
+  display: flex;
+  position: absolute;
+}
+
+.IncodeVsStepsHeader .IncodeVsStepsHeaderStep {
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  width: 100%;
+  height: var(--video-selfie-stepper-height);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+  position: relative;
+}
+
+.IncodeVsStepsHeader .IncodeVsStepsHeaderStep img {
+  width: var(--spacing-32, var(--spacing-32, 32px));
+  height: var(--spacing-32, var(--spacing-32, 32px));
+}
+
+.IncodeVsStepsHeader .IncodeVsStepsHeaderPill {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));
+  width: 100%;
+  height: var(--video-selfie-stepper-pill-height);
+  opacity: .25;
+  transition: opacity .3s ease-in-out;
+}
+
+.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCompleted .IncodeVsStepsHeaderPill {
+  opacity: .5;
+}
+
+.IncodeVsStepsHeader .IncodeVsStepsHeaderStepCurrent .IncodeVsStepsHeaderPill {
+  opacity: 1;
+}
+
+.IncodeVsStepsHeader.IncodeVsStepsHeaderFinished .IncodeVsStepsHeaderPill {
+  background-color: var(--border-status-positive-static);
+  opacity: 1;
+}
+
+.IncodeVsSelfieManualCapture {
+  pointer-events: auto;
+}
+
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMask {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  z-index: var(--video-selfie-mask-z-index);
+  width: 86cqw;
+  height: 86cqw;
+  box-shadow: var(--video-selfie-mask-vignette-shadow);
+  position: absolute;
+  top: calc(50% - 7cqw);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMask .IncodeVsSelfieMaskRing {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: visible;
+}
+
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskFeedback {
+  inset-inline: var(--spacing-0, var(--spacing-none, 0px));
+  align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: center;
+  width: 100%;
+  z-index: var(--video-selfie-chrome-z-index);
+  max-width: var(--video-selfie-feedback-max-width);
+  flex-direction: column;
+  margin-inline: auto;
+  display: flex;
+  position: absolute;
+  top: calc(50% + 36cqw + 40px);
+}
+
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskIcon {
+  width: var(--spacing-32, var(--spacing-32, 32px));
+  height: var(--spacing-32, var(--spacing-32, 32px));
+}
+
+.IncodeVideoSelfieOverlay .IncodeVsSelfieMaskText {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+}
+
+.IncodeVsIdMask {
+  z-index: 50;
+  padding-inline: var(--spacing-24);
   justify-content: center;
   align-items: center;
   display: flex;
   position: absolute;
-  top: 50%;
-  left: 50%;
-  overflow: hidden;
+  inset: 0;
 }
 
-.IncodeCaptureContainer .IncodeCaptureVideo {
-  z-index: 50;
-  width: 100%;
-  height: 100%;
+.IncodeVsIdMask .IncodeVsIdManualCapture {
+  bottom: var(--spacing-32);
+  z-index: 60;
+  pointer-events: auto;
   position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.IncodeCaptureContainer .IncodeCaptureVideoElement {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  position: absolute;
+.IncodeVsIdMask .IncodeIdCaptureNotification {
+  top: calc(var(--spacing-24) + var(--video-selfie-stepper-height) + var(--spacing-16));
 }
 
-.IncodeCaptureContainer .IncodeCaptureVideoElement.IncodeCaptureVideoMirrored {
-  transform: scaleX(-1);
+.IncodeVsIdMask .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent {
+  background-color: var(--surface-neutral-900-static);
 }
 
-.IncodeCaptureContainer .IncodeCaptureAvatarHost {
-  width: 100%;
-  height: 100%;
+.IncodeVsIdMask .IncodeVsIdFeedback {
+  z-index: 100;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  padding: var(--spacing-32, var(--spacing-32, 32px));
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+  background-color: var(--surface-neutral-900-static);
+  border: var(--border-width-regular) solid var(--border-neutral-100-static);
+  width: max-content;
+  max-width: var(--video-selfie-id-feedback-max-width);
+  flex-direction: column;
+  display: flex;
   position: absolute;
+  top: 50%;
+  left: 50%;
+  overflow: hidden;
+  transform: translate(-50%, -50%);
 }
 
-.IncodeCaptureContainer .IncodeCaptureAvatarElement {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  position: absolute;
+.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackError {
+  width: var(--video-selfie-id-feedback-width);
 }
 
-.IncodeCaptureContainer .IncodeCaptureAvatarElement.IncodeCaptureAvatarMirrored {
-  transform: scaleX(-1);
+.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing {
+  gap: var(--spacing-16);
+  color: var(--text-body-50-static);
+  width: var(--video-selfie-id-processing-feedback-width);
+  height: var(--video-selfie-id-processing-feedback-height);
 }
 
-.IncodeCaptureVisuallyHidden {
-  clip-path: inset(50%);
+.IncodeVsIdMask .IncodeVsIdFeedback.IncodeVsIdFeedbackProcessing p {
   white-space: nowrap;
-  border-width: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
 }
 
-.IncodeFaceOutline {
-  width: 100%;
-  height: 100%;
+.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerPrimary {
+  fill: var(--spinner-surface-primary);
 }
 
-.IncodeLoadingBorder {
-  aspect-ratio: 1;
-  width: 100%;
-  max-width: 335px;
-  position: absolute;
+.IncodeVsIdMask .IncodeVsIdFeedback .IncodeVsIdFeedbackSpinnerSecondary {
+  fill: var(--surface-brand-900-static);
 }
 
-.IncodeLoadingBorder .IncodeLoadingBorderBase, .IncodeLoadingBorder .IncodeLoadingBorderForeground {
-  inset: var(--spacing-0, var(--spacing-none, 0px));
-  position: absolute;
+.IncodeVsIdFlipModal .IncodeModalDialog {
+  max-width: none;
+  height: 100%;
 }
 
-.IncodeLoadingBorder .IncodeLoadingBorderForeground.IncodeLoadingBorderSpinning {
-  animation: var(--animate-spin, spin 1s linear infinite);
+.IncodeVsIdFlipModal .IncodeModalContent {
+  border-radius: var(--radius-none, var(--border-radius-none));
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  max-width: none;
+  height: 100%;
+  padding: var(--spacing-24, var(--spacing-24, 24px));
+  justify-content: center;
+  gap: var(--video-selfie-id-flip-gap);
 }
 
-.IncodeLoadingBorder .IncodeLoadingBorderPath {
-  transition: all 1s ease-in-out;
+.IncodeVsIdFlipModal .IncodeModalTitleSectionCenter {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
 }
 
-.IncodeNotification {
-  flex-direction: column;
+.IncodeVsIdFlipModal .IncodeVsIdFlipAnimation {
+  height: var(--video-selfie-id-flip-animation-height);
+  width: var(--video-selfie-id-flip-animation-width);
+  overflow: hidden;
+}
+
+.IncodeVsFinalSuccess {
+  justify-content: center;
   align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  flex: 1;
   display: flex;
 }
 
-.IncodeNotification .IncodeNotificationText {
+.IncodeVsFinalSuccess .IncodeVsFinalSuccessTitle {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
   text-align: center;
-  font-family: var(--typography-feedback-family);
-  font-size: var(--typography-feedback-l-size);
-  font-weight: var(--typography-feedback-l-weight);
-  line-height: var(--typography-feedback-l-line-height);
-  letter-spacing: var(--typography-feedback-l-letter-spacing);
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeCameraButton {
+.IncodeVsPoaMask {
+  pointer-events: none;
+  z-index: 50;
+  position: absolute;
+  inset: 0;
+}
+
+.IncodeVsPoaBanner {
+  top: var(--spacing-0, var(--spacing-none, 0px));
+  right: var(--spacing-0, var(--spacing-none, 0px));
+  left: var(--spacing-0, var(--spacing-none, 0px));
+  background-color: var(--color-surface-neutral-1000-80-static, var(--surface-neutral-1000-80-static));
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  padding-top: var(--poa-mask-banner-padding-top);
+  padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
   justify-content: center;
   align-items: center;
   display: flex;
+  position: absolute;
 }
 
-.IncodeCameraButton .IncodeCameraButtonBackground {
-  fill: var(--color-icon-neutral-800-static, var(--icon-neutral-800-static));
+.IncodeVsPoaBannerText {
+  text-align: center;
+  color: var(--poa-mask-banner-text-color);
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.4;
 }
 
-.IncodeCameraButton .IncodeCameraButtonRing, .IncodeCameraButton .IncodeCameraButtonPath {
-  fill: var(--color-icon-neutral-50, var(--icon-neutral-50-static));
+.IncodeVsPoaBannerEmphasis {
+  color: var(--poa-mask-emphasis-color);
 }
 
-.IncodeCaptureCapturingPage .IncodeCaptureCapturingActions {
+.IncodeVsPoaActions {
+  right: var(--spacing-16, var(--spacing-16, 16px));
+  bottom: var(--spacing-16, var(--spacing-16, 16px));
+  left: var(--spacing-16, var(--spacing-16, 16px));
   justify-content: center;
-  margin-top: auto;
   display: flex;
+  position: absolute;
 }
 
-.IncodePrivacyLensBanner {
-  text-align: center;
-  color: #4a5568;
-  text-align: center;
-  max-width: 320px;
-  margin-inline: auto;
-  padding: 0 1rem 1rem;
-  font-size: .95rem;
-  line-height: 1.4;
+.IncodeVsPoaButton {
+  pointer-events: auto;
+  width: 100%;
 }
 
-.IncodeCaptureStatusPage .IncodeCaptureStatusContainer {
-  flex-direction: column;
-  flex: 1;
+.IncodeVsVoicePanel {
+  pointer-events: auto;
+  z-index: var(--video-selfie-mask-z-index);
   align-items: center;
+  gap: var(--spacing-12);
+  padding: var(--spacing-20) var(--spacing-16);
+  border-radius: var(--border-radius-large);
+  background: var(--surface-neutral-0-static);
+  color: var(--text-body-800-primary-static);
+  border: var(--video-selfie-voice-panel-border-width) solid transparent;
+  box-shadow: var(--video-selfie-voice-vignette-shadow);
+  flex-direction: column;
+  transition: border-color .3s ease-in-out;
   display: flex;
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+  right: 10px;
 }
 
-.IncodeCaptureStatusPage .IncodeCaptureStatusTitle {
-  text-align: center;
-  font-size: var(--text-2xl, 1.5rem);
-  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
-  --tw-leading: 125%;
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  line-height: 125%;
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  --tw-tracking: -1px;
-  letter-spacing: -1px;
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
+.IncodeVsVoicePanel.IncodeVsVoicePanelActive {
+  border-color: var(--border-brand-500);
 }
 
-.IncodeSelfieManualCapture {
-  flex-direction: column;
+.IncodeVsVoicePanel.IncodeVsVoicePanelProcessing {
+  border-style: var(--tw-border-style);
+  left: var(--spacing-8);
+  right: var(--spacing-8);
+  bottom: var(--spacing-8);
+  justify-content: center;
   align-items: center;
-  max-width: 275px;
-  display: flex;
+  gap: var(--spacing-16);
+  height: var(--video-selfie-voice-processing-height);
+  min-height: var(--video-selfie-voice-processing-height);
+  padding: var(--spacing-24) var(--spacing-16);
+  border-width: 0;
 }
 
-.IncodeSelfieManualCaptureText {
+.IncodeVsVoicePanel .IncodeVsVoicePanelProcessingTitle {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
   text-align: center;
   font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h5-size);
-  font-weight: var(--typography-headline-h5-weight);
-  line-height: var(--typography-headline-h5-line-height);
-  letter-spacing: var(--typography-headline-h5-letter-spacing);
-  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-spinner-text-title, var(--spinner-text-title));
 }
 
-.IncodeSelfieManualCaptureButton {
+.IncodeVsVoicePanel .IncodeVsVoicePanelLabel {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h4-size);
+  font-weight: var(--typography-headline-h4-weight);
+  line-height: var(--typography-headline-h4-line-height);
+  letter-spacing: var(--typography-headline-h4-letter-spacing);
+  color: var(--text-body-500-secondary-static);
+}
+
+.IncodeVsVoicePanel .IncodeVsVoicePanelTitle {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--text-body-800-primary-static);
+}
+
+.IncodeVsVoicePanel .IncodeVsVoicePanelButton {
+  width: 100%;
+}
+
+.IncodeVsVoicePanel .IncodeVsVoiceStepper {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  width: 100%;
   padding: var(--spacing-0, var(--spacing-none, 0px));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  list-style-type: none;
+  display: flex;
+}
+
+.IncodeVsVoicePanel .IncodeVsVoiceStep {
+  height: var(--spacing-4);
+  border-radius: var(--border-radius-full);
+  background: var(--surface-neutral-100-static);
+  flex: 1;
+}
+
+.IncodeVsVoicePanel .IncodeVsVoiceStepActive {
+  background: var(--surface-brand-500-static);
+}
+
+.IncodeVsVoicePanel .IncodeVsVoiceMic {
+  width: var(--spacing-16);
+  height: var(--spacing-16);
+  border-radius: var(--border-radius-full);
+  background: var(--icon-status-negative);
+  animation: 1.2s ease-in-out infinite IncodeVsVoiceMicPulse;
+}
+
+@keyframes IncodeVsVoiceMicPulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: .4;
+    transform: scale(.8);
+  }
 }
 
 .IncodePhonePage .IncodePageContent {
@@ -254,7 +995,7 @@
 
 .IncodePhoneInputContainer {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeEmailInput, .IncodeEmailInputContainer {
@@ -288,30 +1029,33 @@
 }
 
 .IncodeFaceMatchAnimationContainer {
-  flex: 1;
   width: 100%;
-  min-height: 250px;
+  min-height: var(--face-match-animation-container-min-h);
+  flex: 1;
   display: flex;
   position: relative;
   overflow: clip;
 }
 
 .IncodeFaceMatchContainer {
-  flex: 1;
   width: 100%;
   height: 100%;
-  min-height: 225px;
+  min-height: var(--face-match-container-min-h);
+  flex: 1;
   position: relative;
 }
 
 .IncodeFaceMatchResultContainer {
-  flex-direction: column;
+  top: var(--spacing-0, var(--spacing-none, 0px));
+  right: var(--spacing-0, var(--spacing-none, 0px));
+  bottom: var(--spacing-0, var(--spacing-none, 0px));
+  left: var(--spacing-0, var(--spacing-none, 0px));
   justify-content: center;
   align-items: center;
-  gap: 16px;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
   display: flex;
   position: absolute;
-  inset: 0;
 }
 
 .IncodeFaceMatchHeader {
@@ -371,10 +1115,10 @@
 }
 
 .IncodeFaceMatchResultContent {
-  flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 16px;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
   width: 100%;
   display: flex;
 }
@@ -418,26 +1162,30 @@
 }
 
 .IncodeFaceMatchTooltip {
-  background: var(--surface-neutral-50);
-  border: 1px solid var(--border-neutral-100);
-  border-radius: var(--border-radius-medium);
-  letter-spacing: -.192px;
-  height: 44px;
-  color: var(--text-body-800-primary);
+  padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-border-neutral-100, var(--border-neutral-100));
+  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
   text-align: center;
-  padding: 0 20px;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 44px;
+  font-family: var(--typography-tooltip-family);
+  font-size: var(--typography-tooltip-m-size);
+  font-weight: var(--typography-tooltip-m-weight);
+  line-height: var(--typography-tooltip-m-line-height);
+  letter-spacing: var(--typography-tooltip-m-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  height: var(--face-match-tooltip-height);
+  line-height: var(--face-match-tooltip-height);
   display: inline-block;
   position: relative;
 }
 
 .IncodeFaceMatchTooltip:after {
   content: "";
-  border-left: 9px solid #0000;
-  border-right: 9px solid #0000;
-  border-top: 9px solid var(--surface-neutral-50);
+  border-left: var(--face-match-tooltip-arrow-size) solid transparent;
+  border-right: var(--face-match-tooltip-arrow-size) solid transparent;
+  border-top: var(--face-match-tooltip-arrow-size) solid var(--surface-neutral-50);
   width: 0;
   height: 0;
   position: absolute;
@@ -448,9 +1196,9 @@
 
 .IncodeFaceMatchTooltip:before {
   content: "";
-  border-left: 9px solid #0000;
-  border-right: 9px solid #0000;
-  border-top: 9px solid var(--border-neutral-100);
+  border-left: var(--face-match-tooltip-arrow-size) solid transparent;
+  border-right: var(--face-match-tooltip-arrow-size) solid transparent;
+  border-top: var(--face-match-tooltip-arrow-size) solid var(--border-neutral-100);
   width: 0;
   height: 0;
   position: absolute;
@@ -461,12 +1209,12 @@
 
 .IncodeFaceMatchAnimatedTitle {
   text-align: center;
-  font-size: var(--text-2xl, 1.5rem);
-  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  color: var(--text-body-800-primary);
-  line-height: 125%;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeFaceMatchContainer {
@@ -629,9 +1377,9 @@
 }
 
 .IncodeFaceMatchPhotoContainer {
-  flex-direction: column;
   align-items: center;
-  gap: 21px;
+  gap: var(--face-match-photo-gap);
+  flex-direction: column;
   display: flex;
   position: absolute;
   top: 0;
@@ -668,14 +1416,14 @@
 }
 
 .IncodeFaceMatchBottomPhotoContainer {
+  align-items: center;
+  gap: var(--face-match-photo-gap);
   opacity: 0;
   z-index: 3;
   will-change: transform, opacity;
   animation: bottomEntrance var(--entrance-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards, bottomUp var(--animation-duration, .8s) cubic-bezier(.25, .46, .45, .94) forwards;
   animation-delay: var(--entrance-delay, .45s), var(--animation-delay, 2.85s);
   flex-direction: column;
-  align-items: center;
-  gap: 21px;
   display: flex;
   position: absolute;
   top: 225px;
@@ -694,11 +1442,11 @@
 }
 
 .IncodeFaceMatchCircularImage {
+  border-radius: var(--radius-full, var(--border-radius-full));
   object-fit: cover;
-  background-color: #ddd;
-  border-radius: 50%;
-  width: 160px;
-  height: 160px;
+  width: var(--face-match-photo-size);
+  height: var(--face-match-photo-size);
+  background-color: var(--face-match-photo-placeholder-bg);
 }
 
 .IncodeFaceMatchAnimatedTitle {
@@ -713,11 +1461,11 @@
   line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
   --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
   font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  line-height: var(--face-match-title-line-height);
   color: var(--text-body-800-primary);
   animation: fadeInTitle var(--transition-duration, .25s) linear forwards;
   animation-delay: calc(var(--animation-delay, 2.85s) + var(--animation-duration, .8s) + var(--transition-delay, .2s));
   opacity: 0;
-  line-height: 125%;
 }
 
 .IncodeFaceMatchAnimatedIcon {
@@ -733,44 +1481,8 @@
 }
 
 .IncodeGovtValidation {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.IncodeGovtValidation .IncodeGovtValidationPage {
-  width: 100%;
-  height: 100%;
-}
-
-.IncodeGovtValidation .IncodeGovtValidationPage .IncodePageContent {
-  flex-direction: column;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodePageContent {
-  flex-direction: column;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodeGovtValidationOtpInstructions {
-  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
-}
-
-.IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodeGovtValidationOtpInstructions p, .IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodeGovtValidationOtpInstructions h2 {
-  font-family: var(--typography-input-dropdown-family);
-  font-size: var(--typography-input-dropdown-m-size);
-  font-weight: var(--typography-input-dropdown-m-weight);
-  line-height: var(--typography-input-dropdown-m-line-height);
-  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
-  text-wrap: nowrap;
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  animation-fill-mode: both;
 }
 
 .IncodeSrOnly {
@@ -947,8 +1659,8 @@
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardSubtitle {
+  max-width: var(--id-capture-flip-card-subtitle-max-w);
   text-align: center;
-  max-width: 300px;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
   font-weight: var(--typography-headline-h5-weight);
@@ -962,7 +1674,7 @@
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {
@@ -1033,7 +1745,7 @@
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeIdFlipCardBottomArea {
   z-index: 10;
   width: 100%;
-  max-width: 384px;
+  max-width: var(--id-capture-bottom-area-max-w);
   padding-top: var(--spacing-8, var(--spacing-8, 8px));
   flex-direction: column;
   flex: 1;
@@ -1131,9 +1843,9 @@
 }
 
 .IncodeCommonIssuesContent .IncodeCommonIssuesCards {
-  gap: var(--spacing-32, var(--spacing-32, 32px));
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-32, var(--spacing-32, 32px));
   padding-block: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   display: flex;
@@ -1190,7 +1902,7 @@
 }
 
 .IncodeChooserPage .IncodePageTitle {
-  max-width: 15.625rem;
+  max-width: var(--incode-form-max);
 }
 
 .IncodeChooserPage .IncodeChooserContainer {
@@ -1204,7 +1916,7 @@
 .IncodeCaptureFrame {
   border-radius: var(--radius-medium, var(--border-radius-medium));
   --frame-border-color: var(--border-neutral-100);
-  border: 4px solid var(--frame-border-color);
+  border: var(--id-capture-frame-border-width) solid var(--frame-border-color);
   justify-content: center;
   align-self: center;
   align-items: center;
@@ -1214,15 +1926,15 @@
 }
 
 .IncodeCaptureFrame.IncodeCaptureFrameHorizontal {
-  aspect-ratio: 35 / 22;
   width: 100%;
-  max-width: 640px;
+  max-width: var(--id-capture-frame-horizontal-max-width);
+  aspect-ratio: 35 / 22;
 }
 
 .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  aspect-ratio: 22 / 35;
   width: 100%;
-  max-width: 274px;
+  max-width: var(--id-capture-frame-vertical-max-width);
+  aspect-ratio: 22 / 35;
 }
 
 .IncodeCaptureFrame.IncodeCaptureFramePassport.IncodeCaptureFrameHorizontal {
@@ -1288,7 +2000,7 @@
 
 @media (min-width: 48rem) {
   .IncodeIdCapturePage {
-    background-color: var(--color-black, #000);
+    background-color: var(--capture-page-backdrop-color);
   }
 }
 
@@ -1425,8 +2137,8 @@
   width: max-content;
   left: 50%;
   bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));
+  animation: manualCaptureTooltipExit .35s ease-in var(--manual-capture-tooltip-dismiss-delay, 3.5s) forwards;
   justify-content: center;
-  animation: .35s ease-in 3.5s forwards manualCaptureTooltipExit;
   display: flex;
   position: absolute;
   transform: translateX(-50%);
@@ -1459,6 +2171,27 @@
   color: var(--color-text-body-0-static, var(--text-body-0-static));
 }
 
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  animation: none;
+  position: absolute;
+  overflow: hidden;
+}
+
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerSrOnly .IncodeIdManualCaptureTooltip {
+  animation: none;
+}
+
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer.IncodeIdManualCaptureTooltipContainerAutoDismiss {
+  animation-name: manualCaptureTooltipExitAutoDismiss;
+}
+
 .IncodeCaptureOverlayId .IncodeCameraFrameHorizontal.IncodeCaptureFramePassport {
   aspect-ratio: 42 / 30;
 }
@@ -1479,6 +2212,18 @@
   }
 }
 
+@keyframes manualCaptureTooltipExitAutoDismiss {
+  from {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+
+  to {
+    opacity: .5;
+    transform: translate(-50%, calc(25% + var(--manual-capture-tooltip-button-center-offset))) scale(.5);
+  }
+}
+
 .IncodeIdManualCaptureButton {
   bottom: var(--spacing-24, var(--spacing-24, 24px));
   z-index: 100;
@@ -1584,10 +2329,10 @@
 }
 
 .IncodeIdHint .IncodeIdHintAnimated .IncodeIdHintSvg svg {
-  width: 800px;
-  min-width: 800px;
-  height: 800px;
-  min-height: 800px;
+  width: var(--id-capture-hint-svg-size);
+  height: var(--id-capture-hint-svg-size);
+  min-width: var(--id-capture-hint-svg-size);
+  min-height: var(--id-capture-hint-svg-size);
 }
 
 .IncodeIdProcessingPage .IncodePageInner {
@@ -1631,7 +2376,7 @@
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {
@@ -1640,7 +2385,8 @@
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame .IncodeIdProcessingImage {
-  object-fit: cover;
+  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
+  object-fit: fill;
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -1665,7 +2411,7 @@
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeIdProcessingBottomArea {
   width: 100%;
-  max-width: 384px;
+  max-width: var(--id-capture-bottom-area-max-w);
   padding-top: var(--spacing-8, var(--spacing-8, 8px));
   z-index: 10;
   flex-direction: column;
@@ -1743,9 +2489,10 @@
   }
 }
 
-.IncodeIdProcessingLayout .IncodeIdProcessingResultContent {
+.IncodeIdProcessingLayout .IncodeIdProcessingResultContent, .IncodeIdProcessingLayout .IncodeIdProcessingResultStatus {
   flex-direction: column;
   align-items: center;
+  width: 100%;
   display: flex;
 }
 
@@ -1767,7 +2514,7 @@
   letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   text-align: center;
-  max-width: 300px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingResultButtonContainer {
@@ -1822,47 +2569,51 @@
   position: fixed;
 }
 
-.IncodeIdErrorMessage {
+.IncodeIdError .IncodeIdErrorMessage {
   text-align: center;
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h4-size);
+  font-weight: var(--typography-headline-h4-weight);
+  line-height: var(--typography-headline-h4-line-height);
+  letter-spacing: var(--typography-headline-h4-letter-spacing);
   color: var(--color-text-body-0, var(--text-body-0-static));
-  max-width: 350px;
+  max-width: var(--incode-form-max-w);
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
 .IncodeIdNoAttemptsContent {
   padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  max-height: var(--id-no-attempts-content-max-h);
+  max-width: var(--id-no-attempts-content-max-w);
   flex-direction: column;
   flex: 1;
   justify-content: center;
   align-items: center;
-  max-width: 800px;
-  max-height: 840px;
   margin: auto;
   display: flex;
 }
 
-.IncodeIdNoAttemptsIcon {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsIcon {
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
-.IncodeIdNoAttemptsTitle {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsTitle {
   text-align: center;
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeIdNoAttemptsSubtitle {
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-normal, 400);
-  font-weight: var(--font-weight-normal, 400);
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsSubtitle {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   text-align: center;
-  max-width: 350px;
+  max-width: var(--incode-form-max-w);
 }
 
-.IncodeIdNoAttemptsButtonContainer {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsButtonContainer {
   bottom: var(--spacing-32, var(--spacing-32, 32px));
   right: var(--spacing-0, var(--spacing-none, 0px));
   left: var(--spacing-0, var(--spacing-none, 0px));
@@ -1872,6 +2623,42 @@
   position: absolute;
 }
 
+.IncodeUnacceptedIdDocuments {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountry {
+  margin-bottom: var(--spacing-32, var(--spacing-32, 32px));
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  display: flex;
+}
+
+.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryHeading {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h4-size);
+  font-weight: var(--typography-headline-h4-weight);
+  line-height: var(--typography-headline-h4-line-height);
+  letter-spacing: var(--typography-headline-h4-letter-spacing);
+}
+
+.IncodeUnacceptedIdDocuments .IncodeUnacceptedIdDocumentsCountryLabel {
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h3-size);
+  font-weight: var(--typography-headline-h3-weight);
+  line-height: var(--typography-headline-h3-line-height);
+  letter-spacing: var(--typography-headline-h3-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  display: inline-flex;
+}
+
 .IncodeIdCaptureNotification {
   top: var(--spacing-24, var(--spacing-24, 24px));
   right: var(--spacing-24, var(--spacing-24, 24px));
@@ -1894,9 +2681,9 @@
   background-color: var(--color-surface-neutral-900-80, var(--surface-neutral-900-80));
   width: 100%;
   padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  box-shadow: var(--id-capture-notification-content-shadow);
   display: flex;
   overflow: hidden;
-  box-shadow: 0 2.079px 36.379px #00000059;
 }
 
 .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText {
@@ -2005,7 +2792,7 @@
 }
 
 .IncodeManualUploadPage .IncodeManualUploadTabTrigger:focus-visible {
-  border-radius: var(--radius-xs, .125rem);
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
   outline-style: var(--tw-outline-style);
   outline-offset: 2px;
   outline-width: 2px;
@@ -2398,49 +3185,6 @@
   max-width: var(--incode-form-max-w);
 }
 
-.IncodeDocumentUploadPage {
-  background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
-}
-
-.IncodeDocumentUploadInitializing {
-  height: 100%;
-  color: var(--color-text-body-0, var(--text-body-0-static));
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeDocumentUploadInitializingText {
-  margin-top: var(--spacing-16, var(--spacing-16, 16px));
-}
-
-.IncodeDocumentUploadUploading {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  display: flex;
-}
-
-.IncodeDocumentUploadError {
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-16, var(--spacing-16, 16px));
-  padding: var(--spacing-24, var(--spacing-24, 24px));
-  color: var(--color-text-body-0, var(--text-body-0-static));
-  flex-direction: column;
-  display: flex;
-}
-
-.IncodeDocumentUploadErrorMessage {
-  text-align: center;
-}
-
-.IncodeDocumentUploadRetryButton {
-  margin-top: var(--spacing-8, var(--spacing-8, 8px));
-}
-
 .IncodeComponent .IncodeDocumentCaptureFileInput {
   pointer-events: none;
   border-style: var(--tw-border-style);
@@ -2619,7 +3363,7 @@
 .IncodeComponent .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview .IncodeDocumentCaptureReviewImageContainer {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   border-radius: var(--radius-medium, var(--border-radius-medium));
-  background-color: var(--color-neutral-50, oklch(98.5% 0 0));
+  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
   flex: 1;
   display: flex;
 }
@@ -2686,7 +3430,7 @@
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-border-neutral-100, var(--border-neutral-100));
-  background-color: var(--color-neutral-50, oklch(98.5% 0 0));
+  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
   width: 100%;
   padding-inline: var(--spacing-24, var(--spacing-24, 24px));
   padding-block: var(--spacing-32, var(--spacing-32, 32px));
@@ -2698,11 +3442,11 @@
 .IncodeComponent .IncodeDocumentCapturePdfCard .IncodeImageDocumentCapturePdfPreviewContainer {
   height: var(--document-capture-pdf-preview-height);
   width: var(--spacing-120, var(--spacing-120, 120px));
-  border-radius: var(--radius-lg, .5rem);
+  border-radius: var(--radius-small, var(--border-radius-small));
   border-style: var(--tw-border-style);
   border-width: 2px;
   border-color: var(--color-border-neutral-100, var(--border-neutral-100));
-  background-color: var(--color-neutral-50, oklch(98.5% 0 0));
+  background-color: var(--color-surface-neutral-50, var(--surface-neutral-50));
   overflow: hidden;
 }
 
@@ -2959,7 +3703,7 @@
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageInner {
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageTitleContainer {
@@ -2972,11 +3716,11 @@
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionSections {
   margin-top: var(--spacing-24, var(--spacing-24, 24px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   gap: var(--spacing-24, var(--spacing-24, 24px));
   flex-direction: column;
   align-self: center;
-  width: 100%;
-  max-width: 420px;
   display: flex;
 }
 
@@ -3035,7 +3779,7 @@
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepImgPaddedBrowser {
-  padding: 5px;
+  padding: var(--geolocation-permission-step-padding);
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepText {
@@ -3078,6 +3822,7 @@
 
 @media (min-width: 48rem) {
   .IncodeEkycPage .IncodePageInner {
+    height: 100%;
     padding-inline: var(--spacing-0, var(--spacing-none, 0px));
     padding-block: var(--spacing-0, var(--spacing-none, 0px));
   }
@@ -3096,6 +3841,14 @@
   display: flex;
 }
 
+@media (min-width: 48rem) {
+  .IncodeEkycPage .IncodeEkycForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
+    overflow-y: auto;
+  }
+}
+
 .IncodeEkycPage .IncodeEkycForm .IncodeInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycPage .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodePhoneInputComposed, .IncodeEkycPage .IncodeEkycForm .IncodeAddressAutocomplete {
   margin-inline: auto;
 }
@@ -3132,6 +3885,12 @@
   display: flex;
 }
 
+@media (min-width: 48rem) {
+  .IncodeEkycPage .IncodeEkycFooter {
+    flex-shrink: 0;
+  }
+}
+
 .IncodeEkycPage .IncodeEkycFooter .IncodeEkycSubmitError {
   margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   text-align: center;
@@ -3148,34 +3907,20 @@
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .IncodeEkycPage.IncodePageContainer {
     margin-top: var(--spacing-0, var(--spacing-none, 0px));
     height: 100%;
     max-height: none;
   }
 
-  .IncodeEkycPage .IncodePageInner {
-    height: 100%;
-  }
-
   .IncodeEkycPage.IncodeEkycPageScrollable {
-    max-width: 500px;
+    max-width: var(--ekyb-scrollable-page);
   }
 
   .IncodeEkycPage .IncodePageContent {
     min-height: var(--spacing-0, var(--spacing-none, 0px));
   }
-
-  .IncodeEkycPage .IncodeEkycForm {
-    min-height: var(--spacing-0, var(--spacing-none, 0px));
-    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
-    overflow-y: auto;
-  }
-
-  .IncodeEkycPage .IncodeEkycFooter {
-    flex-shrink: 0;
-  }
 }
 
 .IncodeEkybPage {
@@ -3196,6 +3941,14 @@
   display: flex;
 }
 
+@media (min-width: 48rem) {
+  .IncodeEkybPage .IncodeEkybForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
+    overflow-y: auto;
+  }
+}
+
 .IncodeEkybPage .IncodeEkybForm .IncodeInputComposed, .IncodeEkybPage .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybPage .IncodeEkybForm .IncodeCountrySelector, .IncodeEkybPage .IncodeEkybForm .IncodeFormField {
   margin-inline: auto;
 }
@@ -3257,7 +4010,7 @@
   margin-inline: auto;
   margin-top: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   padding-block: var(--spacing-12, var(--spacing-12, 12px));
 }
 
@@ -3265,29 +4018,23 @@
   margin-top: var(--spacing-24, var(--spacing-24, 24px));
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
+  .IncodeEkybPage .IncodeEkybFooter {
+    flex-shrink: 0;
+  }
+
   .IncodeEkybPage.IncodePageContainer {
     margin-top: var(--spacing-0, var(--spacing-none, 0px));
     max-height: none;
   }
 
   .IncodeEkybPage.IncodeEkybPageScrollable {
-    max-width: 500px;
+    max-width: var(--ekyb-scrollable-page);
   }
 
   .IncodeEkybPage .IncodePageContent {
     min-height: var(--spacing-0, var(--spacing-none, 0px));
   }
-
-  .IncodeEkybPage .IncodeEkybForm {
-    min-height: var(--spacing-0, var(--spacing-none, 0px));
-    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
-    overflow-y: auto;
-  }
-
-  .IncodeEkybPage .IncodeEkybFooter {
-    flex-shrink: 0;
-  }
 }
 
 .IncodeRedirectRoot {
@@ -3347,7 +4094,7 @@
 .IncodeRedirectContainer .IncodeRedirectToast {
   top: var(--spacing-16, var(--spacing-16, 16px));
   z-index: 50;
-  animation: 3s ease-in-out forwards fadeInOut;
+  animation: 3s ease-in-out forwards incodeToastFadeInOut;
   position: absolute;
   left: 50%;
 }
@@ -3358,28 +4105,6 @@
   display: inline-flex;
 }
 
-@keyframes fadeInOut {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -20px);
-  }
-
-  15% {
-    opacity: 1;
-    transform: translate(-50%);
-  }
-
-  85% {
-    opacity: 1;
-    transform: translate(-50%);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translate(-50%, -20px);
-  }
-}
-
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader {
   flex-direction: column;
   align-items: center;
@@ -3388,7 +4113,6 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogoWrapper {
-  --min-height-logo-wrapper: 44px;
   width: 100%;
   min-height: var(--min-height-logo-wrapper);
   justify-content: center;
@@ -3479,7 +4203,7 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs .IncodeRedirectTab:focus-visible {
-  border-radius: var(--radius-xs, .125rem);
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
   outline-style: var(--tw-outline-style);
   outline-offset: 2px;
   outline-width: 2px;
@@ -3590,7 +4314,6 @@
 }
 
 .IncodeRedirectFinishedContainer .IncodeRedirectFinishedTitle {
-  --width-finished-title: 500px;
   margin-block: var(--spacing-20, var(--spacing-20, 20px));
   text-align: center;
   font-size: var(--text-3xl, 1.875rem);
@@ -3602,7 +4325,6 @@
 }
 
 .IncodeRedirectFinishedContainer .IncodeRedirectFinishedSubtitle {
-  --width-finished-subtitle: 400px;
   text-align: center;
   font-size: var(--text-2xl, 1.5rem);
   line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
@@ -3612,7 +4334,7 @@
   width: var(--width-finished-subtitle);
 }
 
-.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
+.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .IncodeRichTextMarkup {
   display: inline;
 }
 
@@ -3648,7 +4370,7 @@
   overflow-y: auto;
 }
 
-.IncodeConsentPage .IncodeConsentBody .IncodeRichText .markup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {
+.IncodeConsentPage .IncodeConsentBody .IncodeRichText .IncodeRichTextMarkup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {
   margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   font-family: var(--typography-body-family);
   font-size: var(--typography-body-m-regular-size);
@@ -3658,7 +4380,7 @@
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeConsentPage .IncodeConsentBody .IncodeRichText .markup a, .IncodeConsentPage .IncodeConsentBody .IncodeRichText a {
+.IncodeConsentPage .IncodeConsentBody .IncodeRichText .IncodeRichTextMarkup a, .IncodeConsentPage .IncodeConsentBody .IncodeRichText a {
   color: var(--color-icon-brand-600, var(--icon-brand-600));
   text-decoration-line: underline;
 }
@@ -3707,11 +4429,11 @@
   color: var(--color-checkbox-text-default, var(--checkbox-text-default));
 }
 
-.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
+.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .IncodeRichTextMarkup {
   display: inline;
 }
 
-.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup p, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText p {
+.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .IncodeRichTextMarkup p, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText p {
   margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
   font-family: var(--typography-checkbox-radio-family);
   font-size: var(--typography-checkbox-radio-s-size);
@@ -3872,7 +4594,7 @@
 
 .IncodeIdentityReusePage .IncodeIdentityReuseCard:focus-visible {
   outline: var(--focus-outline-width) solid var(--border-status-focus);
-  outline-offset: var(--focus-outline-width);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .IncodeIdentityReusePage .IncodeIdentityReuseCardSelected, .IncodeIdentityReusePage .IncodeIdentityReuseCardSelected:hover {
@@ -4222,8 +4944,8 @@
 }
 
 .IncodeFormField {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   width: 100%;
-  margin-bottom: .75rem;
 }
 
 .IncodeUnsupportedModule {
@@ -4367,28 +5089,23 @@
   inherits: false
 }
 
-@property --tw-leading {
+@property --tw-duration {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-font-weight {
+@property --tw-outline-style {
   syntax: "*";
-  inherits: false
+  inherits: false;
+  initial-value: solid;
 }
 
-@property --tw-tracking {
+@property --tw-font-weight {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
-@property --tw-duration {
+@property --tw-leading {
   syntax: "*";
   inherits: false
 }