html body .hero.hero--sub .hero-inner {
  grid-template-columns:
    minmax(0, 1.06fr)
    minmax(0, 0.94fr) !important;

  align-items:
    stretch !important;
}




html body .hero.hero--sub .crumbs {
  width:
    100% !important;

  margin:
    0
    0
    clamp(20px, 2.4vw, 28px) !important;

  padding:
    0 !important;
}


html body .hero.hero--sub .crumbs ol {
  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    4px
    9px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;

  font-size:
    14px !important;

  line-height:
    1.5 !important;
}


html body .hero.hero--sub .crumbs li {
  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    9px !important;

  width:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text-white) !important;

  list-style:
    none !important;
}




html body .hero.hero--sub .crumbs a,
html body .hero.hero--sub .crumbs a:link,
html body .hero.hero--sub .crumbs a:visited {
  color:
    var(--text-white) !important;

  text-decoration:
    none !important;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.5) !important;

  padding-bottom:
    1px !important;
}


html body .hero.hero--sub .crumbs a:hover {
  border-bottom-color:
    var(--text-white) !important;
}




html body .hero.hero--sub
.crumbs [aria-current="page"] {
  color:
    var(--text-white) !important;

  font-weight:
    700 !important;
}




html body .hero.hero--sub
.crumbs .sep {
  color:
    rgba(255, 255, 255, 0.62) !important;
}




html body .hero.hero--sub .h1 {
  margin-bottom:
    0 !important;

  color:
    var(--text-white) !important;
}




html body .hero.hero--sub .hero-actions {
  margin-top:
    clamp(26px, 3vw, 36px) !important;
}




html body .hero.hero--sub .hero-why {
  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0
    0
    0
    clamp(22px, 2.6vw, 34px) !important;

  border-left:
    2px solid
    rgba(255, 255, 255, 0.3) !important;
}




html body .hero.hero--sub
.hero-why h2 {
  width:
    100% !important;

  margin:
    0
    0
    14px !important;

  padding:
    0 !important;

  color:
    var(--text-white) !important;

  font-size:
    clamp(20px, 1.08rem + 0.72vw, 27px) !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    -0.022em !important;
}




html body .hero.hero--sub
.hero-why p {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text-white) !important;

  font-size:
    16.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.63 !important;
}




@media (max-width: 900px) {

  html body .hero.hero--sub .hero-inner {
    grid-template-columns:
      1fr !important;

    gap:
      38px !important;
  }


  

  html body .hero.hero--sub .hero-why {
    padding:
      30px
      0
      0 !important;

    border-left:
      0 !important;

    border-top:
      2px solid
      rgba(255, 255, 255, 0.3) !important;
  }
}




@media (max-width: 560px) {

  html body .hero.hero--sub .crumbs {
    margin-bottom:
      20px !important;
  }


  html body .hero.hero--sub
  .crumbs ol {
    gap:
      4px
      7px !important;

    font-size:
      13px !important;
  }


  html body .hero.hero--sub
  .crumbs li {
    gap:
      7px !important;
  }


  html body .hero.hero--sub
  .hero-why {
    padding-top:
      26px !important;
  }


  html body .hero.hero--sub
  .hero-why p {
    font-size:
      16px !important;
  }
}





html body .use-grid {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  align-items:
    stretch !important;

  gap:
    clamp(14px, 1.5vw, 20px) !important;

  width:
    100% !important;

  margin:
    44px 0 0 !important;

  padding:
    0 !important;
}




html body .use-grid .use {
  display:
    flex !important;

  flex-direction:
    column !important;

  width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    24px
    22px
    26px !important;

  background-color:
    var(--background) !important;

  color:
    var(--text) !important;

  border:
    1px solid
    var(--border) !important;

  border-radius:
    14px !important;

  box-shadow:
    none !important;

  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease !important;
}




html body .use-grid .use:hover {
  transform:
    translateY(-4px) !important;

  border-color:
    #d3dbe3 !important;

  box-shadow:
    0 16px 38px
    rgba(15, 35, 55, 0.10) !important;
}




