@incodetech/web 2.2.0 → 2.3.0-rc.1

package/dist/flow/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;
     }
   }
 }
@@ -42,6 +41,28 @@
   }
 }
 
+@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;
@@ -56,21 +77,14 @@
   fill: var(--color-icon-neutral-50, var(--icon-neutral-50-static));
 }
 
-.IncodeCaptureCapturingPage .IncodeCaptureCapturingActions {
-  justify-content: center;
-  margin-top: auto;
-  display: flex;
-}
-
 .IncodePrivacyLensBanner {
+  max-width: var(--privacy-lens-banner-max-w);
   text-align: center;
-  color: #4a5568;
-  text-align: center;
-  max-width: 320px;
+  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;
-  padding: 0 1rem 1rem;
-  font-size: .95rem;
-  line-height: 1.4;
 }
 
 .IncodeCaptureStatusPage .IncodeCaptureStatusContainer {
@@ -82,21 +96,18 @@
 
 .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;
+  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;
-  max-width: 275px;
   display: flex;
 }
 
@@ -115,6 +126,178 @@
   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;
+}
+
 .IncodePhonePage .IncodePageContent {
   padding-top: var(--spacing-32, var(--spacing-32, 32px));
   padding-bottom: var(--spacing-16, var(--spacing-16, 16px));
@@ -123,7 +306,7 @@
 
 .IncodePhoneInputContainer {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeEmailInput, .IncodeEmailInputContainer {
@@ -157,30 +340,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 {
@@ -240,10 +426,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;
 }
@@ -287,26 +473,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;
@@ -317,9 +507,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;
@@ -330,12 +520,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 {
@@ -498,9 +688,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;
@@ -537,14 +727,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;
@@ -563,11 +753,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 {
@@ -582,11 +772,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 {
@@ -602,44 +792,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;
 }
 
 .IncodeFlowStart {
@@ -674,34 +828,36 @@
 }
 
 .IncodeFlowStartLogoContainer {
+  min-width: 100%;
+  max-height: var(--flow-start-logo-container-max-h);
   justify-content: center;
   align-items: center;
-  min-width: 100px;
-  max-height: 250px;
   display: flex;
 }
 
 .IncodeFlowStartLogo {
-  object-fit: contain;
-  width: 260px;
   max-width: 100%;
-  height: auto;
   max-height: 100%;
+  width: var(--flow-start-logo-width);
+  object-fit: contain;
+  height: auto;
 }
 
 @media screen and (max-width: 767px) {
   .IncodeFlowStartLogo {
-    width: 200px;
+    width: var(--flow-start-logo-width-mobile);
   }
 }
 
 .IncodeFlowStartSubtitle {
-  color: #20263d;
+  margin-top: var(--spacing-8, var(--spacing-8, 8px));
   text-align: center;
-  margin-top: 10px;
-  font-size: 1.5rem;
-  font-weight: bold;
-  line-height: 1.37;
+  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));
 }
 
 .IncodeFlowStartButton {
@@ -885,21 +1041,29 @@
 }
 
 .IncodeComponent .IncodeFlowCompleted h1.IncodeFlowCompletedTitle {
-  color: #20263d;
+  margin-inline: var(--spacing-0, var(--spacing-none, 0px));
+  margin-block: var(--spacing-20, var(--spacing-20, 20px));
   text-align: left;
   width: 100%;
-  margin: 20px 0;
-  font-size: 2rem;
-  font-weight: 700;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h1-size);
+  font-weight: var(--typography-headline-h1-weight);
+  line-height: var(--typography-headline-h1-line-height);
+  letter-spacing: var(--typography-headline-h1-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeComponent .IncodeFlowCompleted p.IncodeFlowCompletedSubtitle {
-  color: #20263d;
+  margin-inline: var(--spacing-0, var(--spacing-none, 0px));
+  margin-block: var(--spacing-20, var(--spacing-20, 20px));
   text-align: left;
   width: 100%;
-  margin: 20px 0;
-  font-size: 1rem;
-  font-weight: 700;
+  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));
 }
 
 @media screen and (min-width: 992px) {
@@ -1122,8 +1286,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);
@@ -1137,7 +1301,7 @@
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {
@@ -1208,7 +1372,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;
@@ -1306,9 +1470,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;
@@ -1365,7 +1529,7 @@
 }
 
 .IncodeChooserPage .IncodePageTitle {
-  max-width: 15.625rem;
+  max-width: var(--incode-form-max);
 }
 
 .IncodeChooserPage .IncodeChooserContainer {
@@ -1379,7 +1543,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;
@@ -1389,15 +1553,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 {
@@ -1463,7 +1627,7 @@
 
 @media (min-width: 48rem) {
   .IncodeIdCapturePage {
-    background-color: var(--color-black, #000);
+    background-color: var(--capture-page-backdrop-color);
   }
 }
 
@@ -1600,8 +1764,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%);
@@ -1634,6 +1798,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;
 }
@@ -1654,6 +1839,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;
@@ -1759,10 +1956,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 {
@@ -1806,7 +2003,7 @@
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {
@@ -1815,7 +2012,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%;
@@ -1840,7 +2038,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;
@@ -1918,9 +2116,10 @@
   }
 }
 
-.IncodeIdProcessingLayout .IncodeIdProcessingResultContent {
+.IncodeIdProcessingLayout .IncodeIdProcessingResultContent, .IncodeIdProcessingLayout .IncodeIdProcessingResultStatus {
   flex-direction: column;
   align-items: center;
+  width: 100%;
   display: flex;
 }
 
@@ -1942,7 +2141,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 {
@@ -1997,54 +2196,94 @@
   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);
+}
+
+.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));
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  justify-content: center;
+  display: flex;
+  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);
 }
 
