.hero-flow {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1200 / 640;
  background: var(--neutral-200);
}

.hero-flow__stage {
  --hf-scale: tan(atan2(100cqw, 1440px));
  position: relative;
  width: 1440px;
  height: 949px;
  transform: scale(var(--hf-scale)) translate(var(--hf-cam-x, 0px), var(--hf-cam-y, 0px)) scale(var(--hf-cam-k, 1));
  transform-origin: 0 0;
  color: var(--neutral-400);
  font-family: var(--hf-font);
  font-size: var(--hf-font-size-body);
  line-height: 18px;
  user-select: none;
}

.hero-flow svg {
  display: block;
  flex-shrink: 0;
}

.hf-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  isolation: isolate;
}

.hf-layer[data-visible="false"] {
  visibility: hidden;
  opacity: 0;
}

.hf-layer[data-blur="true"] {
  filter: blur(6px);
}


.hf-grid {
  left: 0;
  display: flex;
}

.hf-grid[data-rows="6"] [data-rows-only="7"],
.hf-grid[data-rows="7"] [data-rows-only="6"] {
  display: none;
}

.hf-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 50px;
  padding: 14px 10px;
  position: relative;
  z-index: 1;
  border-right: 1px solid var(--primary-200);
  background: var(--neutral-100);
}

.hf-sidebar__brand {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  height: 35px;
}

.hf-sidebar__logo {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 35px;
}

.hf-logo {
  grid-area: 1 / 1;
  opacity: 0;
}

.hero-flow[data-brand="centology"] .hf-logo[data-logo="centology"],
.hero-flow[data-brand="lca"] .hf-logo[data-logo="lca"],
.hero-flow[data-brand="ebc"] .hf-logo[data-logo="ebc"],
.hero-flow[data-brand="dma"] .hf-logo[data-logo="dma"] {
  opacity: 1;
}

.hero-flow .hf-morph .hf-logo[data-logo] {
  opacity: 0;
}

.hf-morph[data-brand="centology"] .hf-logo[data-logo="centology"],
.hf-morph[data-brand="lca"] .hf-logo[data-logo="lca"],
.hf-morph[data-brand="ebc"] .hf-logo[data-logo="ebc"],
.hf-morph[data-brand="dma"] .hf-logo[data-logo="dma"] {
  opacity: 1;
}

.hf-sidebar__collapse {
  display: flex;
  flex-shrink: 0;
  padding: 6px 2px;
  border: 1px solid var(--primary-50);
  border-radius: 100px;
  background: var(--neutral-100);
  color: var(--primary-500);
}

.hf-sidebar__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hf-sidebar__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hf-sidebar__group--muted {
  opacity: 0.8;
}

.hf-sidebar__item {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--primary-500);
}

.hf-sidebar__item--active {
  color: var(--primary-600);
}

.hf-sidebar__sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hf-sidebar__sub .hf-sidebar__item {
  color: var(--primary-300);
}

.hf-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.hf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--primary-200);
  background: var(--neutral-100);
}

.hf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-400);
  font-size: var(--hf-font-size-large);
  line-height: 20px;
}

.hf-breadcrumb > span {
  padding: 0 2px;
}

.hf-breadcrumb__sep {
  font-size: var(--hf-font-size-medium);
}

.hf-breadcrumb__current {
  color: var(--primary-500);
  font-weight: 700;
}

.hf-topbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hf-topbar__icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hf-icon-button {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: 6px;
  color: var(--primary-500);
}

.hf-icon-button--active {
  background: var(--primary-100);
  color: var(--primary-600);
}

.hf-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 16px;
  padding: 0 1px;
  border-radius: 8px;
  background: var(--additional-red-200);
  color: var(--neutral-100);
  font-size: var(--hf-font-size-caption);
  font-weight: 700;
  line-height: 16px;
}

.hf-badge--wide {
  width: 24.667px;
}

.hf-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background: var(--primary-600);
  color: var(--neutral-100);
  font-size: var(--hf-font-size-large);
  font-weight: 700;
  line-height: 20px;
}

