@layerfi/components 0.1.111 → 0.1.112-alpha.1

package/dist/index.css

@@ -31,11 +31,11 @@
   --color-dark-h: 0;
   --color-dark-s: 0%;
   --color-dark-l: 7%;
-  --color-dark: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) );
+  --color-dark: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l));
   --color-light-h: 0;
   --color-light-s: 0%;
   --color-light-l: 90%;
-  --color-light: hsl( var(--color-light-h) var(--color-light-s) var(--color-light-l) );
+  --color-light: hsl(var(--color-light-h) var(--color-light-s) var(--color-light-l));
   --color-base-0: #fff;
   --color-base-50: hsl(var(--color-dark-h) 1% 98%);
   --color-base-100: hsl(var(--color-dark-h) 1% 94%);
@@ -51,21 +51,21 @@
   --max-component-width: 1408px;
   --base-transparent-1: hsl(220deg 43% 11% / 1%);
   --base-transparent-2: hsl(220deg 43% 11% / 2%);
-  --base-transparent-4: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 4% );
-  --base-transparent-5: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 5% );
-  --base-transparent-6: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 6% );
-  --base-transparent-8: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 8% );
-  --base-transparent-10: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 10% );
-  --base-transparent-12: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 12% );
-  --base-transparent-16: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 16% );
-  --base-transparent-16-light: hsl( var(--color-light-h) var(--color-light-s) var(--color-light-l) / 16% );
+  --base-transparent-4: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 4%);
+  --base-transparent-5: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 5%);
+  --base-transparent-6: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 6%);
+  --base-transparent-8: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 8%);
+  --base-transparent-10: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 10%);
+  --base-transparent-12: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 12%);
+  --base-transparent-16: hsl(var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 16%);
+  --base-transparent-16-light: hsl(var(--color-light-h) var(--color-light-s) var(--color-light-l) / 16%);
   --color-primary: var(--color-dark);
   --color-accent: var(--color-light);
   --color-secondary: var(--color-base);
   --color-success: var(--color-info-success);
   --color-danger: var(--color-info-error);
   --color-danger-dark: hsl(349deg 30% 30%);
-  --color-danger-light: hsl( var(--color-info-error-h) var(--color-info-error-s) var(--color-info-error-l) / 40% );
+  --color-danger-light: hsl(var(--color-info-error-h) var(--color-info-error-s) var(--color-info-error-l) / 40%);
   --text-color-primary: var(--color-dark);
   --text-color-secondary: var(--color-base-600);
   --bg-element-focus: var(--color-base-50);
@@ -87,9 +87,14 @@
   --text-heading-secondary: 20px;
   --text-heading-page: var(--text-heading);
   --text-heading-view: var(--text-heading-secondary);
-  --text-heading-sm: 16px;
-  --text-heading-xs: 14px;
   --text-heading-2xs: 12px;
+  --text-heading-xs: 14px;
+  --text-heading-sm: 16px;
+  --text-heading-md: var(--text-heading);
+  --text-heading-lg: 36px;
+  --text-heading-xl: 48px;
+  --text-heading-2xl: 56px;
+  --text-heading-3xl: 64px;
   --font-weight-normal: 460;
   --font-weight-bold: 540;
   --spacing-4xs: 2px;
@@ -198,16 +203,16 @@
   --button-border-color-ghost-active: var(--color-base-800);
 }
 .Layer__component *::-webkit-scrollbar {
-  width: 6px;
   height: 6px;
+  width: 6px;
 }
 .Layer__component *::-webkit-scrollbar-track {
-  background: #f1f1f1;
   border-radius: 4px;
+  background: #f1f1f1;
 }
 .Layer__component *::-webkit-scrollbar-thumb {
-  background: #e2e2e2;
   border-radius: 4px;
+  background: #e2e2e2;
 }
 .Layer__component *::-webkit-scrollbar-thumb:hover {
   background: #999;
@@ -223,27 +228,27 @@
   stroke: var(--color-base-1000);
 }
 .Layer__actionable-list {
-  list-style: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  list-style: none;
 }
 .Layer__actionable-list li {
-  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
-  gap: var(--spacing-2xs);
-  border-radius: var(--spacing-xs);
   box-sizing: border-box;
-  font-size: 12px;
-  cursor: pointer;
   display: flex;
+  gap: var(--spacing-2xs);
   align-items: center;
   justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--spacing-xs);
+  cursor: pointer;
+  font-size: 12px;
 }
 .Layer__actionable-list li .Layer__actionable-list__content {
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-2xs);
   align-items: flex-start;
   max-width: 36ch;
-  gap: var(--spacing-2xs);
 }
 .Layer__actionable-list li .Layer__actionable-list__content .Layer__actionable-list__content-description {
   color: var(--color-base-500);
@@ -258,28 +263,28 @@
   background-color: var(--color-base-50);
 }
 .Layer__actionable-list .Layer__actionable-list__select {
-  width: 18px;
-  height: 18px;
   display: flex;
+  height: 18px;
+  width: 18px;
   border-radius: 50%;
   border: 1px solid var(--color-base-300);
 }
 .Layer__actionable-list .Layer__actionable-list__select.Layer__actionable-list__select--selected {
-  border: 1px solid var(--color-info-success);
-  color: var(--color-info-success);
-  background-color: var(--color-info-success-bg);
   align-items: center;
   justify-content: center;
+  border: 1px solid var(--color-info-success);
+  background-color: var(--color-info-success-bg);
+  color: var(--color-info-success);
 }
 .Layer__actionable_row {
   display: flex;
-  padding: var(--spacing-md);
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-md);
-  border-radius: var(--XS, 8px);
+  padding: var(--spacing-md);
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px var(--color-base-300);
   background: var(--color-base-0);
