@property --bf-fb { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --bf-steps-tt { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --bf-steps-tb { syntax: "<length>"; inherits: false; initial-value: 0px; }

.bf-steps,
#top #wrap_all .bf-steps.bf-steps {
  --asc: 0.96875;
  --desc: 0.2412109375;
  --cap: 0.7275390625;
  --asc-t: var(--asc);
  --desc-t: var(--desc);
  --cap-t: var(--cap);
  --bf-steps-mt: 0px;
  --bf-steps-mb: 0px;
  --bf-steps-peek: 18%;
  --bf-steps-spill: 24px;
  --bf-steps-icon: 56px;
  --bf-steps-rule-color: #024EA3;
  --bf-steps-badge-bg: #024EA3;
  --bf-steps-badge-color: #FFFFFF;
  --bf-steps-title-color: #1C1C1C;
  --bf-steps-text-color: #595959;
  --bf-steps-font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bf-steps-mt-base: var(--bf-steps-mt);
  --bf-steps-mt-now: var(--bf-steps-mt-base);
  --bf-steps-gap: clamp(24px, 5.1491477cqi, 72.5px);
  --bf-steps-rowgap: clamp(24px, 2.8409091cqi, 40px);
  --bf-steps-stack: clamp(24px, 2.8409091cqi, 40px);
  --bf-steps-line: 24px;
  --bf-steps-badge: 32px;
  --bf-steps-rule: 1px;
  --bf-steps-slide-gap: 24px;
  --bf-steps-slide-max: 320px;
  --bf-steps-dot: 8px;
  --bf-steps-speed: 400ms;
  --bf-steps-dot-speed: 200ms;
  --bf-steps-swipe: 0;
  box-sizing: border-box;
  container-type: inline-size;
  display: block;
  position: relative;
  margin-block-start: var(--bf-steps-mt-now);
  margin-block-end: var(--bf-steps-mb);
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps-t,
#top #wrap_all .bf-steps .bf-steps-t {
  display: block;
  --lead: calc((var(--bf-lh) - (var(--asc-t) + var(--desc-t)) * var(--bf-fs)) / 2);
  --bf-steps-tt: calc(var(--bf-fb) * (var(--lead) + (var(--asc-t) - var(--cap-t)) * var(--bf-fs)));
  --bf-steps-tb: calc(var(--bf-fb) * (var(--lead) + var(--desc-t) * var(--bf-fs)));
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
  margin-block-start: calc(-1 * var(--bf-steps-tt));
  margin-block-end: calc(-1 * var(--bf-steps-tb));
  margin-inline-start: 0;
  margin-inline-end: 0;
}

@supports not ((text-box: trim-both cap alphabetic) or (text-box-trim: trim-both)) {
  .bf-steps,
  #top #wrap_all .bf-steps.bf-steps { --bf-fb: 1; }
}

.bf-steps .bf-steps__rule,
#top #wrap_all .bf-steps .bf-steps__rule {
  box-sizing: border-box;
  display: block;
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-start: calc(var(--bf-steps-badge) / 2 - var(--bf-steps-rule) / 2);
  block-size: var(--bf-steps-rule);
  background-color: var(--bf-steps-rule-color);
  pointer-events: none;
  color: var(--bf-steps-rule-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__carousel,
#top #wrap_all .bf-steps .bf-steps__carousel {
  box-sizing: border-box;
  display: block;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__track,
#top #wrap_all .bf-steps .bf-steps__track {
  box-sizing: border-box;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__list,
#top #wrap_all .bf-steps .bf-steps__list {
  box-sizing: border-box;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps:not(.bf-steps--ready) .bf-steps__list,
#top #wrap_all .bf-steps:not(.bf-steps--ready) .bf-steps__list {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  column-gap: var(--bf-steps-gap);
  row-gap: var(--bf-steps-rowgap);
  align-items: start;
  justify-items: stretch;
}

.bf-steps--cauto:not(.bf-steps--ready) .bf-steps__list,
#top #wrap_all .bf-steps--cauto:not(.bf-steps--ready) .bf-steps__list {
  grid-auto-flow: column;
}

.bf-steps--c4:not(.bf-steps--ready) .bf-steps__list,
#top #wrap_all .bf-steps--c4:not(.bf-steps--ready) .bf-steps__list {
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bf-steps--c5:not(.bf-steps--ready) .bf-steps__list,
#top #wrap_all .bf-steps--c5:not(.bf-steps--ready) .bf-steps__list {
  grid-auto-flow: row;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bf-steps--c6:not(.bf-steps--ready) .bf-steps__list,
#top #wrap_all .bf-steps--c6:not(.bf-steps--ready) .bf-steps__list {
  grid-auto-flow: row;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.bf-steps--c7:not(.bf-steps--ready) .bf-steps__list,
#top #wrap_all .bf-steps--c7:not(.bf-steps--ready) .bf-steps__list {
  grid-auto-flow: row;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.bf-steps .bf-steps__step,