.hf-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 18px 24px;
  background: var(--neutral-200);
}

.hf-toolbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 36px;
}

.hf-toolbar__left {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
}

.hf-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hf-view-switch {
  display: flex;
  gap: 3px;
  padding: 5px 7px;
  border: 1px solid var(--primary-200);
  border-radius: 6px;
  background: var(--neutral-100);
}

.hf-view-switch__on {
  color: var(--primary-600);
  --hf-icon-fill: var(--primary-100);
}

.hf-view-switch__off {
  color: var(--primary-500);
  --hf-icon-fill: var(--primary-50);
}

.hf-view-switch .hf-fill {
  fill: var(--hf-icon-fill);
}

.hf-chip-button {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 5px;
  border: 1px solid var(--secondary-300);
  border-radius: 6px;
  background: var(--secondary-200);
  color: var(--secondary-600);
}

.hf-chip-button span {
  padding-right: 2px;
}

.hf-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  max-width: 400px;
  height: 36px;
  padding: 7px 8px;
  border: 1px solid var(--primary-200);
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--primary-400);
}

.hf-search__placeholder {
  overflow: hidden;
  padding-left: 4px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hf-total {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 36px;
  padding: 7px 14px;
  border: 1px solid var(--primary-200);
  border-radius: 6px;
  background: var(--primary-100);
}

.hf-total__label {
  color: var(--primary-600);
  font-size: var(--hf-font-size-small);
  font-weight: 700;
  line-height: 15px;
}

.hf-total__value {
  color: var(--primary-900);
  font-size: var(--hf-font-size-medium);
  font-weight: 700;
  line-height: 20px;
}

.hf-button {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--primary-600);
  border-radius: 6px;
  font-size: var(--hf-font-size-body);
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.hf-button span {
  padding: 0 4px;
}

.hf-button--secondary {
  color: var(--primary-600);
}

.hf-button--primary {
  background: var(--primary-600);
  color: var(--neutral-100);
}

.hf-table {
  overflow: hidden;
  outline: 1px solid var(--primary-200);
  outline-offset: -1px;
  border-radius: 6px;
  background: var(--neutral-100);
}

.hf-table__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 200px minmax(140px, 1fr) 200px 120px 130px 65px 78px;
  align-items: center;
}

.hf-table__head {
  background: var(--primary-600);
  color: var(--neutral-100);
  font-size: var(--hf-font-size-small);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 16px;
}

.hf-table__head > span {
  padding: 10px 12px;
  white-space: nowrap;
}

.hf-table__body .hf-table__row {
  height: 40px;
  border-bottom: 1px solid var(--primary-200);
}

.hf-table__body .hf-table__row[data-hover="true"] {
  background: var(--primary-50);
}

.hero-flow[data-playing="true"] .hf-grid[data-rows="7"] [data-target="new-row"] {
  animation: hf-row-in var(--duration-slow) var(--ease-out);
}

.hf-table__body .hf-table__row > span {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  padding: 8px 12px;
  white-space: nowrap;
}

.hf-table .hf-cell--end {
  justify-content: flex-end;
  text-align: right;
}

.hf-cell--type svg {
  color: var(--primary-500);
}

.hf-cell--status {
  gap: 6px;
}

.hf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.hf-dot--proposed { color: var(--additional-blue); }
.hf-dot--pending { color: var(--status-pending); }
.hf-dot--active { color: var(--additional-green-500); }
.hf-dot--inactive { color: var(--primary-400); }
.hf-dot--closed { color: var(--additional-orange); }
.hf-dot--cancelled { color: var(--additional-red-500); }

.hf-tag {
  display: inline-flex;
  align-items: center;
  height: 21px;
  padding: 1px 7px;
  border-radius: 12px;
  background: var(--primary-100);
  color: var(--primary-900);
  font-size: var(--hf-font-size-small);
  letter-spacing: 0.25px;
  line-height: 1.2;
}

