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

package/dist/workflow/styles.css

@@ -11,11 +11,10 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-tracking: initial;
       --tw-duration: initial;
       --tw-outline-style: solid;
+      --tw-font-weight: initial;
+      --tw-leading: initial;
     }
   }
 }
@@ -80,12 +79,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;
 }
 
@@ -97,7 +96,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;
@@ -162,7 +161,7 @@
 .IncodeLoadingBorder {
   aspect-ratio: 1;
   width: 100%;
-  max-width: 335px;
+  max-width: var(--face-capture-frame-max-w);
   position: absolute;
 }
 
@@ -216,14 +215,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 {
@@ -235,21 +233,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;
 }
 
@@ -448,7 +443,7 @@
 
 .IncodePhoneInputContainer {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeEmailInput, .IncodeEmailInputContainer {
@@ -482,30 +477,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 {
@@ -565,10 +563,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;
 }
@@ -612,26 +610,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;
@@ -642,9 +644,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;
@@ -655,12 +657,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 {
@@ -823,9 +825,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;
@@ -862,14 +864,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;
@@ -888,11 +890,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 {
@@ -907,11 +909,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 {
@@ -1105,8 +1107,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);
@@ -1120,7 +1122,7 @@
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdFlipCardLayout .IncodeIdFlipCardLayoutContent .IncodeCaptureFrame.IncodeIdFlipCardFrameFlipping {
@@ -1191,7 +1193,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;
@@ -1289,9 +1291,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;
@@ -1348,7 +1350,7 @@
 }
 
 .IncodeChooserPage .IncodePageTitle {
-  max-width: 15.625rem;
+  max-width: var(--incode-form-max);
 }
 
 .IncodeChooserPage .IncodeChooserContainer {
@@ -1362,7 +1364,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;
@@ -1372,15 +1374,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 {
@@ -1408,7 +1410,6 @@
 }
 
 .IncodeIdCaptureStage {
-  --capture-result-crossfade-duration: .3s;
   width: 100%;
   height: 100%;
   position: relative;
@@ -1436,7 +1437,7 @@
 
 @media (min-width: 48rem) {
   .IncodeIdCapturePage {
-    background-color: var(--color-black, #000);
+    background-color: var(--capture-page-backdrop-color);
   }
 }
 
@@ -1718,10 +1719,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 {
@@ -1765,7 +1766,7 @@
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical {
-  width: clamp(180px, 30vh, 274px);
+  width: var(--id-capture-frame-vertical-width);
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingLayoutContent .IncodeCaptureFrame.IncodeCaptureFrameVertical .IncodeIdProcessingOverlay {
@@ -1799,7 +1800,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;
@@ -1877,7 +1878,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 {
@@ -1932,47 +1933,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));
@@ -2004,9 +2009,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 {
@@ -2686,7 +2691,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;
 }
@@ -2753,7 +2758,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));
@@ -2769,7 +2774,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;
 }
 
@@ -3026,7 +3031,7 @@
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageInner {
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodePageTitleContainer {
@@ -3039,11 +3044,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;
 }
 
@@ -3102,7 +3107,7 @@
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepImgPaddedBrowser {
-  padding: 5px;
+  padding: var(--geolocation-permission-step-padding);
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepText {
@@ -3145,6 +3150,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));
   }
@@ -3163,6 +3169,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;
 }
@@ -3199,6 +3213,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;
@@ -3215,34 +3235,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 {
@@ -3263,6 +3269,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;
 }
@@ -3324,7 +3338,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));
 }
 
@@ -3332,29 +3346,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 {
@@ -3433,7 +3441,6 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectHeader .IncodeRedirectLogoWrapper {
-  --min-height-logo-wrapper: 44px;
   width: 100%;
   min-height: var(--min-height-logo-wrapper);
   justify-content: center;
@@ -3635,7 +3642,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);
@@ -3647,7 +3653,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)));
@@ -3917,7 +3922,7 @@
 
 .IncodeIdentityReusePage .IncodeIdentityReuseCard:focus-visible {
   outline: var(--focus-outline-width) solid var(--border-status-focus);
-  outline-offset: var(--focus-outline-width);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .IncodeIdentityReusePage .IncodeIdentityReuseCardSelected, .IncodeIdentityReusePage .IncodeIdentityReuseCardSelected:hover {
@@ -4267,8 +4272,8 @@
 }
 
 .IncodeFormField {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   width: 100%;
-  margin-bottom: .75rem;
 }
 
 .IncodeUnsupportedModule {
@@ -4412,32 +4417,27 @@
   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);