@incodetech/web 2.0.1-rc.0 → 2.1.0-rc.0

package/dist/flow/styles.css

@@ -3285,6 +3285,96 @@
     }
   }
 
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+
   .incode-container {
     width: 100%;
   }
@@ -3437,10 +3527,6 @@
     resize: both;
   }
 
-  .flex-col {
-    flex-direction: column;
-  }
-
   .items-center {
     align-items: center;
   }
@@ -3821,6 +3907,16 @@
     font-weight: var(--typography-button-m-underlined-weight);
     line-height: var(--typography-button-m-underlined-line-height);
     letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: auto;
@@ -4577,23 +4673,6 @@
   display: flex;
 }
 
-.IncodeGovtValidation .IncodeGovtValidationStatus {
-  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeGovtValidation .IncodeGovtValidationText {
-  margin-top: var(--spacing-12, var(--spacing-12, 12px));
-  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);
-}
-
 .IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodePageContent {
   flex-direction: column;
   align-items: center;
@@ -5341,14 +5420,31 @@
   justify-content: space-between;
 }
 
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeCaptureFooterCaptureSection {
+  position: relative;
+}
+
 .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer {
-  animation: .5s ease-out forwards slideUp;
+  pointer-events: none;
+  z-index: 1000;
+  --manual-capture-tooltip-button-gap: var(--spacing-4);
+  --manual-capture-tooltip-button-top-offset: var(--spacing-12);
+  --manual-capture-tooltip-button-center-offset: calc(var(--spacing-32) + var(--manual-capture-tooltip-button-gap));
+  width: max-content;
+  left: 50%;
+  bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));
+  justify-content: center;
+  animation: .35s ease-in 3.5s forwards manualCaptureTooltipExit;
+  display: flex;
+  position: absolute;
+  transform: translateX(-50%);
 }
 
 .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {
   border-radius: var(--radius-medium, var(--border-radius-medium));
   background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
   padding: var(--spacing-16, var(--spacing-16, 16px));
+  animation: .5s ease-out forwards slideUp;
 }
 
 .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {
@@ -5375,6 +5471,18 @@
   aspect-ratio: 42 / 30;
 }
 
+@keyframes manualCaptureTooltipExit {
+  from {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, calc(50% + var(--manual-capture-tooltip-button-center-offset)));
+  }
+}
+
 .IncodeIdManualCaptureButton {
   bottom: var(--spacing-24, var(--spacing-24, 24px));
   z-index: 100;
@@ -5808,10 +5916,11 @@
 }
 
 .IncodeManualUploadPage .IncodeManualUploadHintCard li {
-  font-family: var(--font-family-dm-sans, var(--primitive-typography-family-dm-sans));
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --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-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));
 }
 
@@ -5834,12 +5943,11 @@
   padding-inline: var(--spacing-12, var(--spacing-12, 12px));
   padding-block: var(--spacing-16, var(--spacing-16, 16px));
   text-align: center;
-  font-family: var(--font-family-dm-sans, var(--primitive-typography-family-dm-sans));
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  --tw-leading: var(--spacing-16, var(--spacing-16, 16px));
-  line-height: var(--spacing-16, var(--spacing-16, 16px));
-  --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-checkbox-radio-family);
+  font-size: var(--typography-checkbox-radio-m-size);
+  font-weight: var(--typography-checkbox-radio-m-weight);
+  line-height: var(--typography-checkbox-radio-m-line-height);
+  letter-spacing: var(--typography-checkbox-radio-m-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   background-color: #0000;
   border-style: solid;
@@ -5857,8 +5965,6 @@
 
 .IncodeManualUploadPage .IncodeManualUploadTabTrigger--active {
   border-bottom-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
-  --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(--color-text-body-primary, var(--text-body-800-primary));
 }
 
@@ -5890,6 +5996,7 @@
 }
 
 .IncodeManualUploadSlot {
+  cursor: pointer;
   align-items: center;
   gap: var(--spacing-12, var(--spacing-12, 12px));
   border-radius: var(--radius-medium, var(--border-radius-medium));
@@ -5903,6 +6010,7 @@
   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;
 }
 