.hf-toggle {
  display: flex;
  justify-content: flex-end;
  width: 38px;
  padding: 3px;
  border-radius: 100px;
  background: var(--primary-600);
  color: var(--primary-600);
}

.hf-toggle__handle {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--neutral-100);
}

.hf-table .hf-cell--actions {
  justify-content: flex-end;
  gap: 6px;
  color: var(--primary-500);
}

.hf-cell--actions svg {
  box-sizing: content-box;
  padding: 2px;
}

.hf-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 46px;
  padding: 0 16px;
  color: var(--neutral-300);
  font-size: var(--hf-font-size-caption);
  line-height: 14px;
}

.hf-pagination__rows {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hf-pagination__select {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 50px;
  height: 28px;
  padding: 0 4px 0 2px;
  border: 1px solid var(--primary-200);
  border-radius: 4px;
  color: var(--neutral-400);
  font-size: var(--hf-font-size-body);
  line-height: 18px;
}

.hf-pagination__count {
  padding: 16px;
}

.hf-pagination__nav {
  display: flex;
  gap: 8px;
  color: var(--neutral-400);
}

.hf-pagination__nav svg {
  box-sizing: content-box;
  padding: 5.6px;
}

.hf-dim {
  left: 0;
  background: color-mix(in srgb, var(--neutral-400) 20%, transparent);
}


.hf-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--primary-200);
  background: var(--neutral-100);
}

.hf-sheet__title {
  padding: 0 2px;
  color: var(--primary-500);
  font-size: var(--hf-font-size-large);
  font-weight: 700;
  line-height: 20px;
}

.hf-sheet__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hf-sheet__icons {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-500);
}

.hf-sheet__icons svg:last-child {
  box-sizing: content-box;
  padding: 2px;
}

.hf-button--save {
  justify-content: center;
  width: 60px;
}

.hf-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  width: 752px;
  border-radius: 8px;
  outline: 1px solid var(--primary-200);
  outline-offset: -1px;
  background: var(--neutral-100);
}

.hf-card:has(.hf-field[data-open="true"]),
.hf-dtable:has(.hf-field[data-open="true"]) {
  overflow: visible;
}

.hf-card__title {
  display: flex;
  border-radius: 8px 8px 0 0;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 8px 16px;
  background: var(--primary-100);
  color: var(--primary-600);
  font-size: var(--hf-font-size-medium);
  font-weight: 700;
  line-height: 20px;
}

.hf-card__body {
  padding: 0 16px 16px;
}

.hf-card__tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hf-field__label {
  color: var(--neutral-250);
  font-size: var(--hf-font-size-small);
  font-weight: 700;
  line-height: 14px;
}

.hf-field__label i {
  color: var(--additional-red-200);
  font-style: normal;
  font-weight: 400;
}

.hf-input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 8px;
  border: 1px solid var(--primary-200);
  border-radius: 6px;
  background: var(--neutral-100);
  color: var(--primary-400);
}

.hf-input__text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 20px;
  padding-left: 4px;
  white-space: nowrap;
}

.hf-input__value {
  display: flex;
  gap: 4px;
  overflow: hidden;
  color: var(--neutral-400);
  text-overflow: ellipsis;
}

.hf-input--disabled {
  background: var(--primary-50);
}

.hf-input--area {
  align-items: flex-start;
  height: 114px;
  padding-left: 12px;
}

.hf-field[data-at] .hf-input__value {
  display: none;
}

.hf-popup[data-fill="1"] .hf-field[data-at="1"] .hf-input__value,
.hf-popup[data-fill="2"] .hf-field[data-at] .hf-input__value,
.hf-drawer[data-fill="1"] .hf-field[data-at] .hf-input__value {
  display: flex;
}

.hf-popup[data-fill="1"] .hf-field[data-at="1"] .hf-input__ph,
.hf-popup[data-fill="2"] .hf-field[data-at] .hf-input__ph,
.hf-drawer[data-fill="1"] .hf-field[data-at] .hf-input__ph {
  display: none;
}