-.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));
-  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
-  justify-content: center;
-  display: flex;
-  position: absolute;
+.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;
 }
 
 .IncodeManualUploadPage .IncodeManualUploadContainer {
@@ -2117,7 +2356,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;
@@ -2510,49 +2749,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);
@@ -2731,7 +2927,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;
 }
@@ -2798,7 +2994,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));
@@ -2810,11 +3006,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;
 }
 
@@ -3071,7 +3267,7 @@
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageInner {
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageTitleContainer {
@@ -3084,11 +3280,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;
 }
 
@@ -3147,7 +3343,7 @@
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepImgPaddedBrowser {
-  padding: 5px;
+  padding: var(--geolocation-permission-step-padding);
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepText {
@@ -3190,6 +3386,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));
   }
@@ -3208,6 +3405,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;
 }
@@ -3244,6 +3449,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;
@@ -3260,34 +3471,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 {
@@ -3308,6 +3505,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;
 }
@@ -3369,7 +3574,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));
 }
 
@@ -3377,29 +3582,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 {
@@ -3459,7 +3658,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%;
 }
@@ -3470,28 +3669,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;
@@ -3500,7 +3677,6 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogoWrapper {
-  --min-height-logo-wrapper: 44px;
   width: 100%;
   min-height: var(--min-height-logo-wrapper);
   justify-content: center;
@@ -3591,7 +3767,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;
@@ -3702,7 +3878,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);
@@ -3714,7 +3889,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)));
@@ -3724,7 +3898,7 @@
   width: var(--width-finished-subtitle);
 }
 
-.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
+.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .IncodeRichTextMarkup {
   display: inline;
 }
 
@@ -3760,7 +3934,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);
@@ -3770,7 +3944,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;
 }
@@ -3819,11 +3993,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);
@@ -3880,6 +4054,11 @@
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
+.IncodeDynamicFormsPage {
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  animation-fill-mode: both;
+}
+
 .IncodeDynamicFormsPage .IncodePageTitleContainer {
   margin-top: var(--spacing-24, var(--spacing-24, 24px));
 }
@@ -4055,6 +4234,18 @@
   animation-fill-mode: both;
 }
 
+.IncodeFieldComparisonPage .IncodeSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
 .IncodeFieldComparisonPage .IncodeFieldComparisonForm {
   margin-top: var(--spacing-32, var(--spacing-32, 32px));
   justify-content: center;
@@ -4102,7 +4293,7 @@
   justify-content: space-between;
 }
 
-.IncodeElectronicSignature .IncodePageContent:has(.IncodeElectronicSignatureUploadBody), .IncodeElectronicSignature .IncodePageContent:has(.IncodeElectronicSignatureDocViewHeader) {
+.IncodeElectronicSignature .IncodePageContent:has(.IncodeElectronicSignatureUploadBody), .IncodeElectronicSignature .IncodePageContent:has(.IncodeElectronicSignatureDocViewHeader), .IncodeElectronicSignature .IncodePageContent:has(.IncodeElectronicSignatureApplicationFormHeader) {
   padding-top: var(--spacing-0, var(--spacing-none, 0px));
 }
 
@@ -4235,9 +4426,10 @@
 }
 
 .IncodeElectronicSignature .IncodeElectronicSignatureSigningTop {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
   flex-direction: column;
   flex-shrink: 0;
-  align-items: center;
   display: flex;
 }
 