@@ -5933,11 +6041,7 @@
 }
 
 .IncodeManualUploadSlot .IncodeManualUploadSlotAction {
-  cursor: pointer;
   border-radius: var(--radius-full, var(--border-radius-full));
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
   background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
   padding: var(--spacing-8, var(--spacing-8, 8px));
   color: var(--color-button-primary-text-default, var(--button-primary-text-default));
@@ -5945,7 +6049,6 @@
   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;
-  border-style: none;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
@@ -5953,27 +6056,34 @@
   display: inline-flex;
 }
 
-.IncodeManualUploadSlot .IncodeManualUploadSlotAction:hover:not(:disabled) {
+.IncodeManualUploadSlot: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));
+}
+
+.IncodeManualUploadSlot:hover:not(:disabled) .IncodeManualUploadSlotAction {
   background-color: var(--color-button-primary-surface-hover, var(--button-primary-surface-hover));
 }
 
-.IncodeManualUploadSlot .IncodeManualUploadSlotAction:disabled {
+.IncodeManualUploadSlot:disabled {
   cursor: not-allowed;
+  opacity: .5;
+}
+
+.IncodeManualUploadSlot:disabled .IncodeManualUploadSlotAction {
   background-color: var(--color-button-primary-surface-disabled, var(--button-primary-surface-disabled));
   color: var(--color-button-primary-text-disabled, var(--button-primary-text-disabled));
 }
 
-.IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction, .IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction:hover:not(:disabled) {
+.IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction, .IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded:hover:not(:disabled) .IncodeManualUploadSlotAction {
   padding: var(--spacing-0, var(--spacing-none, 0px));
   color: var(--color-surface-status-positive-500, var(--surface-status-positive-500));
   background-color: #0000;
 }
 
-.IncodeManualUploadSlot.IncodeManualUploadSlot--disabled {
-  opacity: .5;
-}
-
-.IncodeManualUploadSlot .IncodeManualUploadSlotInput {
+.IncodeManualUploadSlot + .IncodeManualUploadSlotInput {
   clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
@@ -6121,25 +6231,16 @@
   overflow: hidden;
 }
 
-.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar {
+.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBar {
   border-radius: var(--radius-full, var(--border-radius-full));
   background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));
   width: var(--digital-id-progress-bar-w);
   height: var(--digital-id-progress-bar-h);
-  position: relative;
   overflow: hidden;
 }
 
-.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar > span {
-  top: var(--spacing-0, var(--spacing-none, 0px));
-  left: var(--spacing-0, var(--spacing-none, 0px));
+.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBarFill {
   border-radius: var(--radius-full, var(--border-radius-full));
-  height: 100%;
-  transition-property: all;
-  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));
-  background-color: var(--color-icon-status-positive, var(--icon-status-positive));
-  position: absolute;
 }
 
 .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {
@@ -6547,11 +6648,8 @@
 }
 
 .IncodeDocumentCapturePdfCard .ImageDocumentCapturePdfPreviewContainer .ImageDocumentCapturePdfPreview {
-  border-style: var(--tw-border-style);
-  border-width: 0;
-  width: calc(100% + 4px);
-  height: calc(100% + 4px);
-  margin: -2px;
+  width: 100%;
+  height: 100%;
 }
 
 .IncodeDocumentCapturePdfCard .IncodeDocumentCapturePdfFileName {
@@ -6837,8 +6935,9 @@
 }
 
 .IncodeEkycPage {
-  max-width: 480px;
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
   margin-inline: auto;
+  animation-fill-mode: both;
 }
 
 @media (min-width: 48rem) {
@@ -6857,6 +6956,7 @@
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   width: 100%;
+  height: 100%;
   display: flex;
 }
 
@@ -6878,13 +6978,13 @@
   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));
 }
 
 .IncodeEkycPage .IncodeEkycRadioGroup {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   margin-inline: auto;
 }
 
@@ -6908,6 +7008,10 @@
   margin-top: 0;
 }
 