.hf-popup:not([data-fill="2"]):not(:has([data-target="advisers"][data-filled="true"])) .hf-field--risk .hf-input {
  background: var(--primary-50);
}

.hf-drawer[data-fill="0"] [data-fill-only="1"] {
  display: none;
}

.hf-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 1px 7px;
  border-radius: 12px;
  background: var(--primary-100);
  color: var(--neutral-400);
}

.hf-chip svg {
  margin-left: 4px;
  color: var(--primary-400);
}

.hf-toggle--m {
  width: 43px;
}

.hf-toggle--off {
  justify-content: flex-start;
  width: 36px;
  padding: 2px;
  border: 1px solid var(--primary-400);
  background: transparent;
  color: var(--neutral-100);
}

.hf-toggle--off .hf-toggle__handle {
  background: var(--primary-400);
}

.hf-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hf-check__box {
  width: 13.5px;
  height: 13.5px;
  margin: 2.25px;
  border: 1.4px solid var(--primary-400);
  border-radius: 2px;
}

.hf-button-s {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--primary-100);
  color: var(--primary-600);
  font-size: var(--hf-font-size-small);
  font-weight: 400;
  line-height: 14px;
  white-space: nowrap;
}

.hf-button-s--primary,
.hf-button-s--disabled {
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 15px;
}

.hf-button-s--primary span,
.hf-button-s--disabled span {
  padding: 0 2px;
}

.hf-button-s--primary {
  background: var(--primary-600);
  color: var(--neutral-100);
}

.hf-button-s--disabled {
  background: var(--primary-200);
  color: var(--primary-400);
}

.hf-danger {
  display: flex;
  justify-content: flex-end;
  color: var(--additional-red-200);
}

.hf-popup {
  display: flex;
  flex-direction: column;
  width: 950px;
  overflow: hidden;
  background: var(--neutral-200);
}

.hf-popup__body {
  display: flex;
  flex: 1;
  gap: 18px;
}

.hf-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 0 18px 18px;
}

.hf-tab {
  width: 138px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--primary-500);
  font-size: var(--hf-font-size-medium);
  font-weight: 700;
  line-height: 20px;
}

.hf-tab--disabled {
  color: var(--primary-400);
}

.hf-tab[data-hover="true"] {
  background: var(--primary-50);
}

.hf-popup[data-panel="general"] .hf-tab[data-tab="general"],
.hf-popup[data-panel="holdings"] .hf-tab[data-tab="holdings"] {
  border-color: var(--primary-600);
  background: var(--primary-100);
  color: var(--primary-600);
}

.hf-popup__content {
  padding: 18px 24px 18px 0;
}

.hf-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hf-popup[data-panel="general"] .hf-panel[data-panel="holdings"],
.hf-popup[data-panel="holdings"] .hf-panel[data-panel="general"],
.hf-popup[data-holdings="empty"] [data-holdings-only="saved"],
.hf-popup[data-holdings="saved"] [data-holdings-only="empty"] {
  display: none;
}

.hf-form {
  display: grid;
  grid-template-columns: 348px 348px;
  gap: 24px;
}

.hf-form__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hf-form__row {
  display: flex;
  gap: 16px;
}

.hf-field--grow {
  flex: 1;
}

.hf-field--toggle {
  gap: 10px;
}

.hf-form__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hf-form__meta {
  display: flex;
  gap: 8px;
}

.hf-form__meta .hf-field {
  flex: 1;
}

.hf-form__meta .hf-field--narrow {
  flex: 0 0 80px;
}

.hf-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hf-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hf-block__title {
  font-weight: 700;
  line-height: 16px;
}

.hf-mini {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 1px solid var(--primary-200);
  outline-offset: -1px;
  border-radius: 6px;
  background: var(--neutral-100);
}

.hf-mini__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 7px 10px;
  background: var(--primary-300);
  color: var(--primary-900);
  font-size: var(--hf-font-size-caption);
  font-weight: 700;
  line-height: 14px;
}

.hf-mini--end .hf-mini__head span:last-child {
  text-align: right;
}