@@ -4295,6 +4487,12 @@
   padding: var(--spacing-0, var(--spacing-none, 0px));
 }
 
+.IncodeElectronicSignature .IncodeElectronicSignatureApplicationFormButton {
+  color: var(--color-text-link-default, var(--text-link-default));
+  align-self: center;
+  text-decoration-line: underline;
+}
+
 .IncodeElectronicSignature .IncodeElectronicSignatureConsents {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   width: 100%;
@@ -4397,6 +4595,59 @@
   width: 100%;
 }
 
+.IncodeElectronicSignature .IncodeElectronicSignatureApplicationFormHeader {
+  min-height: var(--page-header-height);
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  padding-block: var(--spacing-8, var(--spacing-8, 8px));
+  flex-shrink: 0;
+  margin-inline: auto;
+  display: flex;
+}
+
+.IncodeElectronicSignature .IncodeElectronicSignatureApplicationFormTitle {
+  min-width: var(--spacing-0, var(--spacing-none, 0px));
+  text-align: left;
+  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));
+  --tw-outline-style: none;
+  outline-style: none;
+  flex: 1;
+}
+
+.IncodeElectronicSignature .IncodeElectronicSignatureApplicationFormScroll {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  flex: 1;
+  margin-inline: auto;
+  overflow-y: auto;
+}
+
+.IncodeElectronicSignature .IncodeElectronicSignatureApplicationFormScroll:focus-visible {
+  outline: var(--focus-outline-width) solid var(--border-status-focus);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.IncodeElectronicSignature .IncodeElectronicSignatureApplicationFormText {
+  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);
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
 .IncodeCertificateIssuancePage {
   animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
   animation-fill-mode: both;
@@ -4519,8 +4770,8 @@
 }
 
 .IncodeFormField {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   width: 100%;
-  margin-bottom: .75rem;
 }
 
 .IncodeFiscalQrPage {
@@ -4530,6 +4781,18 @@
   animation-fill-mode: both;
 }
 
+.IncodeFiscalQrPage .IncodeSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
 .IncodeFiscalQrPage .IncodeFiscalQrTutorialContent {
   margin-top: var(--spacing-32, var(--spacing-32, 32px));
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
@@ -4542,7 +4805,7 @@
 
 @media (min-width: 48rem) {
   .IncodeFiscalQrPage.IncodeFiscalQrCapturePage {
-    background-color: var(--color-black, #000);
+    background-color: var(--capture-page-backdrop-color);
   }
 }
 
@@ -4608,12 +4871,12 @@
 
 .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;
 }
 
@@ -4625,7 +4888,7 @@
   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);
+  background-color: var(--color-surface-neutral-100-static, var(--surface-neutral-100-static));
   justify-content: center;
   align-items: center;
   display: flex;
@@ -4643,12 +4906,17 @@
 }
 
 .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);
 }
@@ -4660,12 +4928,17 @@
 }
 
 .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);
 }
@@ -4690,7 +4963,7 @@
 .IncodeLoadingBorder {
   aspect-ratio: 1;
   width: 100%;
-  max-width: 335px;
+  max-width: var(--face-capture-frame-max-w);
   position: absolute;
 }
 
@@ -4745,9 +5018,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 {
@@ -4787,7 +5060,7 @@
 }
 
 .IncodeVideoSelfieCapturePage {
-  background-color: var(--color-black, #000);
+  background-color: var(--capture-page-backdrop-color);
 }
 
 .IncodeVideoSelfieCapturePage .IncodePageInner {
@@ -4937,7 +5210,7 @@
 }
 
 .IncodeVideoSelfieTutorialStartButton {
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   margin: auto;
 }
 
@@ -5179,20 +5452,22 @@
 }
 
 .IncodeVsPoaBanner {
-  background: #000c;
+  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;
-  padding: 80px 16px 16px;
   display: flex;
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
 }
 
 .IncodeVsPoaBannerText {
   text-align: center;
-  color: #fff;
+  color: var(--poa-mask-banner-text-color);
   margin: 0;
   font-size: 1.5rem;
   font-weight: 700;
@@ -5200,16 +5475,16 @@
 }
 
 .IncodeVsPoaBannerEmphasis {
-  color: #00b2fd;
+  color: var(--poa-mask-emphasis-color);
 }
 
 .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;
   display: flex;
   position: absolute;
-  bottom: 16px;
-  left: 16px;
-  right: 16px;
 }
 
 .IncodeVsPoaButton {
@@ -5400,28 +5675,23 @@ incode-flow {
   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
 }