html body .use-grid
.use .usp-ico {
  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0 0
    46px !important;

  width:
    46px !important;

  min-width:
    46px !important;

  height:
    46px !important;

  min-height:
    46px !important;

  margin:
    0
    0
    16px !important;

  padding:
    0 !important;

  background-color:
    var(--primary-light) !important;

  color:
    var(--primary) !important;

  border-radius:
    12px !important;
}




html body .use-grid
.use .usp-ico svg {
  display:
    block !important;

  width:
    23px !important;

  height:
    23px !important;

  margin:
    0 !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.5 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}




html body .use-grid
.use .usp-ico img {
  display:
    block !important;

  width:
    23px !important;

  height:
    23px !important;

  margin:
    0 !important;

  object-fit:
    contain !important;
}




html body .use-grid
.use h3 {
  width:
    100% !important;

  margin:
    0
    0
    9px !important;

  padding:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    16.3px !important;

  font-weight:
    700 !important;

  line-height:
    1.3 !important;

  letter-spacing:
    -0.018em !important;
}




html body .use-grid
.use > p,

html body .use-grid
.use > .brxe-text-basic {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text-muted) !important;

  font-size:
    14.8px !important;

  font-weight:
    400 !important;

  line-height:
    1.55 !important;
}




@media (max-width: 1080px) {

  html body .use-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap:
      20px !important;
  }
}




@media (max-width: 900px) {

  html body .use-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}




@media (max-width: 560px) {

  html body .use-grid {
    grid-template-columns:
      1fr !important;

    gap:
      14px !important;

    margin-top:
      34px !important;
  }


  html body .use-grid .use {
    padding:
      22px
      20px
      24px !important;
  }
}




@media (prefers-reduced-motion: reduce) {

  html body .use-grid .use {
    transition:
      none !important;
  }


  html body .use-grid .use:hover {
    transform:
      none !important;
  }
}






html body .sect.sect--soft > .wrap.split {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  align-items:
    center !important;

  gap:
    clamp(30px, 4.4vw, 64px) !important;

  width:
    100% !important;
}


html body .sect.sect--soft > .wrap.split > * {
  min-width:
    0 !important;
}




html body .wrap.split > div:first-child {
  width:
    100% !important;

  min-width:
    0 !important;
}




html body .wrap.split .lead.measure {
  width:
    100% !important;

  margin:
    18px 0 0 !important;

  color:
    var(--text-muted) !important;
}




html body .wrap.split .feat {
  display:
    grid !important;

  grid-template-columns:
    1fr !important;

  gap:
    14px !important;

  width:
    100% !important;

  margin:
    30px 0 0 !important;

  padding:
    0 !important;

  list-style:
    none !important;
}




html body .wrap.split .feat > li {
  display:
    grid !important;

  grid-template-columns:
    26px
    minmax(0, 1fr) !important;

  align-items:
    start !important;

  gap:
    13px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    16px !important;

  font-weight:
    600 !important;

  line-height:
    1.5 !important;

  list-style:
    none !important;
}




html body .wrap.split .feat .tick {
  display:
    grid !important;

  place-items:
    center !important;

  width:
    26px !important;

  min-width:
    26px !important;

  height:
    26px !important;

  min-height:
    26px !important;

  margin:
    1px 0 0 !important;

  padding:
    0 !important;

  background-color:
    var(--primary-light) !important;

  color:
    var(--primary) !important;

  border-radius:
    8px !important;
}


html body .wrap.split .feat .tick svg {
  display:
    block !important;

  width:
    14px !important;

  height:
    14px !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    2.4 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}