.hf-mini__empty {
  display: grid;
  place-items: center;
  height: 45px;
  color: var(--primary-400);
  font-size: var(--hf-font-size-caption);
  line-height: 14px;
}

.hf-dtable {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 1px solid var(--primary-200);
  outline-offset: -1px;
  border-radius: 6px;
  background: var(--neutral-100);
}

.hf-dtable__row {
  display: grid;
}

.hf-dtable--holdings .hf-dtable__row { grid-template-columns: 120px 150px 1fr 110px 80px; }
.hf-dtable--saved .hf-dtable__row { grid-template-columns: 100px 160px 1fr 110px 80px; }
.hf-dtable--underlying .hf-dtable__row { grid-template-columns: 90px 140px 1fr 160px 90px 80px; }
.hf-dtable--drawer .hf-dtable__row { grid-template-columns: 200px 1fr 110px 48px; }

.hf-dtable__head {
  background: var(--primary-300);
  color: var(--primary-900);
  font-size: var(--hf-font-size-small);
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 16px;
}

.hf-dtable__head > span {
  padding: 10px 12px;
}

.hf-dtable--holdings .hf-dtable__head > span:nth-child(1),
.hf-dtable--holdings .hf-dtable__head > span:nth-child(4),
.hf-dtable--saved .hf-dtable__row > span:nth-child(1),
.hf-dtable--saved .hf-dtable__row > span:nth-child(4),
.hf-dtable--underlying .hf-dtable__head > span:nth-child(1),
.hf-dtable--underlying .hf-dtable__head > span:nth-child(5) {
  text-align: right;
}

.hf-dtable__empty {
  display: grid;
  place-items: center;
  height: 103px;
  color: var(--primary-400);
  font-size: var(--hf-font-size-medium);
  line-height: 20px;
}

.hf-pagination--inner {
  border-top: 1px solid var(--primary-200);
}

.hf-dtable__saved > span {
  padding: 8px 12px;
  border-bottom: 1px solid var(--primary-200);
}

.hf-dtable__saved b {
  color: var(--primary-600);
}

.hf-dtable__link {
  color: var(--primary-600);
}

.hf-dtable__saved .hf-cell--actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 6px;
  color: var(--primary-500);
}

.hf-manual {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-900);
  font-size: var(--hf-font-size-small);
  line-height: 14px;
}

.hf-saved {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hf-saved__chart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  line-height: 16px;
}

.hf-saved__chart > b span {
  color: var(--primary-500);
}

.hf-saved__row {
  display: flex;
  gap: 20px;
}

.hf-pie {
  margin: 0 8px;
}

.hf-pie--1 { fill: var(--primary-600); color: var(--primary-600); }
.hf-pie--2 { fill: var(--additional-blue); color: var(--additional-blue); }
.hf-pie--3 { fill: var(--secondary-400); color: var(--secondary-400); }
.hf-pie--4 { fill: var(--additional-orange); color: var(--additional-orange); }