-  box-shadow: 0px 0px 0px 1px var(--color-base-300);
   container-type: inline-size;
 }
 @container (max-width: 30rem) {
@@ -293,25 +298,25 @@
 }
 .Layer__actionable_row__main {
   display: flex;
-  align-items: center;
   gap: var(--spacing-md);
+  align-items: center;
 }
 .Layer__actionable_row__icon {
   display: flex;
-  width: 32px;
-  height: 32px;
-  background-color: var(--color-base-100);
-  border-radius: var(--border-radius-3xs);
   align-items: center;
   justify-content: center;
-  box-shadow: 0px 0px 3px 0px var(--base-transparent-4) inset;
+  height: 32px;
+  width: 32px;
+  border-radius: var(--border-radius-3xs);
+  box-shadow: 0 0 3px 0 var(--base-transparent-4) inset;
+  background-color: var(--color-base-100);
 }
 .Layer__actionable_row__action {
   display: flex;
 }
 .Layer__actionable_row__description {
-  color: var(--color-base-500);
   font-size: var(--text-sm);
+  color: var(--color-base-500);
 }
 @keyframes Layer__rotate {
   from {
@@ -400,17 +405,17 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  min-height: 52px;
+  padding: var(--spacing-3xs) var(--spacing-sm);
+  border-radius: var(--border-radius-xs);
+  box-shadow: 0 0 0 3px var(--color-base-300);
   background-color: var(--color-base-800);
   color: var(--color-base-50);
-  border-radius: var(--border-radius-xs);
-  padding: var(--spacing-3xs) var(--spacing-sm);
-  min-height: 52px;
-  box-shadow: 0px 0px 0px 3px var(--color-base-300);
 }
 .Layer__bar-banner__left-col {
   display: flex;
-  align-items: center;
   gap: var(--spacing-md);
+  align-items: center;
 }
 .Layer__bar-banner__text-container__desc {
   color: var(--color-base-300);
@@ -418,8 +423,8 @@
 @container (max-width: 560px) {
   .Layer__bar-banner--bookkeeping {
     flex-direction: column;
-    align-items: flex-start;
     gap: var(--spacing-sm);
+    align-items: flex-start;
     padding: var(--spacing-sm);
   }
   .Layer__bar-banner--bookkeeping .Layer__icon-box {
@@ -771,15 +776,15 @@
   display: flex;
   flex-direction: column;
   border-radius: var(--spacing-sm);
-  background: var(--color-base-0);
   box-shadow:
-    0px 4px 12px 0px var(--base-transparent-8),
-    0px 2px 4px 0px var(--base-transparent-6),
-    0px 0px 0px 1px var(--base-transparent-4);
+    0 4px 12px 0 var(--base-transparent-8),
+    0 2px 4px 0 var(--base-transparent-6),
+    0 0 0 1px var(--base-transparent-4);
+  background: var(--color-base-0);
 }
 .Layer__component .recharts-responsive-container {
-  padding: 4px;
   box-sizing: border-box;
+  padding: 4px;
   border-radius: var(--border-radius-xs);
 }
 .Layer__component .recharts-responsive-container .recharts-cartesian-axis-line {
@@ -798,31 +803,31 @@
   min-height: 300px;
 }
 .Layer__chart-legend-list {
-  margin: 0;
-  padding: 0;
   display: flex;
+  gap: var(--spacing-sm);
   align-items: center;
+  justify-content: flex-end;
+  padding: 0;
+  margin: 0;
   font-size: 12px;
-  gap: var(--spacing-sm);
   list-style: none;
-  justify-content: flex-end;
 }
 .Layer__chart__tooltip {
-  background-color: var(--color-base-1000);
   padding: var(--spacing-2xs) var(--spacing-sm);
-  color: var(--color-base-500);
   border-radius: var(--border-radius-3xs);
+  background-color: var(--color-base-1000);
   font-size: var(--text-sm);
+  color: var(--color-base-500);
 }
 .Layer__chart__tooltip-list {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 .Layer__chart__tooltip-list li {
-  list-style: none;
   display: flex;
-  justify-content: space-between;
   column-gap: var(--spacing-sm);
+  justify-content: space-between;
+  list-style: none;
 }
 .Layer__chart__tooltip-list .Layer__chart__tooltip-label {
   color: var(--color-base-500);
@@ -846,7 +851,7 @@
 }
 .Layer__hover-menu.Layer__hover-menu--open .Layer__hover-menu__list-wrapper {
   top: 100%;
-  right: 0px;
+  right: 0;
   opacity: 1;
   touch-action: auto;
   pointer-events: auto;
@@ -855,67 +860,67 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
   width: 100%;
+  cursor: pointer;
 }
 .Layer__hover-menu .Layer__hover-menu__list-wrapper {
   position: absolute;
   z-index: 99;
   top: 80%;
   right: -8px;
-  padding-top: var(--spacing-xs);
+  display: flex;
+  justify-content: stretch;
   min-width: 160px;
+  padding-top: var(--spacing-xs);
   touch-action: none;
   pointer-events: none;
   opacity: 0;
-  display: flex;
-  justify-content: stretch;
   transition: all 0.15s ease-out;
 }
 .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list {
-  flex: 1;
+  box-sizing: border-box;
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: var(--spacing-3xs);
+  padding: var(--spacing-3xs);
   border-radius: var(--spacing-xs);
-  background: var(--color-base-0);
   box-shadow:
-    0px 0px 0px 1px rgba(25, 25, 25, 0.06),
-    0px 4px 12px 0px var(--base-transparent-1, rgba(16, 24, 40, 0.01)),
-    0px 2px 4px 0px rgba(25, 25, 25, 0.06);
-  box-sizing: border-box;
+    0 0 0 1px rgba(25, 25, 25, 0.06),
+    0 4px 12px 0 var(--base-transparent-1, rgba(16, 24, 40, 0.01)),
+    0 2px 4px 0 rgba(25, 25, 25, 0.06);
   margin: 0;
-  padding: var(--spacing-3xs);
+  background: var(--color-base-0);
   list-style: none;
 }
 .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item {
+  display: flex;
+  align-items: center;
   padding: var(--spacing-3xs);
   padding-left: var(--spacing-xs);
   border-radius: var(--spacing-2xs);
   color: var(--color-base-500);
   transition: all 0.2s ease-in-out;
-  display: flex;
-  align-items: center;
 }
 .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item .Layer__hover-menu__list-item-button {
-  text-align: start;
-  background: none;
+  width: 100%;
   border: none;
   outline: none;
-  color: inherit;
+  background: none;
+  cursor: pointer;
   font-size: var(--text-sm);
+  line-height: normal;
   font-family: inherit;
-  font-feature-settings: inherit;
   font-weight: 500;
-  width: 100%;
-  line-height: normal;
+  text-align: start;
+  color: inherit;
+  font-feature-settings: inherit;
   letter-spacing: -0.06px;
-  cursor: pointer;
 }
 .Layer__hover-menu .Layer__hover-menu__list-wrapper .Layer__hover-menu__list .Layer__hover-menu__list-item:hover {
   background: var(--color-base-50);
-  color: var(--color-base-800);
   font-weight: 540;
+  color: var(--color-base-800);
 }
 .Layer__component {
   max-width: 1406px;
@@ -993,14 +998,14 @@
 }
 .Layer__datetime {
   display: inline-flex;
-  align-items: center;
   gap: var(--spacing-md);
+  align-items: center;
 }
 .Layer__DatePickerModeSelector__container {
   display: flex;
   justify-content: flex-end;
-  padding-inline: var(--spacing-xs);
   padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-xs);
 }
 .Layer__datepicker__wrapper,
 #Layer__datepicker__portal {
@@ -2975,13 +2980,13 @@
   padding: var(--spacing-xs) var(--spacing-md);
 }
 .Layer__file-thumb {
+  box-sizing: border-box;
+  position: relative;
   display: flex;
+  gap: var(--spacing-2xs);
   align-items: flex-start;
   justify-content: space-between;
   min-height: 38px;
-  gap: var(--spacing-2xs);
-  position: relative;
-  box-sizing: border-box;
   container-type: normal;
 }
 .Layer__file-thumb:not(.Layer__file-thumb--floating) {
@@ -2994,17 +2999,17 @@
     border-bottom: 1px solid var(--color-base-300);
   }
   .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) {
-    padding-left: 0;
     padding-right: 0;
+    padding-left: 0;
     margin-left: -6px;
   }
   .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) .Layer__icon-btn {
-    width: 26px;
     height: 26px;
+    width: 26px;
   }
   .Layer__file-thumb:not(.Layer__file-thumb--floating) .Layer__file-thumb__actions:not(.Layer__file-thumb__actions--floating) .Layer__icon-btn svg {
-    width: 14px;
     height: 14px;
+    width: 14px;
   }
 }
 .Layer__file-thumb__main {
@@ -3027,55 +3032,55 @@
   color: var(--color-danger);
 }
 .Layer__file-thumb__actions.Layer__file-thumb__actions--floating {
-  display: none;
   position: absolute;
   top: -20px;
   right: -10px;
-  background-color: var(--color-base-0);
+  display: none;
   border-radius: var(--border-radius-3xs);
-  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
+  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
+  background-color: var(--color-base-0);
   transform: scale(0.8);
 }
 .Layer__file-thumb:hover .Layer__file-thumb__actions--floating {
   display: flex;
 }
 .Layer__file-thumb__img {
-  width: 100%;
   height: 100%;
   height: 38px;
+  width: 100%;
   width: 38px;
   border-radius: var(--border-radius-3xs, 4px);
+  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
   background: var(--color-base-300);
-  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
 }
 .Layer__file-thumb__img img {
-  width: 100%;
   height: 100%;
+  width: 100%;
   object-fit: cover;
 }
 .Layer__file-thumb__details {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: var(--spacing-4xs);
-  font-size: var(--text-sm);
+  align-items: flex-start;
   justify-content: flex-start;
   padding: var(--spacing-4xs) var(--spacing-2xs);
+  font-size: var(--text-sm);
 }
 .Layer__file-thumb__details__date {
   color: var(--color-base-600);
 }
 .Layer__file-thumb__details__uploading {
   display: flex;
-  align-items: center;
   gap: var(--spacing-3xs);
+  align-items: center;
   color: var(--color-info-fg);
 }
 .Layer__file-thumb__details__error {
   color: var(--color-danger);
 }
 .Layer__file-thumb__details__name {
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 .Layer__header {
   display: flex;
@@ -3084,37 +3089,37 @@
 }
 .Layer__header--sticky {
   position: sticky;
+  z-index: 10;
   top: 0;
   background: rgba(255, 255, 255, 0.5);
   backdrop-filter: blur(6px);
-  z-index: 10;
 }
 .Layer__header--top-rounded {
   border-top-left-radius: var(--border-radius-sm);
   border-top-right-radius: var(--border-radius-sm);
 }
 .Layer__header__row {
+  box-sizing: border-box;
   display: flex;
-  width: 100%;
+  gap: var(--spacing-sm);
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-sm);
-  border-bottom: 1px solid var(--border-color);
+  width: 100%;
   padding: 0 var(--spacing-md);
-  box-sizing: border-box;
+  border-bottom: 1px solid var(--border-color);
 }
 .Layer__header__row[data-direction=col] {
   flex-direction: column;
+  gap: var(--spacing-md);
   align-items: flex-start;
   padding-top: var(--spacing-md);
   padding-bottom: var(--spacing-md);
-  gap: var(--spacing-md);
 }
 .Layer__header__row[data-direction=col] .Layer__header__col {
-  padding-top: 0;
-  padding-bottom: 0;
   min-height: 36px;
   width: 100%;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 @container (min-width: 1400px) {
   .Layer__header__row {
@@ -3122,15 +3127,15 @@
   }
 }
 .Layer__header__col {
+  box-sizing: border-box;
   display: flex;
-  align-items: center;
   gap: var(--spacing-sm);
+  align-items: center;
   min-height: 68px;
-  box-sizing: border-box;
 }
 .Layer__header__col[data-no-padding=true] {
-  padding-left: 0;
   padding-right: 0;
+  padding-left: 0;
 }
 ::placeholder {
   color: var(--input-placeholder-color);
@@ -3712,15 +3717,15 @@
     transform 500ms ease-out;
 }
 .Layer__onboarding__content {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: var(--spacing-lg) var(--spacing-md) var(--spacing-3xl);
-  box-sizing: border-box;
 }
 .Layer__onboarding .Layer__actionable_row {
-  max-width: 90%;
   width: 640px;
+  max-width: 90%;
 }
 .Layer__table {
   width: 100%;
@@ -4044,11 +4049,13 @@
 }
 @container (min-width: 1400px) {
   .Layer__table tr td:first-child .Layer__table-cell-content,
-  .Layer__table tr th:first-child.Layer__table-cell .Layer__table-cell-content {
+  .Layer__table tr th:first-child.Layer__table-cell .Layer__table-cell-content,
+  .Layer__table tr th:first-child.Layer__table-header .Layer__table-cell-content {
     padding-left: var(--spacing-xl);
   }
   .Layer__table tr td:last-child .Layer__table-cell-content,
-  .Layer__table tr th:last-child.Layer__table-cell .Layer__table-cell-content {
+  .Layer__table tr th:last-child.Layer__table-cell .Layer__table-cell-content,
+  .Layer__table tr th:last-child.Layer__table-header .Layer__table-cell-content {
     padding-right: var(--spacing-xl);
   }
 }
@@ -4082,34 +4089,34 @@ tbody .Layer__table__empty-row:first-child {
   border-bottom: 1px solid var(--border-color);
 }
 .Layer__heading {
-  color: var(--text-color-primary);
+  align-self: center;
+  margin: 0;
   font-size: var(--text-heading);
+  line-height: 140%;
   font-weight: var(--font-weight-bold);
+  color: var(--text-color-primary);
   font-variation-settings: "wght" var(--font-weight-bold);
-  line-height: 140%;
   letter-spacing: -0.12px;
-  margin: 0;
-  align-self: center;
 }
 .Layer__heading--secondary,
 .Layer__heading.Layer__heading--secondary {
-  color: var(--text-color-primary);
   font-size: var(--text-heading-sm);
   font-weight: var(--font-weight-bold);
+  color: var(--text-color-primary);
   font-variation-settings: "wght" var(--font-weight-bold);
 }
 .Layer__heading--view,
 .Layer__heading.Layer__heading--view {
-  color: var(--text-color-primary);
   font-size: var(--text-heading-view);
   font-weight: var(--font-weight-bold);
+  color: var(--text-color-primary);
   font-variation-settings: "wght" var(--font-weight-bold);
 }
 .Layer__heading--page,
 .Layer__heading.Layer__heading--page {
-  color: var(--text-color-primary);
   font-size: var(--text-heading-page);
   font-weight: var(--font-weight-bold);
+  color: var(--text-color-primary);
   font-variation-settings: "wght" var(--font-weight-bold);
 }
 .Layer__heading--left {
@@ -4122,6 +4129,8 @@ tbody .Layer__table__empty-row:first-child {
   align-self: flex-end;
 }
 .Layer__text {
+  margin: 0;
+  line-height: 140%;
   font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
   font-variant-numeric: lining-nums proportional-nums;
@@ -4130,8 +4139,6 @@ tbody .Layer__table__empty-row:first-child {
     "cv05" on,
     "cv08" on,
     "ss03" on;
-  line-height: 140%;
-  margin: 0;
 }
 .Layer__text--sm {
   font-size: var(--text-sm);
@@ -4183,10 +4190,10 @@ tbody .Layer__table__empty-row:first-child {
   text-overflow: ellipsis;
 }
 .Layer__label {
-  color: var(--color-base-500);
+  overflow: hidden;
   font-weight: var(--font-weight-normal);
+  color: var(--color-base-500);
   white-space: nowrap;
-  overflow: hidden;
 }
 .Layer__justify--center {
   justify-content: center;
@@ -4335,8 +4342,8 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__view .Layer__view-header__title {
   display: flex;
   align-items: center;
-  width: 100%;
   min-height: 44px;
+  width: 100%;
   padding: var(--spacing-md) var(--spacing-sm);
 }
 .Layer__view .Layer__view-header__content {
@@ -4493,6 +4500,38 @@ tbody .Layer__table__empty-row:first-child {
   height: 1rem;
   place-self: center;
 }
+.Layer__UI__Calendar {
+  width: min-content;
+}
+.Layer__UI__CalendarGrid {
+  border-collapse: collapse;
+}
+.Layer__UI__CalendarCell,
+.Layer__UI__CalendarHeaderCell {
+  height: 2rem;
+  width: 2rem;
+  border-radius: var(--border-radius-3xs);
+  font-size: var(--text-sm);
+  line-height: 2rem;
+  text-align: center;
+}
+.Layer__UI__CalendarCell {
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.Layer__UI__CalendarCell[data-hovered] {
+  background-color: var(--color-base-400);
+}
+.Layer__UI__CalendarCell[data-selected] {
+  background-color: var(--color-base-900);
+  color: var(--color-base-0);
+}
+.Layer__UI__CalendarCell[data-disabled] {
+  color: var(--color-base-400);
+}
+.Layer__UI__CalendarCell[data-outside-month] {
+  color: var(--color-base-0);
+  transition: none;
+}
 .Layer__Checkbox {
   position: relative;
   display: inline-flex;
@@ -4534,7 +4573,8 @@ tbody .Layer__table__empty-row:first-child {
   outline: 1px solid var(--outline-active);
   outline-offset: 2px;
 }
-.Layer__Checkbox[data-selected] [slot=checkbox] {
+.Layer__Checkbox[data-selected] [slot=checkbox],
+.Layer__Checkbox[data-indeterminate] [slot=checkbox] {
   background-color: var(--fg-default);
   color: var(--bg-default);
   border-color: var(--fg-default);
@@ -4911,23 +4951,23 @@ tbody .Layer__table__empty-row:first-child {
   animation-iteration-count: infinite;
 }
 .Layer__Menu {
-  max-block-size: inherit;
-  min-inline-size: 9rem;
-  overflow: auto;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3xs);
+  overflow: auto;
+  max-block-size: inherit;
+  min-inline-size: 9rem;
   padding: var(--spacing-3xs);
-  border: 1px solid var(--border-color);
   border-radius: var(--spacing-xs);
-  background: white;
+  border: 1px solid var(--border-color);
   outline: none;
+  background: white;
 }
 .Layer__MenuItem {
   display: flex;
   align-items: center;
-  padding-inline: var(--spacing-xs);
   padding-block: var(--spacing-3xs);
+  padding-inline: var(--spacing-xs);
   border-radius: var(--spacing-2xs);
   outline: none;
   cursor: pointer;
@@ -4981,9 +5021,6 @@ tbody .Layer__table__empty-row:first-child {
   block-size: min(42rem, 90%);
   inline-size: min(36rem, 90%);
 }
-.Layer__Modal[data-flex-block] {
-  block-size: auto;
-}
 .Layer__Modal[data-size=lg] {
   inline-size: min(42rem, 90%);
 }
@@ -5013,6 +5050,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Modal[data-variant=mobile-drawer][data-exiting] {
   animation: mobile-drawer-slide 200ms reverse ease-in;
 }
+.Layer__Modal[data-flex-block] {
+  block-size: auto;
+}
 .Layer__Dialog {
   display: flex;
   flex-direction: column;
@@ -5090,16 +5130,16 @@ tbody .Layer__table__empty-row:first-child {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
+  padding: var(--spacing-2xs) var(--spacing-sm);
+  border-radius: var(--badge-border-radius);
   border: none;
   outline: none;
+  background-color: var(--badge-bg-color);
   cursor: pointer;
+  user-select: none;
   font-size: var(--text-sm);
-  background-color: var(--badge-bg-color);
   color: var(--badge-color);
-  border-radius: var(--badge-border-radius);
-  padding: var(--spacing-2xs) var(--spacing-sm);
   white-space: nowrap;
-  user-select: none;
 }
 .Layer__Pill svg {
   margin-right: 0.25rem;
@@ -5436,14 +5476,27 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Table-TableHeader > tr {
   height: inherit;
 }
+.Layer__UI__Table-TableHeader--hidden {
+  display: none;
+}
 .Layer__UI__Table-Row {
   height: 3.25rem;
+  background-color: var(--color-base-200);
 }
 .Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
   border-bottom: 1px solid var(--color-base-300);
 }
-.Layer__UI__Table-Column {
-  box-sizing: border-box;
+.Layer__UI__Table-Row[data-depth="0"] {
+  background-color: var(--color-base-0);
+}
+.Layer__UI__Table-Row[data-depth="1"] {
+  background-color: var(--color-base-50);
+}
+.Layer__UI__Table-Row[data-depth="2"] {
+  background-color: var(--color-base-100);
+}
+.Layer__UI__Table-Column {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   height: inherit;
@@ -5532,6 +5585,9 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-700);
   text-wrap: pretty;
 }
+.Layer__UI__Heading[data-variant=dark] {
+  color: var(--color-base-900);
+}
 .Layer__UI__Heading[data-variant=subtle] {
   color: var(--fg-subtle);
 }
@@ -5609,12 +5665,21 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Heading[data-size=sm] {
   font-size: var(--text-heading-sm);
 }
-.Layer__UI__Heading[data-size=lg] {
+.Layer__UI__Heading[data-size=md] {
   font-size: var(--text-heading-secondary);
 }
-.Layer__UI__Heading[data-size=xl] {
+.Layer__UI__Heading[data-size=lg] {
   font-size: var(--text-heading);
 }
+.Layer__UI__Heading[data-size=xl] {
+  font-size: var(--text-heading-xl);
+}
+.Layer__UI__Heading[data-size="2xl"] {
+  font-size: var(--text-heading-2xl);
+}
+.Layer__UI__Heading[data-size="3xl"] {
+  font-size: var(--text-heading-3xl);
+}
 .Layer__UI__Heading[data-align=left] {
   text-align: left;
 }
@@ -5635,8 +5700,8 @@ tbody .Layer__table__empty-row:first-child {
   font-weight: var(--font-weight-bold);
 }
 .Layer__MoneyText {
-  color: var(--color-base-800);
   overflow-x: hidden;
+  color: var(--color-base-800);
   text-overflow: ellipsis;
 }
 .Layer__MoneyText[data-bold] {
@@ -5682,7 +5747,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Label[data-variant=subtle],
 .Layer__P[data-variant=subtle],
 .Layer__Span[data-variant=subtle] {
-  color: var(--color-base-600);
+  color: var(--fg-subtle);
 }
 .Layer__Header[data-status=error],
 .Layer__Label[data-status=error],
@@ -5704,6 +5769,12 @@ tbody .Layer__table__empty-row:first-child {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.Layer__Header[data-size="2xs"],
+.Layer__Label[data-size="2xs"],
+.Layer__P[data-size="2xs"],
+.Layer__Span[data-size="2xs"] {
+  font-size: var(--text-2xs);
+}
 .Layer__Header[data-size=xs],
 .Layer__Label[data-size=xs],
 .Layer__P[data-size=xs],
@@ -5956,6 +6027,24 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__InvisibleDownload {
   display: none;
 }
+.Layer__call-booking {
+  padding: var(--spacing-lg);
+}
+.Layer__call-booking .Layer__call-booking-details {
+  width: 100%;
+}
+.Layer__call-booking .Layer__call-booking-actions {
+  width: 100%;
+  margin-top: var(--spacing-md);
+}
+.Layer__call-booking .Layer__call-booking-state {
+  text-align: center;
+}
+@media (width <= 480px) {
+  .Layer__call-booking {
+    padding: var(--spacing-md);
+  }
+}
 .Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip {
   display: flex;
   flex: 1 1;
@@ -6114,8 +6203,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__due-status--sm {
   flex-direction: row;
-  align-items: center;
   gap: var(--spacing-3xs);
+  align-items: center;
 }
 .Layer__due-status[data-status=overdue] .Layer__due-status__title {
   color: var(--color-info-error);
@@ -6135,8 +6224,8 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__BasicLinkedAccountContainer {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
-  padding-inline: var(--spacing-xs) var(--spacing-md);
   padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-xs) var(--spacing-md);
   border-radius: var(--border-radius-xs);
   border: 1px solid var(--outline-subtle);
 }
@@ -6147,8 +6236,8 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 52px;
   height: 28px;
+  width: 52px;
   padding: var(--spacing-3xs) 0;
   border-radius: var(--border-radius-3xs);
   background: var(--color-base-0);
@@ -6753,8 +6842,8 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__bills-list-item__separator {
-  width: 1px;
   height: 10px;
+  width: 1px;
   background-color: var(--color-base-400);
 }
 @container (max-width: 499px) {
@@ -6762,6 +6851,28 @@ tbody .Layer__table__empty-row:first-child {
     font-size: var(--text-md);
   }
 }
+.Layer__CategorizationRulesTable {
+  border: none;
+}
+.Layer__UI__Table__CategorizationRulesTable {
+  table-layout: fixed;
+  width: 100%;
+}
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Row,
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(8rem, 45%) minmax(8rem, 45%) auto;
+}
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Row > *:last-child,
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-TableHeader > tr > *:last-child {
+  justify-content: end;
+}
+.Layer__bulk-actions-header__selection-container {
+  height: 2.25rem;
+  min-width: 11rem;
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--color-base-300);
+}
 .Layer__InvoiceTable {
   width: clamp(48rem, 100%, 1406px);
 }
@@ -6983,17 +7094,17 @@ tbody .Layer__table__empty-row:first-child {
   width: 100%;
 }
 .Layer__caobfb {
-  padding-inline: var(--spacing-md);
-  padding-block: var(--spacing-sm);
   position: relative;
   display: flex;
   gap: var(--spacing-sm);
+  max-height: 280px;
+  padding-block: var(--spacing-sm);
+  padding-inline: var(--spacing-md);
   border-radius: var(--border-radius-xs);
   border: 1px solid var(--color-base-100);
   container-type: inline-size;
   transition: all 0.25s ease-in-out;
   transition-delay: 0.8s;
-  max-height: 280px;
 }
 .Layer__caobfb[data-confirmed=true] {
   background-color: var(--color-base-50);
@@ -7005,10 +7116,10 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__caobfb__details-col {
   display: flex;
+  flex: 1;
   flex-direction: column;
   gap: var(--spacing-2xs);
   color: var(--color-base-700);
-  flex: 1;
 }
 .Layer__caobfb__details-col__details {
   padding-bottom: var(--spacing-sm);
@@ -7020,17 +7131,17 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 500px;
 }
 .Layer__caobfb__details-col__name__institution-name {
-  color: var(--color-base-500);
+  overflow: hidden;
   max-width: 50%;
+  color: var(--color-base-500);
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
 }
 .Layer__caobfb__details-col__name__account-name {
-  color: var(--color-base-1000);
+  overflow: hidden;
   max-width: 50%;
+  color: var(--color-base-1000);
   text-overflow: ellipsis;
-  overflow: hidden;
   white-space: nowrap;
 }
 .Layer__caobfb__details-col__inputs {
@@ -7065,23 +7176,23 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__caobfb__success-banner {
   position: absolute;
-  inset: 0;
-  opacity: 0;
   z-index: -1;
+  inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: var(--spacing-sm);
   background-color: var(--color-base-50);
-  transition: opacity 0.12s ease-in-out;
   color: var(--color-info-success-fg);
+  opacity: 0;
+  transition: opacity 0.12s ease-in-out;
 }
 .Layer__caobfb[data-saved] {
+  overflow: hidden;
   max-height: 0;
   padding: 0;
   border-width: 0;
-  overflow: hidden;
 }
 .Layer__caobfb[data-saved] .Layer__caobfb__success-banner {
   opacity: 1;
@@ -7490,9 +7601,9 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
 }
 .Layer__progress-steps .Layer__progress-steps--step-wrapper {
+  position: relative;
   display: flex;
   align-items: flex-start;
-  position: relative;
   min-width: 50px;
 }
 .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step {
@@ -7525,61 +7636,61 @@ tbody .Layer__table__empty-row:first-child {
   position: relative;
 }
 .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--label p::after {
-  content: "";
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  padding: 2px 8px;
-  background-color: var(--color-base-300);
   position: absolute;
-  border-radius: 30px;
+  z-index: -1;
   top: -2px;
   left: -8px;
+  height: 100%;
+  width: 100%;
+  padding: 2px 8px;
+  border-radius: 30px;
+  background-color: var(--color-base-300);
+  content: "";
+  opacity: 0;
   transition: all 200ms ease;
-  z-index: -1;
 }
 .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--circle {
-  width: 12px;
-  height: 12px;
-  background-color: var(--color-base-50);
-  border: 1px var(--color-base-500);
-  border-style: dashed;
-  border-radius: 100%;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 12px;
+  width: 12px;
+  border-radius: 100%;
+  border: 1px var(--color-base-500);
+  background-color: var(--color-base-50);
+  border-style: dashed;
   transition: all 200ms ease;
 }
 .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--circle::after {
+  position: absolute;
+  top: -1px;
+  left: -1px;
   display: block;
-  content: "";
-  width: 12px;
   height: 12px;
+  width: 12px;
+  border-radius: 100%;
   border: 1px var(--color-base-500);
+  content: "";
   border-style: dashed;
-  border-radius: 100%;
-  position: absolute;
-  top: -1px;
-  left: -1px;
   transition: all 200ms ease;
 }
 .Layer__progress-steps--step-line {
-  width: 100%;
-  height: 2px;
-  background-color: var(--color-base-300);
   position: absolute;
   top: 6px;
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  height: 2px;
+  width: 100%;
+  background-color: var(--color-base-300);
 }
 .Layer__progress-steps--step-line::after {
-  content: "";
-  width: 0%;
+  position: absolute;
   height: 2px;
+  width: 0%;
   background-color: var(--color-base-800);
-  position: absolute;
+  content: "";
   transition: all 200ms ease;
 }
 .Layer__progress-steps--step[data-complete=true] .Layer__progress-steps--step-line::after {
@@ -7622,17 +7733,17 @@ tbody .Layer__table__empty-row:first-child {
   container-type: inline-size;
 }
 .Layer__platform-onboarding-layout {
-  position: relative;
   box-sizing: border-box;
+  position: relative;
   padding: var(--spacing-lg);
 }
 .Layer__platform-onboarding__back-button-container {
-  max-width: calc(672px + 2 * var(--spacing-xl));
-  margin: auto;
-  margin-bottom: var(--spacing-lg);
   position: absolute;
   top: var(--spacing-lg);
   left: var(--spacing-lg);
+  max-width: calc(672px + 2 * var(--spacing-xl));
+  margin: auto;
+  margin-bottom: var(--spacing-lg);
 }
 @container (width < 969px) {
   .Layer__platform-onboarding__back-button-container {
@@ -7640,16 +7751,16 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__platfom-onboarding-layout__box {
-  padding: var(--spacing-xl);
-  max-width: 672px;
-  margin: auto;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
+  max-width: 672px;
+  padding: var(--spacing-xl);
   border-radius: var(--border-radius-xs);
-  background: var(--color-base-0);
   box-shadow: 0 0 0 1px var(--base-transparent-4);
+  margin: auto;
   margin-bottom: var(--spacing-md);
+  background: var(--color-base-0);
 }
 @container (width < 500px) {
   .Layer__platfom-onboarding-layout__box {
@@ -7657,8 +7768,8 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__platform-onboarding-layout__footer {
-  padding: var(--spacing-lg) 0;
   max-width: 1200px;
+  padding: var(--spacing-lg) 0;
   margin: auto;
 }
 @container (width < 500px) {
@@ -7676,13 +7787,13 @@ tbody .Layer__table__empty-row:first-child {
   margin-bottom: var(--spacing-lg);
 }
 .Layer__platform-onboarding__welcome-footer__content {
-  max-width: 672px;
-  margin: auto;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: var(--spacing-lg);
+  align-items: flex-start;
+  max-width: 672px;
   padding: 0 var(--spacing-xl);
+  margin: auto;
 }
 @container (width < 500px) {
   .Layer__platform-onboarding__welcome-footer__content {
@@ -7700,8 +7811,8 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-lg);
   align-items: flex-start;
   max-width: 1200px;
-  margin: auto;
   padding-top: var(--spacing-5xl);
+  margin: auto;
 }
 @container (width < 640px) {
   .Layer__platform-onboarding__welcome-footer__images {
@@ -7715,16 +7826,16 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-wrapper {
   display: flex;
+  flex: 1 0 0;
   flex-direction: column;
-  align-items: center;
   gap: var(--spacing-2xl);
-  flex: 1 0 0;
+  align-items: center;
   border-radius: 12px;
   box-shadow: 0 0 0 1px var(--base-transparent-4, rgba(16, 24, 40, 0.04));
 }
 .Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-wrapper img {
-  width: 100%;
   height: 100%;
+  width: 100%;
   object-fit: contain;
 }
 .Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-text {
@@ -7733,14 +7844,14 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-xs);
   align-items: center;
   justify-content: center;
-  padding: 36px 0;
   max-width: 27ch;
+  padding: 36px 0;
   margin: auto;
   text-align: center;
 }
 .Layer__separator {
-  width: 100%;
   height: 1px;
+  width: 100%;
   background-color: var(--color-base-300);
 }
 .Layer__separator[data-mbe="3xs"] {
@@ -7887,41 +7998,76 @@ tbody .Layer__table__empty-row:first-child {
 @container (width < 460px) {
   .Layer__profit-and-loss-header__bookkeeping-status {
     position: static;
-    width: 260px;
     height: 18px;
+    width: 260px;
   }
   .Layer__profit-and-loss-header__bookkeeping-status .Layer__bookkeeping-status {
     white-space: normal;
   }
 }
 .Layer__bookkeeping-status {
-  white-space: nowrap;
   display: flex;
-  align-items: center;
   gap: var(--spacing-3xs);
+  align-items: center;
+  white-space: nowrap;
 }
 .Layer__bookkeeping-status .Layer__bookkeeping-status__icon-wrapper {
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-info-fg);
-  background: var(--color-info-bg);
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
   margin-top: -1px;
+  background: var(--color-info-bg);
+  color: var(--color-info-fg);
 }
 .Layer__bookkeeping-status[data-status=warning] .Layer__bookkeeping-status__icon-wrapper {
-  color: var(--color-info-warning-fg);
   background: var(--color-info-warning-bg);
+  color: var(--color-info-warning-fg);
 }
 .Layer__bookkeeping-status[data-status=success] .Layer__bookkeeping-status__icon-wrapper {
-  color: var(--color-info-success-fg);
   background: var(--color-info-success-bg);
+  color: var(--color-info-success-fg);
 }
 .Layer__bookkeeping-status[data-status=error] .Layer__bookkeeping-status__icon-wrapper {
-  color: var(--color-info-error-fg);
   background: var(--color-info-error-bg);
+  color: var(--color-info-error-fg);
+}
+.Layer__suggested-categorization-rule-updates-drawer {
+  padding: var(--spacing-sm);
+}
+.Layer__suggested-categorization-rule-updates .Layer__UI__Button {
+  width: 100%;
+}
+.Layer__suggested-categorization-rule-updates-header {
+  padding-bottom: var(--spacing-sm);
+}
+.Layer__AffectedTransactionsTable {
+  container-type: inline-size;
+  --affected-transactions-table-cols: minmax(10rem, 25%) minmax(20rem, 50%) minmax(10rem, 25%);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable {
+  table-layout: fixed;
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
+  display: grid;
+  grid-template-columns: var(--affected-transactions-table-cols);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Date,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Date {
+  color: var(--color-base-600);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Amount,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Amount {
+  justify-content: flex-end;
+}
+@container (width <= 840px) {
+  .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
+  .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
+    grid-template-columns: minmax(4rem, 25%) minmax(8rem, 50%) minmax(4rem, 25%);
+  }
 }
 .Layer__tabs__container {
   overflow: auto hidden;
@@ -8020,17 +8166,17 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__mobile-panel {
   position: fixed;
+  z-index: -1;
   top: 0;
   left: 0;
-  width: 100dvw;
+  display: flex;
+  flex-direction: column;
   height: 100dvh;
+  width: 100dvw;
+  background-color: var(--color-base-50);
   opacity: 0;
   transition: opacity 180ms ease-out;
   filter: blur(6px);
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-base-50);
-  z-index: -1;
 }
 .Layer__mobile-panel[data-open] {
   z-index: var(--z-index-mobile-panel);
@@ -8041,11 +8187,11 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__mobile-panel__header {
   top: 0;
   display: flex;
+  gap: var(--spacing-lg);
   align-items: center;
   padding: var(--spacing-sm) var(--spacing-lg);
-  background-color: var(--color-base-0);
-  gap: var(--spacing-lg);
   border-bottom: 1px solid var(--color-base-100);
+  background-color: var(--color-base-0);
 }
 .Layer__mobile-panel__content {
   flex: 1;
@@ -8151,9 +8297,9 @@ tbody .Layer__table__empty-row:first-child {
   padding-top: var(--spacing-xl);
 }
 .Layer__JournalEntryForm .Layer__JournalEntryForm__Row {
-  padding: 0 var(--spacing-xl);
   display: flex;
   gap: var(--spacing-md);
+  padding: 0 var(--spacing-xl);
 }
 .Layer__JournalEntryForm .Layer__JournalEntryForm__Row > * {
   flex: 0 0 clamp(16rem, 100%, 24rem);
@@ -8178,8 +8324,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__JournalEntryForm__LineItem {
   display: flex;
-  align-items: flex-end;
   gap: var(--spacing-xs);
+  align-items: flex-end;
 }
 .Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field--accountName {
   flex: 1 1 12rem;
@@ -8199,17 +8345,52 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__JournalEntryForm__LineItem--readonly .Layer__JournalEntryForm__Field--removeButton {
   display: none;
 }
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .Layer__JournalEntryForm__LineItem {
     flex-direction: column;
-    align-items: stretch;
     gap: var(--spacing-sm);
+    align-items: stretch;
   }
   .Layer__JournalEntryForm__LineItem .Layer__JournalEntryForm__Field {
     flex: 1 1 auto;
     max-width: 16rem;
   }
 }
+.Layer__ExpandButton {
+  height: 16px;
+  min-width: 16px;
+  transition: transform 0.1s ease-in-out;
+}
+.Layer__ExpandButton--collapsed {
+  transform: rotate(-90deg);
+}
+.Layer__ExpandButton--expanded {
+  transform: rotate(0deg);
+}
+.Layer__UnifiedReport {
+  overflow: hidden;
+  width: clamp(24rem, 100%, 1406px);
+}
+.Layer__UnifiedReport__Header {
+  height: 4.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.Layer__UI__Table__UnifiedReport {
+  table-layout: fixed;
+  width: 100%;
+}
+.Layer__UI__Table__UnifiedReport .Layer__UI__Table-Row,
+.Layer__UI__Table__UnifiedReport .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(16rem, 80%) minmax(8rem, 20%);
+}
+.Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column__UnifiedReport--Value,
+.Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell__UnifiedReport--Value {
+  justify-content: flex-end;
+}
+.Layer__DateCalendar__Header {
+  border-bottom: 1px solid var(--border-color);
+}
 .Layer__TagSelectorLayoutGroup {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -8264,8 +8445,8 @@ tbody .Layer__table__empty-row:first-child {
   box-sizing: border-box;
 }
 .Layer__ledger-account__index {
-  background-color: var(--color-base-0);
   width: 100%;
+  background-color: var(--color-base-0);
 }
 .Layer__ledger-account__panel {
   min-height: 800px;
@@ -8283,54 +8464,41 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--color-base-0);
 }
 .Layer__ledger-account__entry-details__header {
-  background: var(--color-base-0);
   border-top-left-radius: var(--border-radius-sm);
   border-top-right-radius: var(--border-radius-sm);
+  background: var(--color-base-0);
 }
 .Layer__ledger-account__title-container {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: flex-start;
+  justify-content: flex-start;
   width: 100%;
 }
 .Layer__ledger-account__balance-container {
   display: flex;
-  align-items: center;
   gap: var(--spacing-xs);
+  align-items: center;
 }
 .Layer__ledger-account__balance-label {
   color: var(--color-base-600);
 }
-.Layer__ledger-account__entry-details__back-btn {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  padding-bottom: var(--spacing-md);
-}
 .Layer__ledger-account__entry-details__title-container > .Layer__text {
   font-size: 24px;
 }
 .Layer__ledger-account__entry-details__line-items {
   padding: var(--spacing-md);
 }
-.Layer__ledger-account__entry-details__back-btn {
-  display: none;
-  background: var(--color-base-0);
-  padding-top: var(--spacing-xl);
-  padding-left: var(--spacing-xl);
-  padding-right: var(--spacing-xl);
-}
 .Layer__ledger-account-table__tablet-main-col .Layer__table-cell-content {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: var(--spacing-xs);
+  align-items: flex-start;
 }
 .Layer__ledger-account-table__tablet-main-col .Layer__ledger-account-table__tablet-main-col__date {
   display: flex;
-  align-items: center;
   gap: var(--spacing-xs);
+  align-items: center;
 }
 .Layer__ledger_account-table__journal-id {
   color: var(--color-base-800);
@@ -8338,14 +8506,14 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__ledger_account-table__balances-mobile {
   display: flex;
   flex-direction: column;
-  width: 100%;
   gap: var(--spacing-xs);
+  width: 100%;
 }
 .Layer__ledger_account-table__balance-item {
   display: flex;
-  width: 100%;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
 }
 .Layer__ledger_account-table__balance-item .Layer__ledger_account-table__balances-mobile__value {
   font-weight: var(--font-weight-bold);
@@ -8355,14 +8523,11 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__ledger-account__panel .Layer__panel__sidebar .Layer__panel__sidebar-content {
     width: 100%;
   }
-  .Layer__ledger-account__entry-details__back-btn {
-    display: flex;
-  }
 }
 @container (min-width: 500px) and (max-width: 1024px) {
   .Layer__ledger-account__panel .Layer__details-list .Layer__component-header {
-    padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
+    padding-left: var(--spacing-xl);
   }
 }
 @container (max-width: 499px) {
@@ -8374,21 +8539,17 @@ tbody .Layer__table__empty-row:first-child {
     padding: 0 var(--spacing-xs);
   }
   .Layer__ledger-account__entry-details__line-items {
-    padding-left: 0;
-    padding-right: 0;
     padding-top: 0;
+    padding-right: 0;
+    padding-left: 0;
   }
   .Layer__ledger-account__entry-details__line-items .Layer__card {
-    box-shadow: none;
     border-radius: 0;
+    box-shadow: none;
   }
   .Layer__ledger-account__panel .Layer__panel__sidebar {
     background: var(--color-base-0);
   }
-  .Layer__ledger-account__entry-details__back-btn {
-    padding-left: var(--spacing-md);
-    padding-right: var(--spacing-md);
-  }
 }
 .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-default,
 .Layer__ledger-account__entry-details__table .Layer__table-row.Layer__table-row--variant-summation {
@@ -8402,8 +8563,8 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__ledger-account__entry-details__table tr td:last-child .Layer__table-cell-content,
   .Layer__ledger-account__entry-details__table tr th:first-child.Layer__table-header,
   .Layer__ledger-account__entry-details__table tr th:last-child.Layer__table-header {
-    padding-left: var(--spacing-lg);
     padding-right: var(--spacing-lg);
+    padding-left: var(--spacing-lg);
   }
 }
 @container (max-width: 1023px) and (min-width: 700px) {
@@ -8569,6 +8730,7 @@ tbody .Layer__table__empty-row:first-child {
   left: 0;
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-xs);
   align-items: stretch;
   width: 100%;
 }
@@ -8596,7 +8758,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transactions__header--with-date-picker.Layer__bank-transactions__header--mobile .Layer__datepicker__wrapper {
   margin-right: 4px;
 }
-.Layer__bank-transactions__header-menu__upload-transactions-icon {
+.Layer__bank-transactions__header-menu__icon {
   padding: var(--spacing-3xs);
   border-radius: var(--spacing-3xs);
   background: var(--color-base-200);
@@ -8657,6 +8819,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-row .Layer__table-cell {
   background-color: var(--table-bg);
+  color: var(--color-base-900);
   transition: background-color var(--transition-speed) ease-out;
 }
 .Layer__bank-transaction-row .Layer__table-cell-content {
@@ -8866,15 +9029,11 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-row__table-cell--amount-debit,
 .Layer__bank-transaction-list-item__amount-debit {
   justify-content: flex-end;
-  color: var(--text-color-primary);
 }
 .Layer__bank-transaction-row__table-cell--amount-debit .Layer__table-cell-content,
 .Layer__bank-transaction-list-item__amount-debit .Layer__table-cell-content {
   justify-content: flex-end;
 }
-.Layer__bank-transaction-list-item__amount-debit {
-  color: var(--text-color-primary);
-}
 .Layer__expanded-bank-transaction-row__description {
   padding: 0 var(--spacing-md);
 }
@@ -9117,6 +9276,12 @@ tbody .Layer__table__empty-row:first-child {
   min-width: var(--width);
   max-width: var(--width);
 }
+.Layer__bank-transactions__checkbox-col {
+  width: 48px;
+}
+.Layer__bank-transactions__checkbox-col .Layer__table-cell-content {
+  justify-content: center;
+}
 .Layer__bank-transactions__date-col {
   box-sizing: border-box;
   width: 140px;
@@ -9127,9 +9292,6 @@ tbody .Layer__table__empty-row:first-child {
   box-sizing: border-box;
   color: var(--color-base-1000);
 }
-.Layer__bank-transactions__tx-text {
-  max-width: 32ch;
-}
 .Layer__bank-transactions__account-col {
   box-sizing: border-box;
   width: 30ch;
@@ -9154,6 +9316,9 @@ tbody .Layer__table__empty-row:first-child {
     padding-right: var(--spacing-md);
     padding-left: var(--spacing-xl);
   }
+  .Layer__table.Layer__bank-transactions__table .Layer__bank-transactions__checkbox-col + .Layer__table-header.Layer__bank-transactions__date-col {
+    padding-left: var(--spacing-md);
+  }
   .Layer__table.Layer__bank-transactions__table .Layer__table-header.Layer__table-cell__category-col {
     padding-right: var(--spacing-xl);
     padding-left: var(--spacing-md);
@@ -9167,16 +9332,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col {
   text-overflow: ellipsis;
 }
-.Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col .Layer__table-cell-content .Layer__bank-transactions__account-text,
-.Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__account-col .Layer__table-cell-content .Layer__bank-transactions__tx-text,
-.Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col .Layer__table-cell-content .Layer__bank-transactions__account-text,
-.Layer__bank-transaction-row:not(.Layer__bank-transaction-row--expanded) .Layer__bank-transactions__tx-col .Layer__table-cell-content .Layer__bank-transactions__tx-text {
-  box-sizing: border-box;
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .Layer__bank-transaction-row.Layer__bank-transaction-row--expanded td {
   vertical-align: top;
 }
@@ -9225,9 +9380,6 @@ tbody .Layer__table__empty-row:first-child {
     box-shadow: none;
   }
 }
-.Layer__tooltip.Layer__bank-transactions__tx-tooltip {
-  max-width: 250px;
-}
 .Layer__bank-transaction-list-item__match-tooltip,
 .Layer__expanded-bank-transaction-row__match-tooltip,
 .Layer__bank-transaction-row__match-tooltip {
@@ -10227,9 +10379,9 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__component-container.Layer__journal {
+  position: relative;
   display: flex;
   align-items: stretch;
-  position: relative;
   overflow: auto;
 }
 .Layer__component-container.Layer__journal .Layer__table-state-container {
@@ -10251,8 +10403,8 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 100%;
 }
 .Layer__journal__table-container {
-  max-width: 100%;
   overflow: auto;
+  max-width: 100%;
 }
 .Layer__journal__arrow .Layer__table-cell-content {
   padding-right: 0 !important;
@@ -10273,8 +10425,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__journal__actions {
   display: flex;
-  align-items: center;
   gap: var(--spacing-sm);
+  align-items: center;
 }
 .Layer__table-cell.Layer__journal__arrow,
 .Layer__table-cell.Layer__journal__balance {
@@ -10297,19 +10449,19 @@ tbody .Layer__table__empty-row:first-child {
   font-weight: var(--font-weight-bold);
 }
 .Layer__journal__balance {
-  text-align: right;
   justify-content: flex-end;
+  text-align: right;
 }
 .Layer__table-cell.Layer__journal__actions {
   width: 160px;
 }
 .Layer__table-cell.Layer__journal__actions .Layer__table-cell-content {
   display: flex;
-  justify-content: flex-end;
+  gap: var(--spacing-xs);
   align-items: center;
+  justify-content: flex-end;
   padding-top: var(--spacing-3xs);
   padding-bottom: var(--spacing-3xs);
-  gap: var(--spacing-xs);
 }
 .Layer__table-cell.Layer__journal__actions .Layer__table-cell-content > .Layer__btn {
   opacity: 0;
@@ -10318,12 +10470,12 @@ tbody .Layer__table__empty-row:first-child {
   transform: scale(0.92);
 }
 .Layer__table-cell.Layer__journal__actions .Layer__btn--icon-only {
-  width: 32px;
+  box-sizing: border-box;
   height: 32px;
   min-height: 32px;
   max-height: 32px;
+  width: 32px;
   padding: 0;
-  box-sizing: border-box;
 }
 .Layer__journal-line__table-row {
   background-color: var(--color-base-50);
@@ -10352,11 +10504,11 @@ tbody .Layer__table__empty-row:first-child {
   margin: auto;
 }
 .Layer__journal__form-edit-entry {
-  padding: var(--spacing-md) var(--spacing-xl);
   display: flex;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-md);
+  padding: var(--spacing-md) var(--spacing-xl);
 }
 .Layer__journal__form-edit-entry .Layer__text {
   margin: 0;
@@ -10397,12 +10549,12 @@ tbody .Layer__table__empty-row:first-child {
     width: 64px;
   }
   .Layer__journal__row---mobile {
-    visibility: visible;
     display: table-row;
+    visibility: visible;
   }
   .Layer__journal__row---desktop {
-    visibility: hidden;
     display: none;
+    visibility: hidden;
   }
   .Layer__journal__form-row {
     flex-direction: column;
@@ -10415,29 +10567,25 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__journal__entry-details__title .Layer__component-header {
   padding-bottom: var(--spacing-3xs);
 }
-.Layer__journal__entry-details__title .Layer__journal__entry-details__back-btn {
-  display: flex;
-  background: var(--color-base-0);
-}
 .Layer__journal__form__input-group__line-item {
   display: flex;
   flex-direction: column;
-  padding: var(--spacing-md) 0;
   gap: var(--spacing-2xs);
+  padding: var(--spacing-md) 0;
 }
 .Layer__journal__form__input-group__line-item:not(:first-of-type) {
   border-top: 1px solid var(--color-base-300);
 }
 .Layer__remove__button {
-  box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
   padding: 8px;
+  box-shadow: 0 0 0 1px var(--input-border-color), 0 0 0 2px rgba(0, 0, 0, 0);
   margin-left: 8px;
 }
 .Layer__journal__form__input-group {
   display: flex;
   flex-direction: column;
-  padding: var(--spacing-xl);
   gap: var(--spacing-3xs);
+  padding: var(--spacing-xl);
 }
 .Layer__journal__form__input-group__textarea {
   background: var(--color-base-50);
@@ -10450,9 +10598,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__journal__form__input-group .Layer__input-group .Layer__journal__datepicker__wrapper {
   display: flex;
+  gap: var(--spacing-xs);
   align-items: center;
   justify-content: flex-end;
-  gap: var(--spacing-xs);
 }
 .Layer__journal__form__input-group .Layer__input-label {
   padding: 0;
@@ -10464,10 +10612,10 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
 }
 .Layer__journal__form__error-message {
-  padding: var(--spacing-4xs) var(--spacing-xl);
+  box-sizing: border-box;
   width: 100%;
+  padding: var(--spacing-4xs) var(--spacing-xl);
   text-align: right;
-  box-sizing: border-box;
   color: var(--color-danger);
 }
 .Layer__journal__add-entry-line {
@@ -10500,15 +10648,15 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__input-group,
   .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__journal__form__input-group__title,
   .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__journal__add-entry-line {
-    max-width: 600px;
     width: 100%;
+    max-width: 600px;
     margin: auto;
   }
   .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__form .Layer__header__col {
     width: 100%;
-    margin: auto;
-    padding: var(--spacing-md) var(--spacing-xl);
     max-width: calc(600px + var(--spacing-xl) * 2);
+    padding: var(--spacing-md) var(--spacing-xl);
+    margin: auto;
   }
   .Layer__journal__panel .Layer__panel__sidebar .Layer__panel__sidebar-content .Layer__journal__bottom-actions {
     max-width: 600px;
@@ -10517,9 +10665,6 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__journal .Layer__journal__sidebar__header .actions {
     display: none;
   }
-  .Layer__journal .Layer__journal__sidebar__header .actions {
-    display: none;
-  }
   .Layer__journal .Layer__journal__bottom-actions {
     display: flex;
   }
@@ -10535,8 +10680,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 @container (min-width: 500px) and (max-width: 1024px) {
   .Layer__journal__panel .Layer__details-list .Layer__component-header {
-    padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
+    padding-left: var(--spacing-xl);
   }
 }
 @container (max-width: 499px) {
@@ -10548,21 +10693,17 @@ tbody .Layer__table__empty-row:first-child {
     padding: 0 var(--spacing-xs);
   }
   .Layer__journal__entry-details__line-items {
-    padding-left: 0;
-    padding-right: 0;
     padding-top: 0;
+    padding-right: 0;
+    padding-left: 0;
   }
   .Layer__journal__entry-details__line-items .Layer__card {
-    box-shadow: none;
     border-radius: 0;
+    box-shadow: none;
   }
   .Layer__journal__panel .Layer__panel__sidebar {
     background: var(--color-base-0);
   }
-  .Layer__journal__entry-details__back-btn {
-    padding-left: var(--spacing-md);
-    padding-right: var(--spacing-md);
-  }
   .Layer__input-group.Layer__input-group--inline {
     flex-direction: column;
     gap: var(--spacing-2xs);
@@ -10689,14 +10830,14 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__linked-accounts__header {
   position: sticky;
   left: 0;
-  padding: var(--spacing-md);
+  padding: var(--spacing-lg);
 }
 .Layer__linked-accounts__list {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-md);
   align-items: stretch;
-  padding: var(--spacing-md);
+  padding: var(--spacing-lg);
 }
 @media screen and (width <= 650px) {
   .Layer__linked-accounts__list {
@@ -10711,12 +10852,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__linked-accounts__loader-container {
   min-height: 120px;
 }
-.Layer__linked-accounts__header {
-  padding: var(--spacing-lg);
-}
-.Layer__linked-accounts__list {
-  padding: var(--spacing-lg);
-}
 .Layer__linked-accounts__new-account {
   box-sizing: border-box;
   display: flex;
@@ -10815,8 +10950,8 @@ tbody .Layer__table__empty-row:first-child {
   padding: var(--spacing-xs);
   border-top-left-radius: var(--border-radius-xs);
   border-top-right-radius: var(--border-radius-xs);
-  border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
   background: var(--color-base-50);
   color: var(--text-color-primary);
 }
@@ -10867,8 +11002,8 @@ tbody .Layer__table__empty-row:first-child {
   padding: 0 var(--spacing-xs);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-bottom-right-radius: var(--border-radius-xs);
   border-bottom-left-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
   background: var(--color-base-50);
 }
 .Layer__linked-account-thumb .middlebar .account-balance-text {
@@ -10881,8 +11016,8 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-xs);
   align-items: center;
   padding: var(--spacing-xs);
-  border-bottom-right-radius: var(--border-radius-xs);
   border-bottom-left-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
 }
 .Layer__linked-account-thumb .loadingbar .loading-text {
   flex: 1;
@@ -10917,8 +11052,8 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-2xs);
 }
 .Layer__linked-account-thumb.--as-widget .topbar {
-  border-bottom-right-radius: var(--border-radius-xs);
   border-bottom-left-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
 }
 .Layer__linked-account-thumb.--as-widget .account-number {
   display: flex;
@@ -11232,13 +11367,13 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__ProfitAndLossSummariesListItem {
   all: unset;
   display: grid;
-  background: var(--color-base-0);
-  border-radius: var(--border-radius-xs);
-  box-shadow: 0px 0px 0px 1px var(--color-base-300);
   padding: var(--spacing-4xs);
+  border-radius: var(--border-radius-xs);
+  box-shadow: 0 0 0 1px var(--color-base-300);
+  background: var(--color-base-0);
 }
 .Layer__ProfitAndLossSummariesListItem[data-active] {
-  box-shadow: 0px 0px 0px 1px var(--color-base-200);
+  box-shadow: 0 0 0 1px var(--color-base-200);
   background: var(--color-base-50);
 }
 .Layer__ProfitAndLossSummariesListItem[data-clickable] {
@@ -11250,14 +11385,14 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__ProfitAndLossSummariesList {
   all: unset;
   display: grid;
-  gap: var(--spacing-sm);
   grid-auto-rows: minmax(0, 1fr);
+  gap: var(--spacing-sm);
 }
 @container (min-width: 48rem) {
   .Layer__ProfitAndLossSummariesList {
     --column-count: 3;
-    gap: var(--spacing-md);
     grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
+    gap: var(--spacing-md);
   }
   .Layer__ProfitAndLossSummariesList[data-column-count="4"] {
     --column-count: 4;
@@ -11265,14 +11400,14 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__ProfitAndLossSummariesSummary {
   display: grid;
-  min-block-size: 3rem;
+  grid-template-areas: "chart heading" "chart amount";
   grid-template-columns: auto minmax(0, 1fr);
   gap: var(--spacing-3xs) var(--spacing-xs);
-  grid-template-areas: "chart heading" "chart amount";
+  min-block-size: 3rem;
 }
 .Layer__ProfitAndLossSummariesSummary[data-size=lg] {
-  min-block-size: 6rem;
   column-gap: var(--spacing-md);
+  min-block-size: 6rem;
 }
 .Layer__ProfitAndLossSummariesSummary [slot=heading] {
   grid-area: heading;
@@ -12020,28 +12155,191 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__project-view .Layer__select__menu {
   z-index: 2;
 }
+.Layer__service-offering {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  justify-content: flex-start;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--border-radius-sm);
+  border: none;
+  background: var(--color-white);
+}
+.Layer__service-offering__calendly-container {
+  overflow: hidden;
+  max-height: 0;
+  margin: 0;
+  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.Layer__service-offering__calendly-container.visible {
+  max-height: 800px;
+  margin: var(--spacing-lg) 0;
+}
+.Layer__service-offering__calendly-container .calendly-inline-widget {
+  min-height: 630px;
+  width: 100%;
+  margin-bottom: var(--spacing-lg);
+  transition: opacity 0.3s ease-in-out 0.8s;
+}
+.Layer__feature-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  width: 33%;
+  margin: auto 0;
+  text-align: center;
+}
+.Layer__feature-card .img-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 320px;
+  width: auto;
+}
+@media (width <= 768px) {
+  .Layer__feature-card .img-container {
+    height: 100%;
+    max-width: max(80%, 240px);
+    margin: var(--spacing-xl) auto;
+  }
+}
+@media (width <= 1024px) {
+  .Layer__feature-card .img-container {
+    margin: var(--spacing-md) auto;
+  }
+}
+.Layer__feature-card .img-container img {
+  height: 100%;
+  width: auto;
+  max-width: 100%;
+  margin: 0 auto;
+  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.2));
+}
+.Layer__service-offering-options {
+  max-width: 1200px;
+  padding: var(--spacing-xl) var(--spacing-lg);
+  margin: 0 auto;
+}
+.Layer__service-offering-options__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-2xl);
+  justify-items: center;
+  margin: 0 auto;
+}
+@media (width <= 720px) {
+  .Layer__service-offering-options__grid {
+    grid-template-columns: 1fr;
+  }
+}
+.Layer__service-offering-options__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  border-radius: 16px;
+  border: 1px solid var(--color-base-100);
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  margin: 0;
+  background: white;
+  overflow-wrap: break-word;
+}
+.Layer__service-offering-options__feature-check {
+  color: var(--fg-subtle);
+}
+.Layer__service-offering__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xl);
+}
+.Layer__service-offering__offers {
+  width: 100%;
+  background-color: transparent;
+}
+.Layer__service-offering__responsive-layout {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+@media (width <= 1440px) {
+  .Layer__service-offering__responsive-layout {
+    flex-direction: column;
+  }
+}
+.Layer__service-offering__responsive-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xl);
+  max-width: 420px;
+}
+@media (width <= 1440px) {
+  .Layer__service-offering__responsive-content {
+    max-width: 100%;
+  }
+}
+.Layer__service-offering__responsive-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: margin-top 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+@media (width <= 1440px) {
+  .Layer__service-offering__responsive-image {
+    margin-top: var(--spacing-lg);
+  }
+}
+.Layer__service-offering__responsive-image img {
+  height: auto;
+  max-height: 480px;
+  max-width: 100%;
+  object-fit: cover;
+  opacity: 0;
+  animation: fade-in-image 0.4s ease-in forwards;
+  animation-delay: 0.1s;
+}
+@keyframes fade-in-image {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.Layer__mobile-feature-section {
+  box-sizing: border-box;
+  gap: var(--spacing-xl);
+  width: 100%;
+  padding: 0 var(--spacing-md);
+}
+.Layer__mobile-feature-section .Layer__feature-card {
+  width: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+}
 .Layer__tooltip {
   box-sizing: border-box;
+  z-index: 100;
   width: max-content;
   max-width: calc(100vw - 10px);
-  z-index: 100;
 }
 .Layer__tooltip[data-width=md] {
   max-width: 256px;
 }
 .Layer__tooltip .Layer__tooltip-content {
-  background: var(--color-base-1000);
-  color: var(--color-base-300);
+  box-sizing: border-box;
   padding: var(--spacing-2xs) var(--spacing-sm);
   border-radius: var(--border-radius-2xs);
-  box-sizing: border-box;
+  background: var(--color-base-1000);
   font-size: var(--text-sm);
+  color: var(--color-base-300);
 }
 .Layer__tooltip-trigger {
   display: flex;
   flex: 1;
-  padding-top: 2px;
   max-width: 100%;
+  padding-top: 2px;
 }
 .Layer__actionable-list__tooltip-content {
   z-index: 99999;
@@ -12051,36 +12349,36 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   align-items: flex-start;
 }
 .Layer__actionable-list__tooltip-content .Layer__tooltip-content {
-  margin-right: auto;
   max-width: 220px;
-  border-radius: var(--border-radius-3xs);
   padding: var(--spacing-2xs) var(--spacing-sm);
+  border-radius: var(--border-radius-3xs);
+  margin-right: auto;
   background-color: var(--color-base-800);
   color: var(--color-base-0);
 }
 .Layer__toasts-container {
   position: fixed;
-  bottom: 20px;
+  z-index: 1000;
   right: 20px;
+  bottom: 20px;
   display: flex;
   flex-direction: column-reverse;
   gap: 10px;
-  z-index: 1000;
 }
 .Layer__toasts-container .Layer__toast {
-  color: var(--color-base-0);
-  background: var(--color-base-1000);
-  border-radius: var(--spacing-3xs);
   padding: var(--spacing-xs) var(--spacing-md);
-  opacity: 0;
-  transform: translateY(20px);
-  transition: opacity 0.6s linear, transform 0.6s linear;
+  border-radius: var(--spacing-3xs);
   box-shadow:
     0 4px 4px 0 var(--base-transparent-5, rgba(16, 24, 40, 0.05)),
     0 3px 3px 0 var(--base-transparent-6, rgba(16, 24, 40, 0.06)),
     0 2px 2px 0 var(--base-transparent-8, rgba(16, 24, 40, 0.08)),
     0 1px 0 0 var(--base-transparent-12, rgba(16, 24, 40, 0.12)),
     0 0 0 1px var(--base-900, #05132f);
+  background: var(--color-base-1000);
+  color: var(--color-base-0);
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s linear, transform 0.6s linear;
 }
 .Layer__toasts-container .Layer__toast p {
   margin: 0;
@@ -12088,12 +12386,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   color: var(--color-base-0);
 }
 .Layer__toasts-container .Layer__toast.Layer__toast--success {
-  background: var(--color-info-success);
   box-shadow: 0 0 0 1px var(--color-info-success);
+  background: var(--color-info-success);
 }
 .Layer__toasts-container .Layer__toast.Layer__toast--error {
-  background: var(--color-info-error);
   box-shadow: 0 0 0 1px var(--color-info-error);
+  background: var(--color-info-error);
 }
 .Layer__toast.enter {
   opacity: 1;
@@ -12112,9 +12410,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__TransactionsToReview {
   display: flex;
+  gap: var(--spacing-xs);
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-xs);
   padding: var(--spacing-2xs) var(--spacing-xs);
 }
 .Layer__accounting-overview-profit-and-loss-charts {
@@ -12145,8 +12443,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   }
 }
 .Layer__accounting-overview-profit-and-loss-chart {
-  width: 100%;
   box-sizing: border-box;
+  width: 100%;
 }
 @container (max-width: 460px) {
   .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
@@ -12216,7 +12514,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 @container (min-width: 1024px) {
   .Layer__reports .Layer__panel__content {
-    border-bottom-right-radius: 0;
     border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
   }
 }