html body .wrap.split .ba-figure {
  display:
    block !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body .wrap.split .ba {
  --p: 50;

  position:
    relative !important;

  display:
    block !important;

  width:
    100% !important;

  aspect-ratio:
    4 / 3 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  background-color:
    var(--background-grey) !important;

  border-radius:
    14px !important;

  box-shadow:
    0 18px 42px
    rgba(15, 35, 55, 0.12) !important;

  cursor:
    ew-resize !important;

  touch-action:
    pan-y !important;

  user-select:
    none !important;

  -webkit-user-select:
    none !important;

  -webkit-tap-highlight-color:
    transparent !important;
}




html body .wrap.split .ba-layer {
  position:
    absolute !important;

  inset:
    0 !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  overflow:
    hidden !important;
}




html body .wrap.split .ba-before {
  z-index:
    1 !important;
}




html body .wrap.split .ba-after {
  z-index:
    2 !important;

  clip-path:
    inset(
      0
      0
      0
      calc(var(--p) * 1%)
    ) !important;
}




html body .wrap.split .ba-layer img {
  position:
    absolute !important;

  inset:
    0 !important;

  display:
    block !important;

  width:
    100% !important;

  max-width:
    none !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;

  pointer-events:
    none !important;

  user-select:
    none !important;

  -webkit-user-drag:
    none !important;
}




html body .wrap.split .ba-badge {
  position:
    absolute !important;

  bottom:
    14px !important;

  z-index:
    4 !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    auto !important;

  margin:
    0 !important;

  padding:
    5px
    12px !important;

  border-radius:
    999px !important;

  font-size:
    11px !important;

  font-weight:
    600 !important;

  line-height:
    1.3 !important;

  letter-spacing:
    0.14em !important;

  text-transform:
    uppercase !important;

  white-space:
    nowrap !important;

  pointer-events:
    none !important;
}




html body .wrap.split .ba-badge--l {
  left:
    14px !important;

  background-color:
    var(--background) !important;

  color:
    var(--text-muted) !important;

  border:
    1px solid
    var(--border) !important;
}




html body .wrap.split .ba-badge--r {
  right:
    14px !important;

  background-color:
    var(--primary-dark) !important;

  color:
    var(--text-white) !important;

  border:
    1px solid
    transparent !important;
}




html body .wrap.split .ba-handle {
  position:
    absolute !important;

  top:
    0 !important;

  bottom:
    0 !important;

  left:
    calc(var(--p) * 1%) !important;

  z-index:
    5 !important;

  width:
    2px !important;

  height:
    auto !important;

  margin:
    0 0 0 -1px !important;

  padding:
    0 !important;

  background-color:
    var(--background) !important;

  box-shadow:
    0 0 0 1px
    rgba(15, 35, 55, 0.20) !important;

  cursor:
    ew-resize !important;

  touch-action:
    none !important;
}




html body .wrap.split .ba-knob {
  position:
    absolute !important;

  top:
    50% !important;

  left:
    50% !important;

  display:
    grid !important;

  place-items:
    center !important;

  width:
    46px !important;

  min-width:
    46px !important;

  height:
    46px !important;

  min-height:
    46px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    translate(-50%, -50%) !important;

  background-color:
    var(--background) !important;

  color:
    var(--primary-deep) !important;

  border-radius:
    50% !important;

  box-shadow:
    0 4px 14px
    rgba(15, 35, 55, 0.30) !important;

  pointer-events:
    none !important;
}




html body .wrap.split .ba-knob svg {
  display:
    block !important;

  width:
    22px !important;

  height:
    22px !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    2 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}




html body .wrap.split .ba-handle:focus {
  outline:
    none !important;
}


html body .wrap.split
.ba-handle:focus-visible .ba-knob {
  outline:
    3px solid
    var(--primary) !important;

  outline-offset:
    3px !important;
}




html body .wrap.split .ba-hint {
  display:
    block !important;

  width:
    100% !important;

  margin:
    14px 0 0 !important;

  padding:
    0 !important;

  color:
    var(--text-muted) !important;

  font-size:
    14px !important;

  font-weight:
    400 !important;

  line-height:
    1.5 !important;
}




@media (max-width: 900px) {

  html body
  .sect.sect--soft > .wrap.split {
    grid-template-columns:
      1fr !important;

    gap:
      36px !important;
  }


  html body .wrap.split .ba {
    max-width:
      720px !important;
  }
}




@media (max-width: 560px) {

  html body .wrap.split .feat {
    gap:
      12px !important;

    margin-top:
      26px !important;
  }


  html body .wrap.split
  .feat > li {
    font-size:
      15px !important;
  }


  html body .wrap.split .ba {
    aspect-ratio:
      4 / 3 !important;

    border-radius:
      10px !important;
  }


  html body .wrap.split
  .ba-knob {
    width:
      42px !important;

    min-width:
      42px !important;

    height:
      42px !important;

    min-height:
      42px !important;
  }


  html body .wrap.split
  .ba-badge {
    bottom:
      10px !important;

    padding:
      4px
      9px !important;

    font-size:
      10px !important;
  }


  html body .wrap.split
  .ba-badge--l {
    left:
      10px !important;
  }


  html body .wrap.split
  .ba-badge--r {
    right:
      10px !important;
  }


  html body .wrap.split
  .ba-hint {
    margin-top:
      10px !important;

    font-size:
      13px !important;
  }
}






html body .figs {
  margin-top:
    40px !important;
}




html body .figs {
  
}




html body .figs {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  align-items:
    stretch !important;

  gap:
    clamp(16px, 2vw, 24px) !important;

  width:
    100% !important;

  padding:
    0 !important;
}




html body .figs > .fig {
  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    30px
    28px !important;

  background-color:
    var(--background-soft) !important;

  border:
    1px solid
    var(--border) !important;

  border-radius:
    14px !important;

  box-shadow:
    none !important;
}




html body .figs
.fig > p {
  display:
    block !important;

  width:
    100% !important;

  margin:
    0
    0
    9px !important;

  padding:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    clamp(26px, 1.15rem + 1.5vw, 37px) !important;

  font-weight:
    700 !important;

  line-height:
    1.05 !important;

  letter-spacing:
    -0.028em !important;

  font-variant-numeric:
    tabular-nums !important;

  font-feature-settings:
    "tnum" 1 !important;
}




html body .figs
.fig > span {
  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text-muted) !important;

  font-size:
    15px !important;

  font-weight:
    400 !important;

  line-height:
    1.5 !important;
}