.hf-legend {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.hf-legend__item {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  padding: 4px;
  color: var(--primary-900);
  font-size: var(--hf-font-size-small);
  line-height: 14px;
}

.hf-legend__item span {
  flex: 1;
  margin-right: 10px;
}

.hf-legend__dot {
  width: 6px;
  height: 6px;
  margin: 4px 4px 0;
  border-radius: 50%;
  background: currentColor;
}

.hf-drawer {
  display: flex;
  flex-direction: column;
  width: 800px;
  overflow: hidden;
  background: var(--neutral-200);
}

.hf-drawer .hf-sheet__header {
  padding-left: 22px;
}

.hf-drawer__body {
  padding: 18px 24px;
}

.hf-holding {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hf-field--date {
  width: 348px;
}

.hf-field--date svg {
  color: var(--primary-400);
}

.hf-holding__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hf-dtable--drawer .hf-dtable__row:not(.hf-dtable__head) > span {
  display: flex;
  align-items: center;
  padding: 8px 12px 7px;
  border-bottom: 1px solid var(--primary-200);
}

.hf-dtable--drawer .hf-input {
  flex: 1;
}

.hf-dtable--drawer .hf-dtable__row > span:nth-child(3) > .hf-input {
  flex: 0 0 86px;
}

.hf-holding__total {
  display: flex;
  justify-content: space-between;
  color: var(--primary-500);
}

.hf-holding__sum {
  font-size: var(--hf-font-size-medium);
  line-height: 20px;
}

.hf-holding__sum b {
  color: var(--primary-600);
}

.hf-dtable--drawer .hf-field {
  flex: 1;
}

.hf-dtable--drawer .hf-dtable__row > span:nth-child(3) .hf-field {
  flex: 0 0 86px;
}

.hf-drawer[data-fill="0"]:not([data-rows]) [data-row="1"] {
  display: none;
}

.hf-drawer[data-rows="2"] [data-row="2"],
.hf-drawer[data-rows="3"] :is([data-row="2"], [data-row="3"]),
.hf-drawer[data-rows="4"] :is([data-row="2"], [data-row="3"], [data-row="4"]) {
  display: grid;
}

.hero-flow[data-playing="true"] .hf-drawer[data-rows] :is([data-row]:not([data-row="1"]), .hf-dtable__row--empty) {
  animation: hf-row-in var(--duration-slow) var(--ease-out);
}

@keyframes hf-row-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.hf-drawer:has([data-target="h-type"]:not([data-filled="true"]))[data-rows="1"] .hf-dtable__row--empty,
.hf-drawer[data-fill="0"]:has([data-target="h-type"]:not([data-filled="true"])) [data-row="1"] .hf-danger {
  display: none;
}

.hf-drawer[data-fill="0"]:has([data-target="h-type"]:not([data-filled="true"])) [data-target="h-security"] .hf-input {
  background: var(--primary-50);
}

.hf-drawer:not([data-fill="1"], [data-total="100"]) .hf-holding__sum b,
.hf-drawer[data-fill="1"][data-total]:not([data-total="100"]) .hf-holding__sum b {
  color: var(--additional-red-500);
}

.hf-holding__sum [data-sum] {
  display: none;
}

.hf-drawer[data-fill="0"]:not([data-total]) [data-sum="0"],
.hf-drawer[data-fill="1"]:not([data-total]) [data-sum="100"],
.hf-drawer[data-total="40"] [data-sum="40"],
.hf-drawer[data-total="65"] [data-sum="65"],
.hf-drawer[data-total="85"] [data-sum="85"],
.hf-drawer[data-total="100"] [data-sum="100"] {
  display: inline;
}

.hf-switcher {
  top: 0;
  right: 0;
  bottom: 181px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  width: 380px;
  height: fit-content;
  margin: auto;
  padding: var(--space-24);
  border-radius: var(--radius-phone);
  background: var(--color-bg);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--neutral-400) 28%, transparent);
}

.hf-switcher__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  line-height: 1.3;
}

.hf-switcher__title {
  color: var(--neutral-400);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  font-variation-settings: "FLAR" 50;
}

.hf-switcher__lead {
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 12px;
}

.hf-switcher__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hf-switcher__option {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 59px;
  padding: 11px var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-bg);
  --selection-inset-x: 1px;
  --selection-inset-y: 1px;
}

.hf-switcher__option > .selection {
  opacity: 0;
  will-change: opacity;
}

.hf-switcher__option > .selection i {
  transform: scale(0);
  will-change: transform;
}

.hf-switcher__option[data-hover="true"] {
  border-radius: 0;
}

.hf-switcher__option[data-hover="true"] > .selection {
  opacity: 1;
}

.hf-switcher__option[data-hover="true"] > .selection i {
  transform: scale(1);
}

.hf-switcher__option[data-pressed="true"] {
  border-radius: 0;
}

.hf-switcher__option[data-pressed="true"] > .selection {
  --selection-width: var(--selection-stroke-focus);
  opacity: 1;
}