#top #wrap_all .bf-steps .bf-steps__step {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--bf-steps-stack);
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  text-align: center;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__badge,
#top #wrap_all .bf-steps .bf-steps__badge {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  inline-size: var(--bf-steps-badge);
  block-size: var(--bf-steps-badge);
  border-radius: 999px;
  background-color: var(--bf-steps-badge-bg);
  color: var(--bf-steps-badge-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__num,
#top #wrap_all .bf-steps .bf-steps__num {
  box-sizing: border-box;
  --bf-fs: 16px;
  --bf-lh: 24px;
  font-size: var(--bf-fs);
  line-height: var(--bf-lh);
  font-weight: 500;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--bf-steps-badge-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__icon,
#top #wrap_all .bf-steps .bf-steps__icon {
  box-sizing: border-box;
  display: block;
  flex-shrink: 0;
  inline-size: var(--bf-steps-icon);
  block-size: var(--bf-steps-icon);
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__img,
#top #wrap_all .bf-steps .bf-steps__img {
  box-sizing: border-box;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__body,
#top #wrap_all .bf-steps .bf-steps__body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  row-gap: var(--bf-steps-line);
  inline-size: 100%;
  text-align: center;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__title,
#top #wrap_all .bf-steps .bf-steps__title {
  box-sizing: border-box;
  --bf-fs: 20px;
  --bf-lh: 24px;
  font-size: var(--bf-fs);
  line-height: var(--bf-lh);
  font-weight: 500;
  font-style: normal;
  overflow-wrap: break-word;
  color: var(--bf-steps-title-color);
  font-family: var(--bf-steps-font);
  letter-spacing: -0.2px;
}

.bf-steps .bf-steps__text,
#top #wrap_all .bf-steps .bf-steps__text {
  box-sizing: border-box;
  --bf-fs: 16px;
  --bf-lh: 24px;
  font-size: var(--bf-fs);
  line-height: var(--bf-lh);
  font-weight: 400;
  font-style: normal;
  overflow-wrap: break-word;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__dots,
#top #wrap_all .bf-steps .bf-steps__dots {
  box-sizing: border-box;
  display: none;
  list-style-type: none;
  margin-block-start: var(--bf-steps-stack);
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps--dots.bf-steps--ready .bf-steps__dots,
#top #wrap_all .bf-steps--dots.bf-steps--ready .bf-steps__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  row-gap: 8px;
}

.bf-steps .bf-steps__dots li,
#top #wrap_all .bf-steps .bf-steps__dots li {
  box-sizing: border-box;
  display: block;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  line-height: 0;
  color: var(--bf-steps-text-color);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__dots .splide__pagination__page,
#top #wrap_all .bf-steps .bf-steps__dots .splide__pagination__page {
  box-sizing: border-box;
  display: block;
  inline-size: var(--bf-steps-dot);
  block-size: var(--bf-steps-dot);
  border-radius: 999px;
  border-style: none;
  padding-block-start: 0;
  padding-block-end: 0;
  padding-inline-start: 0;
  padding-inline-end: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  background-color: var(--bf-steps-badge-bg);
  opacity: 0.28;
  cursor: pointer;
  transition-property: opacity, inline-size;
  transition-duration: var(--bf-steps-dot-speed);
  transition-timing-function: ease;
  color: var(--bf-steps-badge-bg);
  font-family: var(--bf-steps-font);
  letter-spacing: 0;
}

.bf-steps .bf-steps__dots .splide__pagination__page.is-active,
#top #wrap_all .bf-steps .bf-steps__dots .splide__pagination__page.is-active {
  opacity: 1;
  inline-size: calc(var(--bf-steps-dot) * 3);
}

.bf-steps--ready .bf-steps__track,
#top #wrap_all .bf-steps--ready .bf-steps__track {
  overflow: clip;
  overflow-clip-margin: var(--bf-steps-spill);
}

.bf-steps--ready .bf-steps__body,
#top #wrap_all .bf-steps--ready .bf-steps__body {
  max-inline-size: var(--bf-steps-slide-max);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

@media (max-width: 1099px) {
  .bf-steps--swipe,
  #top #wrap_all .bf-steps--swipe.bf-steps--swipe { --bf-steps-swipe: 1; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .bf-steps--cauto:not(.bf-steps--ready) .bf-steps__list,
  .bf-steps--c4:not(.bf-steps--ready) .bf-steps__list,
  .bf-steps--c5:not(.bf-steps--ready) .bf-steps__list,
  .bf-steps--c6:not(.bf-steps--ready) .bf-steps__list,
  .bf-steps--c7:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--cauto:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--c4:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--c5:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--c6:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--c7:not(.bf-steps--ready) .bf-steps__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .bf-steps:not(.bf-steps--ready) .bf-steps__rule,
  #top #wrap_all .bf-steps:not(.bf-steps--ready) .bf-steps__rule { display: none; }
}

@media (max-width: 700px) {
  .bf-steps--cauto:not(.bf-steps--ready) .bf-steps__list,
  .bf-steps--c4:not(.bf-steps--ready) .bf-steps__list,
  .bf-steps--c5:not(.bf-steps--ready) .bf-steps__list,
  .bf-steps--c6:not(.bf-steps--ready) .bf-steps__list,
  .bf-steps--c7:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--cauto:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--c4:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--c5:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--c6:not(.bf-steps--ready) .bf-steps__list,
  #top #wrap_all .bf-steps--c7:not(.bf-steps--ready) .bf-steps__list {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .bf-steps--scale,
  #top #wrap_all .bf-steps--scale.bf-steps--scale { --bf-steps-mt-now: calc(var(--bf-steps-mt-base) * 0.75); }
}

@media (max-width: 899px) {
  .bf-steps--scale,
  #top #wrap_all .bf-steps--scale.bf-steps--scale { --bf-steps-mt-now: calc(var(--bf-steps-mt-base) * 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .bf-steps,
  #top #wrap_all .bf-steps.bf-steps {
    --bf-steps-speed: 0ms;
    --bf-steps-dot-speed: 1ms;
  }
}