+.IncodeEkycPage .IncodeEkycFooter button {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+}
+
 @media (min-width: 768px) {
   .IncodeEkycPage.IncodePageContainer {
     height: 100dvh;
@@ -6933,17 +7037,15 @@
     overflow-y: auto;
   }
 
-  .IncodeEkycPage.IncodeEkycPageScrollable .IncodeEkycForm {
-    margin-left: var(--spacing-8, var(--spacing-8, 8px));
-  }
-
   .IncodeEkycPage .IncodeEkycFooter {
     flex-shrink: 0;
   }
 }
 
 .IncodeEkybPage {
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
   margin-inline: auto;
+  animation-fill-mode: both;
 }
 
 .IncodeEkybPage .IncodeEkybSpinner {
@@ -7099,7 +7201,6 @@
   max-width: var(--redirect-card-max-width);
   min-height: min(var(--redirect-card-max-width), var(--redirect-card-min-height));
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
   display: flex;
   overflow-x: clip;
@@ -7193,24 +7294,31 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav {
-  --max-width-bottom-nav: 390px;
   align-items: center;
   gap: var(--spacing-40, var(--spacing-40, 40px));
   width: 100%;
-  max-width: var(--max-width-bottom-nav);
+  max-width: var(--redirect-form-column-max-width);
   flex-direction: column;
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectVerifiedBy {
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterContent {
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: var(--spacing-4, var(--spacing-4, 4px));
-  padding-top: var(--spacing-8, var(--spacing-8, 8px));
-  padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  width: 100%;
   display: flex;
 }
 
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterContentText {
+  margin-block: var(--spacing-32, var(--spacing-32, 32px));
+  font-family: var(--Button-family, "DM Sans");
+  letter-spacing: 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 100%;
+}
+
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs {
   justify-content: center;
   align-items: flex-end;
@@ -7261,6 +7369,7 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectTabDescription {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
@@ -7283,299 +7392,54 @@
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInput, .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputContainer {
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  display: flex;
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputComposed {
+  --phone-input-country-code-width: var(--redirect-phone-input-country-code-width);
+  max-width: var(--redirect-form-column-max-width);
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputRow {
-  --max-width-phone-input-row: 340px;
-  align-items: stretch;
-  gap: var(--spacing-8, var(--spacing-8, 8px));
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectSmsSendButton {
   width: 100%;
-  max-width: var(--max-width-phone-input-row);
-  display: flex;
-  position: relative;
+  max-width: var(--redirect-form-column-max-width);
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper {
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-input-surface-default, var(--input-surface-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;
-  flex: 1;
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent {
+  flex-direction: column;
   align-items: center;
-  transition-duration: .2s;
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper:focus-within {
-  border-color: var(--color-input-border-focused, var(--input-border-focused));
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentTitle {
+  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));
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper.IncodePhoneInputWrapperError {
-  border-color: var(--color-input-border-negative, var(--input-border-negative));
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentPhone {
+  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));
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper.IncodePhoneInputWrapperDisabled {
-  border-color: var(--color-input-border-disabled, var(--input-border-disabled));
-  background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector {
-  --width-country-selector: 124px;
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-input-surface-default, var(--input-surface-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;
-  width: var(--width-country-selector);
-  flex-shrink: 0;
-  transition-duration: .2s;
-  position: static;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector.IncodePhoneCountrySelectorOpen {
-  border-color: var(--color-input-border-focused, var(--input-border-focused));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector.IncodePhoneCountrySelectorDisabled {
-  border-color: var(--color-input-border-disabled, var(--input-border-disabled));
-  background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton {
-  width: 100%;
-  height: 100%;
-  padding: var(--spacing-8, var(--spacing-8, 8px));
-  padding-left: var(--spacing-16, var(--spacing-16, 16px));
-  cursor: pointer;
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
-  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));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  border-radius: var(--radius-small, var(--border-radius-small));
-  background-color: #0000;
-  border-style: none;
-  justify-content: center;
-  align-items: center;
-  font-family: inherit;
-  display: flex;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:disabled {
-  cursor: not-allowed;
-  color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:focus {
-  --tw-outline-style: none;
-  outline-style: none;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryFlag {
-  font-size: var(--text-24, var(--primitive-typography-size-24));
-  --tw-leading: 1;
-  line-height: 1;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryCode {
-  margin-left: var(--spacing-4, var(--spacing-4, 4px));
-  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));
-  white-space: nowrap;
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryArrow {
-  margin-left: var(--spacing-8, var(--spacing-8, 8px));
-  height: var(--spacing-24, var(--spacing-24, 24px));
-  width: var(--spacing-24, var(--spacing-24, 24px));
-  color: var(--color-icon-neutral-500, var(--icon-neutral-500));
-  transition-property: transform, translate, scale, rotate;
-  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;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryArrowUp {
-  rotate: 180deg;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:disabled .IncodePhoneCountryArrow {
-  color: var(--color-icon-neutral-300, var(--icon-neutral-300));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryDropdown {
-  --max-height-country-dropdown: 320px;
-  top: 100%;
-  right: var(--spacing-0, var(--spacing-none, 0px));
-  left: var(--spacing-0, var(--spacing-none, 0px));
-  z-index: 50;
-  margin-top: var(--spacing-8, var(--spacing-8, 8px));
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
-  padding: var(--spacing-8, var(--spacing-8, 8px));
-  max-height: var(--max-height-country-dropdown);
-  position: absolute;
-  overflow-y: auto;
-  box-shadow: 0 4px 16px #0000001f;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption {
-  cursor: pointer;
-  align-items: center;
-  gap: var(--spacing-12, var(--spacing-12, 12px));
-  border-radius: var(--radius-small, var(--border-radius-small));
-  width: 100%;
-  padding-inline: var(--spacing-12, var(--spacing-12, 12px));
-  padding-block: var(--spacing-12, var(--spacing-12, 12px));
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
-  text-align: left;
-  background-color: #0000;
-  border-style: none;
-  font-family: inherit;
-  display: flex;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption:hover {
-  background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption:focus {
-  background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
-  --tw-outline-style: none;
-  outline-style: none;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionSelected, .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionSelected:hover {
-  background-color: var(--color-surface-brand-50, var(--surface-brand-50));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionCode {
-  --min-width-country-code: 52px;
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
-  min-width: var(--min-width-country-code);
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  flex: 1;
-  overflow: hidden;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField {
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
-  width: 100%;
-  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
-  padding-block: var(--spacing-16, var(--spacing-16, 16px));
-  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));
-  color: var(--color-input-text-field-default, var(--input-text-field-default));
-  --tw-outline-style: none;
-  border-radius: var(--radius-small, var(--border-radius-small));
-  background-color: #0000;
-  border-style: none;
-  outline-style: none;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField::placeholder {
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField:disabled {
-  cursor: not-allowed;
-  color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputError {
-  margin: var(--spacing-0, var(--spacing-none, 0px));
-  text-align: center;
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectSmsSendButton {
-  --max-width-sms-button: 335px;
-  width: 100%;
-  max-width: var(--max-width-sms-button);
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent {
-  flex-direction: column;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentTitle {
-  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));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentPhone {
-  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));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentActions {
-  --width-link-sent-actions: 335px;
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-4, var(--spacing-4, 4px));
-  font-family: var(--Button-family, "DM Sans");
-  letter-spacing: 0;
-  width: var(--width-link-sent-actions);
-  flex-wrap: wrap;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 100%;
-  display: flex;
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentActions {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  font-family: var(--Button-family, "DM Sans");
+  letter-spacing: 0;
+  width: var(--redirect-form-column-max-width);
+  flex-wrap: wrap;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 100%;
+  display: flex;
 }
 
 .IncodeRedirectFinishedContainer {
@@ -7620,10 +7484,8 @@
 
 .IncodeConsentPage {
   height: 100%;
-}
-
-.IncodeConsentPage .IncodePageInner {
-  padding: var(--spacing-24, var(--spacing-24, 24px));
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  animation-fill-mode: both;
 }
 
 .IncodeConsentPage .IncodePageContent {
@@ -7631,9 +7493,11 @@
 }
 
 .IncodeConsentPage .IncodeConsentContent {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
   height: 100%;
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   justify-content: space-between;
+  align-items: center;
   gap: var(--spacing-24, var(--spacing-24, 24px));
   flex-direction: column;
   display: flex;
@@ -7641,7 +7505,9 @@
 
 .IncodeConsentPage .IncodeConsentBody {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
-  gap: var(--spacing-16, var(--spacing-16, 16px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-24, var(--spacing-24, 24px));
   flex-direction: column;
   flex: 1;
   display: flex;
@@ -7650,24 +7516,21 @@
 
 .IncodeConsentPage .IncodeConsentBody .IncodeRichText .markup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {
   margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
-  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);
-}
-
-.IncodeConsentPage .IncodeConsentTitle {
-  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);
+  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-primary, var(--text-body-800-primary));
 }
 
 .IncodeConsentPage .IncodeConsentSubtitle {
-  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+  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-primary, var(--text-body-800-primary));
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxList {
@@ -7680,7 +7543,8 @@
   border-radius: var(--radius-medium, var(--border-radius-medium));
   background-color: var(--color-surface-brand-50, var(--surface-brand-50));
   width: 100%;
-  padding: var(--spacing-16, var(--spacing-16, 16px));
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  padding-block: var(--spacing-20, var(--spacing-20, 20px));
 }
 
 .IncodeConsentPage .IncodeConsentCheckbox .IncodeCheckboxLabel {
@@ -7701,7 +7565,7 @@
   font-weight: var(--typography-checkbox-radio-s-weight);
   line-height: var(--typography-checkbox-radio-s-line-height);
   letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  color: var(--color-checkbox-text-default, var(--checkbox-text-default));
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
@@ -7719,10 +7583,11 @@
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup a, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText a {
-  color: var(--color-surface-brand-600, var(--surface-brand-600-static));
+  color: var(--color-link-default, var(--link-default));
 }
 
 .IncodeConsentPage .IncodeConsentButton {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
 }
 
@@ -7734,6 +7599,18 @@
   display: flex;
 }
 
+.IncodeConsentPage .IncodeConsentSubmitError {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  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-input-text-helper-negative, var(--input-text-helper-negative));
+  margin-top: 0;
+}
+
 .IncodeCustomFieldsForm {
   margin-top: var(--spacing-32, var(--spacing-32, 32px));
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
@@ -7756,14 +7633,6 @@
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
-.IncodeDynamicFormsProgress {
-  margin-bottom: var(--spacing-4, var(--spacing-4, 4px));
-  text-align: center;
-  font-size: var(--text-sm, .875rem);
-  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
-  color: var(--text-secondary);
-}
-
 .IncodeDynamicFormsPage .IncodePageTitleContainer {
   margin-top: var(--spacing-24, var(--spacing-24, 24px));
 }
@@ -7772,19 +7641,27 @@
   align-items: center;
 }
 
-.IncodeDynamicFormsForm {
-  flex-direction: column;
+.IncodeDynamicFormsPage .IncodeDynamicFormsProgress {
+  margin-bottom: var(--spacing-4, var(--spacing-4, 4px));
+  text-align: center;
+  font-size: var(--text-sm, .875rem);
+  line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));
+  color: var(--text-secondary);
+}
+
+.IncodeDynamicFormsPage .IncodeDynamicFormsForm {
   width: 100%;
-  max-width: 420px;
   height: 100%;
+  max-width: var(--incode-form-max-w);
+  flex-direction: column;
   display: flex;
 }
 
-.IncodeDynamicFormsForm button {
+.IncodeDynamicFormsPage .IncodeDynamicFormsForm button {
   margin-top: auto;
 }
 
-.IncodeDynamicFormsField {
+.IncodeDynamicFormsPage .IncodeDynamicFormsField {
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   align-items: flex-start;
@@ -7792,6 +7669,18 @@
   display: flex;
 }
 
+.IncodeDynamicFormsPage .IncodeSrOnly, .IncodeSignature .IncodeSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
 .IncodeSignature .IncodeSignatureContent {
   width: 100%;
   height: 100%;
@@ -7810,17 +7699,15 @@
   animation-fill-mode: both;
 }
 
-.IncodeSignature .IncodeSignatureButtonContainer .IncodeButton.IncodeButtonPrimary {
-  transition: background-color .35s ease-out, color .35s ease-out, border-color .35s ease-out, opacity .35s ease-out, box-shadow .35s ease-out;
-}
-
 .IncodeSignature .SignatureCanvasContainer {
   width: 100%;
   padding-inline: var(--spacing-16, var(--spacing-16, 16px));
   padding-block: var(--spacing-8, var(--spacing-8, 8px));
   border-radius: var(--radius-small, var(--border-radius-small));
   border-style: var(--tw-border-style);
-  border-width: 1px;
+  border-width: var(--border-width-regular, var(--primitive-border-width-1));
+  --tw-border-style: solid;
+  border-style: solid;
   border-color: var(--color-input-border-default, var(--input-border-default));
   background-color: var(--color-input-surface-default, var(--input-surface-default));
   height: var(--signature-canvas-height);
@@ -7864,6 +7751,22 @@
   display: flex;
 }
 
+.IncodeFieldComparisonPage {
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  animation-fill-mode: both;
+}
+
+.IncodeFieldComparisonPage .IncodeFieldComparisonForm {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  display: flex;
+}
+
 .IncodeWatchlistForBusinessPage {
   height: 100%;
 }
@@ -8073,24 +7976,10 @@
 }
 
 .IncodeElectronicSignatureDocRowAction {
-  cursor: pointer;
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
+  width: auto;
+  max-width: none;
+  height: auto;
   padding: var(--spacing-0, var(--spacing-none, 0px));
-  font-family: var(--typography-button-family);
-  font-size: var(--typography-button-m-underlined-size);
-  font-weight: var(--typography-button-m-underlined-weight);
-  line-height: var(--typography-button-m-underlined-line-height);
-  letter-spacing: var(--typography-button-m-underlined-letter-spacing);
-  -webkit-text-decoration-skip-ink: none;
-  text-decoration-skip-ink: none;
-  color: var(--color-text-link-default, var(--text-link-default));
-  background-color: #0000;
-  border-style: none;
-  text-decoration-line: underline;
-  text-decoration-style: solid;
-  text-decoration-thickness: auto;
 }
 
 .IncodeElectronicSignatureConsents {
@@ -8203,13 +8092,13 @@
 }
 
 .IncodeVerificationResult__center {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   flex: 1;
-  width: 100%;
-  max-width: 420px;
   margin-inline: auto;
   display: flex;
 }
@@ -8225,10 +8114,10 @@
 }
 
 .IncodeVerificationResult__actions {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   gap: var(--spacing-12, var(--spacing-12, 12px));
   flex-direction: column;
-  width: 100%;
-  max-width: 420px;
   margin-inline: auto;
   display: flex;
 }
@@ -8238,6 +8127,77 @@
   margin-bottom: .75rem;
 }
 
+.IncodeFiscalQrPage {
+  width: 100%;
+  height: 100%;
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  animation-fill-mode: both;
+}
+
+.IncodeFiscalQrPage .IncodeFiscalQrTutorialContent {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+  flex-direction: column;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+@media (min-width: 48rem) {
+  .IncodeFiscalQrPage.IncodeFiscalQrCapturePage {
+    background-color: var(--color-black, #000);
+  }
+}
+
+.IncodeFiscalQrPage.IncodeFiscalQrCapturePage .IncodePageInner {
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+}
+
+.IncodeFiscalQrPage.IncodeFiscalQrCapturePage .IncodeFiscalQrOverlay {
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
+  align-items: center;
+}
+
+.IncodeFiscalQrPage.IncodeFiscalQrCapturePage .IncodeFiscalQrOverlay .IncodeFiscalQrCaptureTopSection {
+  z-index: 10;
+  margin-top: var(--spacing-40, var(--spacing-40, 40px));
+  padding-top: var(--spacing-4, var(--spacing-4, 4px));
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  display: flex;
+}
+
+.IncodeFiscalQrPage.IncodeFiscalQrCapturePage .IncodeFiscalQrOverlay .IncodeFiscalQrCaptureBottomSection {
+  flex: 1;
+  justify-content: center;
+  align-items: flex-start;
+  display: flex;
+}
+
+.IncodeFiscalQrPage.IncodeFiscalQrCapturePage .IncodeFiscalQrOverlay .IncodeFiscalQrCaptureBottomSection .IncodeFiscalQrError {
+  z-index: 10;
+  margin-top: var(--spacing-8, var(--spacing-8, 8px));
+  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-status-negative, var(--text-status-negative));
+}
+
+.IncodeFiscalQrPage.IncodeFiscalQrCapturePage .IncodeFiscalQrButtonWrapper {
+  pointer-events: auto;
+  z-index: 10;
+}
+
+.IncodeFiscalQrPage.IncodeFiscalQrCapturePage .IncodeFiscalQrButtonWrapper .IncodeButtonLink {
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
+}
+
 .IncodeFlow {
   width: 100%;
   height: 100%;