.hf-switcher__option[data-pressed="true"] > .selection i {
  transform: scale(1);
}

.hf-switcher[data-selected="centology"] [data-option="centology"],
.hf-switcher[data-selected="lca"] [data-option="lca"],
.hf-switcher[data-selected="ebc"] [data-option="ebc"],
.hf-switcher[data-selected="dma"] [data-option="dma"] {
  border-radius: 0;
  background: var(--color-surface);
}

:is(
  .hf-switcher[data-selected="centology"] [data-option="centology"],
  .hf-switcher[data-selected="lca"] [data-option="lca"],
  .hf-switcher[data-selected="ebc"] [data-option="ebc"],
  .hf-switcher[data-selected="dma"] [data-option="dma"]
) > .selection {
  --selection-width: var(--selection-stroke-focus);
  opacity: 1;
}

:is(
  .hf-switcher[data-selected="centology"] [data-option="centology"],
  .hf-switcher[data-selected="lca"] [data-option="lca"],
  .hf-switcher[data-selected="ebc"] [data-option="ebc"],
  .hf-switcher[data-selected="dma"] [data-option="dma"]
) > .selection i {
  transform: scale(1);
}


.hf-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 20px;
  height: 20px;
  color: var(--neutral-400);
  opacity: 0;
  translate: var(--hf-x, 900px) 0;
  transform: translateY(var(--hf-y, 520px));
  transition:
    translate var(--hf-move, 0ms) cubic-bezier(0.3, 0, 0.15, 1),
    transform var(--hf-move, 0ms) cubic-bezier(0.25, 0, 0.2, 1);
  pointer-events: none;
}

.hf-cursor > svg {
  position: absolute;
  display: none;
}

.hf-cursor__arrow { top: 0; left: 0; }
.hf-cursor__hand { top: 1px; left: -4px; }
.hf-cursor__text { top: -6.5px; left: -1px; }

.hf-cursor[data-shape="arrow"] .hf-cursor__arrow,
.hf-cursor[data-shape="hand"] .hf-cursor__hand,
.hf-cursor[data-shape="text"] .hf-cursor__text {
  display: block;
}

.hero-flow[data-autoplay="true"] .hero-flow__stage {
  transition: transform var(--hf-cam-ms, 0ms) var(--ease-in-out);
}

.hero-flow[data-autoplay="true"] .hf-cursor {
  opacity: 1;
}

.hf-button-s--primary[data-hover="true"],
.hf-button--primary[data-hover="true"] {
  border-color: var(--primary-700);
  background: var(--primary-700);
}

.hf-button-s--primary[data-pressed="true"],
.hf-button--primary[data-pressed="true"] {
  border-color: var(--primary-800);
  background: var(--primary-800);
}

.hf-field[data-pressed="true"] .hf-input,
.hf-field[data-typing="true"] .hf-input {
  border-color: var(--primary-600);
}

.hf-field[data-typing="true"] .hf-input__value,
.hf-field[data-filled="true"] .hf-input__value {
  display: flex;
}

.hf-field[data-typing="true"] .hf-input__ph,
.hf-field[data-filled="true"] .hf-input__ph {
  display: none;
}

.hf-field[data-typing="true"] .hf-input__value {
  clip-path: inset(0 calc(100% - var(--hf-typed, 0px)) 0 0);
}

.hf-input__text {
  position: relative;
}

.hf-field[data-typing="true"] .hf-input__text::after {
  content: "";
  position: absolute;
  top: 2px;
  left: calc(4px + var(--hf-typed, 0px));
  width: 1px;
  height: 16px;
  background: var(--neutral-400);
}

.hero-flow[data-playing="true"] .hf-dim {
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s var(--duration-base);
}

.hero-flow[data-playing="true"] .hf-dim[data-visible="true"] {
  transition: opacity var(--duration-base) var(--ease-out);
}

.hf-popup[data-visible="false"],
.hf-drawer[data-visible="false"] {
  opacity: 1;
  transform: translateX(100%);
}

