@incodetech/web 0.0.0-dev-20260820-c751f1ee → 0.0.0-dev-20260820-e7c67ad4

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-duration: initial;
       --tw-outline-style: solid;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
     }
   }
 }
@@ -85,14 +84,13 @@
 }
 
 .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 {
@@ -104,21 +102,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;
 }
 
@@ -317,7 +312,7 @@
 
 .IncodePhoneInputContainer {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeEmailInput, .IncodeEmailInputContainer {
@@ -351,30 +346,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 {
@@ -434,10 +432,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;
 }
@@ -481,26 +479,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;
@@ -511,9 +513,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;
@@ -524,12 +526,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 {
@@ -692,9 +694,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;
@@ -731,14 +733,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;
@@ -757,11 +759,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 {
@@ -776,11 +778,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 {
@@ -832,34 +834,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 {
@@ -1043,21 +1047,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) {
@@ -1280,8 +1292,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);
@@ -1295,7 +1307,7 @@
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {
@@ -1366,7 +1378,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;
@@ -1464,9 +1476,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;
@@ -1523,7 +1535,7 @@
 }
 
 .IncodeChooserPage .IncodePageTitle {
-  max-width: 15.625rem;
+  max-width: var(--incode-form-max);
 }
 
 .IncodeChooserPage .IncodeChooserContainer {
@@ -1537,7 +1549,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;
@@ -1547,15 +1559,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 {
@@ -1583,7 +1595,6 @@
 }
 
 .IncodeIdCaptureStage {
-  --capture-result-crossfade-duration: .3s;
   width: 100%;
   height: 100%;
   position: relative;
@@ -1611,7 +1622,7 @@
 
 @media (min-width: 48rem) {
   .IncodeIdCapturePage {
-    background-color: var(--color-black, #000);
+    background-color: var(--capture-page-backdrop-color);
   }
 }
 
@@ -1893,10 +1904,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 {
@@ -1940,7 +1951,7 @@
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {
@@ -1974,7 +1985,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;
@@ -2052,7 +2063,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 {
@@ -2107,47 +2118,51 @@
   position: fixed;
 }
 
-.IncodeIdErrorMessage {
+.IncodeIdError .IncodeIdErrorMessage {
   text-align: center;
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h4-size);
+  font-weight: var(--typography-headline-h4-weight);
+  line-height: var(--typography-headline-h4-line-height);
+  letter-spacing: var(--typography-headline-h4-letter-spacing);
   color: var(--color-text-body-0, var(--text-body-0-static));
-  max-width: 350px;
+  max-width: var(--incode-form-max-w);
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
 .IncodeIdNoAttemptsContent {
   padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  max-height: var(--id-no-attempts-content-max-h);
+  max-width: var(--id-no-attempts-content-max-w);
   flex-direction: column;
   flex: 1;
   justify-content: center;
   align-items: center;
-  max-width: 800px;
-  max-height: 840px;
   margin: auto;
   display: flex;
 }
 
-.IncodeIdNoAttemptsIcon {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsIcon {
   margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
 }
 
-.IncodeIdNoAttemptsTitle {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsTitle {
   text-align: center;
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeIdNoAttemptsSubtitle {
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-normal, 400);
-  font-weight: var(--font-weight-normal, 400);
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsSubtitle {
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   text-align: center;
-  max-width: 350px;
+  max-width: var(--incode-form-max-w);
 }
 
-.IncodeIdNoAttemptsButtonContainer {
+.IncodeIdNoAttemptsContent .IncodeIdNoAttemptsButtonContainer {
   bottom: var(--spacing-32, var(--spacing-32, 32px));
   right: var(--spacing-0, var(--spacing-none, 0px));
   left: var(--spacing-0, var(--spacing-none, 0px));
@@ -2798,7 +2813,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;
 }
@@ -2865,7 +2880,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));
@@ -2881,7 +2896,7 @@
   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;
 }
 
@@ -3138,7 +3153,7 @@
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageInner {
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageTitleContainer {
@@ -3151,11 +3166,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;
 }
 
@@ -3214,7 +3229,7 @@
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepImgPaddedBrowser {
-  padding: 5px;
+  padding: var(--geolocation-permission-step-padding);
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepText {
@@ -3257,6 +3272,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));
   }
@@ -3275,6 +3291,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;
 }
@@ -3311,6 +3335,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;
@@ -3327,34 +3357,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 {
@@ -3375,6 +3391,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;
 }
@@ -3436,7 +3460,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));
 }
 
@@ -3444,29 +3468,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 {
@@ -3545,7 +3563,6 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogoWrapper {
-  --min-height-logo-wrapper: 44px;
   width: 100%;
   min-height: var(--min-height-logo-wrapper);
   justify-content: center;
@@ -3747,7 +3764,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);
@@ -3759,7 +3775,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)));
@@ -4576,8 +4591,8 @@
 }
 
 .IncodeFormField {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   width: 100%;
-  margin-bottom: .75rem;
 }
 
 .IncodeFiscalQrPage {
@@ -4611,7 +4626,7 @@
 
 @media (min-width: 48rem) {
   .IncodeFiscalQrPage.IncodeFiscalQrCapturePage {
-    background-color: var(--color-black, #000);
+    background-color: var(--capture-page-backdrop-color);
   }
 }
 
@@ -4677,12 +4692,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;
 }
 
@@ -4694,7 +4709,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;
@@ -4759,7 +4774,7 @@
 .IncodeLoadingBorder {
   aspect-ratio: 1;
   width: 100%;
-  max-width: 335px;
+  max-width: var(--face-capture-frame-max-w);
   position: absolute;
 }
 
@@ -4814,9 +4829,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 {
@@ -4856,7 +4871,7 @@
 }
 
 .IncodeVideoSelfieCapturePage {
-  background-color: var(--color-black, #000);
+  background-color: var(--capture-page-backdrop-color);
 }
 
 .IncodeVideoSelfieCapturePage .IncodePageInner {
@@ -5006,7 +5021,7 @@
 }
 
 .IncodeVideoSelfieTutorialStartButton {
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   margin: auto;
 }
 
@@ -5248,20 +5263,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;
@@ -5269,16 +5286,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 {
@@ -5469,32 +5486,27 @@ 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-duration {
+@property --tw-leading {
   syntax: "*";
   inherits: false
 }
 
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-
 @keyframes spin {
   to {
     transform: rotate(360deg);