html body .ben-grid {
  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap:
    0
    clamp(30px, 5vw, 72px) !important;

  width:
    100% !important;

  margin:
    30px
    0
    0 !important;

  padding:
    0 !important;
}




html body .ben-grid
> .ben {
  display:
    grid !important;

  grid-template-columns:
    38px
    minmax(0, 1fr) !important;

  align-items:
    start !important;

  gap:
    20px !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    30px
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  border-top:
    1px solid
    var(--border) !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;
}




html body .ben-grid
.ben > .idx {
  display:
    grid !important;

  place-items:
    center !important;

  width:
    38px !important;

  min-width:
    38px !important;

  height:
    38px !important;

  min-height:
    38px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background-color:
    var(--accent) !important;

  color:
    var(--text-black) !important;

  border-radius:
    9px !important;

  font-size:
    15px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;
}




html body .ben-grid
.ben > div {
  width:
    100% !important;

  min-width:
    0 !important;
}




html body .ben-grid
.ben .h3 {
  width:
    100% !important;

  margin:
    0
    0
    8px !important;

  padding:
    0 !important;

  color:
    var(--text) !important;
}




html body .ben-grid
.ben p {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text-muted) !important;

  font-size:
    15.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.6 !important;
}




@media (max-width: 900px) {

  html body .figs {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  html body .ben-grid {
    grid-template-columns:
      1fr !important;

    gap:
      0 !important;
  }
}




@media (max-width: 560px) {

  html body .figs {
    grid-template-columns:
      1fr !important;

    gap:
      14px !important;

    margin-top:
      32px !important;
  }


  html body .figs > .fig {
    padding:
      24px
      22px !important;
  }


  html body .ben-grid {
    margin-top:
      26px !important;
  }


  html body .ben-grid
  > .ben {
    gap:
      16px !important;

    padding:
      24px
      0 !important;
  }
}