.hero-flow[data-playing="true"] :is(.hf-popup, .hf-drawer) {
  transition: transform var(--hf-duration-panel) var(--hf-ease-panel), filter var(--hf-duration-switch) var(--ease-in-out), visibility 0s var(--hf-duration-panel);
}

.hero-flow[data-playing="true"] :is(.hf-popup, .hf-drawer)[data-visible="true"] {
  transition: transform var(--hf-duration-panel) var(--hf-ease-panel), filter var(--hf-duration-switch) var(--ease-in-out);
}

.hero-flow[data-playing="true"] .hf-grid {
  transition: filter var(--hf-duration-switch) var(--ease-in-out);
}

.hero-flow[data-playing="true"] .hf-switcher {
  transition: opacity var(--hf-duration-switch) var(--ease-in-out), visibility 0s var(--hf-duration-switch);
}

.hero-flow[data-playing="true"] .hf-switcher[data-visible="true"] {
  transition: opacity var(--hf-duration-switch) var(--ease-in-out);
}

.hero-flow[data-playing="true"] .hf-switcher__option {
  transition:
    border-radius var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.hero-flow[data-playing="true"] .hf-switcher__option > .selection {
  transition: opacity var(--duration-fast) var(--ease-out);
}

.hero-flow[data-playing="true"] .hf-switcher__option > .selection i {
  transition: transform var(--duration-fast) var(--ease-out);
}

.hero-flow .hf-layer[data-visible="false"] * {
  transition: none;
}

.hero-flow__toggle {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  display: grid;
  place-items: center;
  width: var(--size-tap-target);
  height: var(--size-tap-target);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
}

.hero-flow__toggle[hidden] {
  display: none;
}

.hero-flow__toggle .hero-flow__icon-play,
.hero-flow__toggle[aria-pressed="true"] .hero-flow__icon-pause {
  display: none;
}

.hero-flow__toggle[aria-pressed="true"] .hero-flow__icon-play {
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  .hero-flow__toggle:hover {
    background: var(--color-surface);
  }
}

.hf-field:has(.hf-menu) {
  position: relative;
}

.hf-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 6px 6px;
  background: var(--neutral-100);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--neutral-400) 10%, transparent),
    0 2px 6px color-mix(in srgb, var(--neutral-400) 10%, transparent);
}

.hf-field[data-open="true"] .hf-menu {
  display: flex;
}

.hf-field[data-open="true"] .hf-input {
  border-color: var(--primary-600);
}

.hf-field[data-open="true"] .hf-input > svg {
  rotate: 180deg;
}

.hf-field[data-open="true"] .hf-input__ph {
  visibility: hidden;
}

.hf-menu__item {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  color: var(--neutral-300);
  font-size: var(--hf-font-size-medium);
  line-height: 20px;
}

.hf-menu__item[data-hover="true"],
.hf-menu__item[data-pressed="true"] {
  background: var(--primary-50);
  color: var(--neutral-400);
}

.hf-field--multi[data-open="true"] .hf-input__value {
  display: flex;
}

.hf-field--multi[data-open="true"]:has(.hf-chip[data-picked="true"]) .hf-input__ph {
  display: none;
}

.hf-field--multi[data-open="true"] .hf-chip:not([data-picked="true"]),
.hf-menu__item[data-picked="true"] {
  display: none;
}

.hf-morph {
  position: absolute;
  inset: 0;
  background: var(--neutral-200);
  clip-path: circle(var(--hf-morph-r, 0px) at var(--hf-morph-x, 50%) var(--hf-morph-y, 50%));
  transition: clip-path var(--hf-morph-ms, 0ms) var(--ease-in-out);
  pointer-events: none;
}

.hero-flow .hero-flow__play {
  position: absolute;
  right: var(--space-12);
  bottom: var(--space-12);
  border: 0;
  cursor: pointer;
}

.hero-flow .hero-flow__play[hidden] {
  display: none;
}

.case-hero__caption {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-align: center;
  text-wrap: balance;
}

@media (width < 768px) {
  .case-hero__caption {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
  }
}