html body .hero.hero--page
.hero-inner:has(> .stack) {
  position: relative !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(340px, 0.92fr) !important;

  align-items: center !important;

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

  width: 100% !important;

  padding-block:
    clamp(30px, 4.4vw, 60px)
    clamp(34px, 4.6vw, 64px) !important;
}




html body .hero.hero--page
.hero-inner:has(> .stack)
> div:first-child {
  width: 100% !important;

  min-width: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}




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

  margin: 0 !important;

  padding:
    22px
    0
    0 !important;

  color:
    rgba(255, 255, 255, 0.72) !important;

  font-size:
    14px !important;

  font-weight:
    400 !important;

  line-height:
    1.5 !important;
}




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

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;

  gap:
    8px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style:
    none !important;
}




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

  flex-direction: row !important;

  align-items: center !important;

  gap:
    8px !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style:
    none !important;
}




html body .hero.hero--page
.crumbs a,
html body .hero.hero--page
.crumbs a:link,
html body .hero.hero--page
.crumbs a:visited {
  color:
    rgba(255, 255, 255, 0.88) !important;

  text-decoration:
    none !important;

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


html body .hero.hero--page
.crumbs a:hover {
  color:
    var(--text-white) !important;

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




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




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

  font-weight:
    600 !important;
}




html body .hero.hero--page
.hero-inner:has(> .stack)
h1.h1 {
  width: 100% !important;

  max-width: none !important;

  margin:
    0
    0
    14px !important;

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




html body .hero.hero--page
.hero-inner:has(> .stack)
h1.h1 .mark {
  color:
    inherit !important;
}




html body .hero.hero--page
.hero-inner:has(> .stack)
.hero-sub {
  width: 100% !important;

  margin:
    0
    0
    18px !important;

  padding: 0 !important;

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

  font-size:
    clamp(18px, 1rem + 0.72vw, 24px) !important;

  font-weight:
    700 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    -0.018em !important;
}




html body .hero.hero--page
.hero-inner:has(> .stack)
p.lead {
  width: 100% !important;

  max-width:
    56ch !important;

  margin: 0 !important;

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




html body .hero.hero--page
.hero-inner:has(> .stack)
.hero-actions {
  display: flex !important;

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;

  gap:
    14px !important;

  width: 100% !important;

  margin:
    32px
    0
    0 !important;

  padding: 0 !important;
}


html body .hero.hero--page
.hero-inner:has(> .stack)
.hero-actions > .btn {
  flex:
    0
    0
    auto !important;

  width:
    auto !important;

  margin:
    0 !important;
}




html body .hero.hero--page
.hero-inner:has(> .stack)
> .stack {
  position:
    relative !important;

  display:
    block !important;

  justify-self:
    center !important;

  align-self:
    center !important;

  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    440px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  aspect-ratio:
    1 / 1 !important;
}




html body .hero.hero--page
.stack .piece {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  border-radius:
    14px !important;

  box-shadow:
    0 22px 50px
    rgba(6, 28, 48, 0.24) !important;
}




html body .hero.hero--page
.stack .piece--b1 {
  background-color:
    rgba(255, 255, 255, 0.35) !important;

  transform:
    rotate(-7deg)
    scale(0.9)
    translate(-4%, 3%) !important;
}




html body .hero.hero--page
.stack .piece--b2 {
  background-color:
    rgba(255, 255, 255, 0.62) !important;

  transform:
    rotate(4.5deg)
    scale(0.95)
    translate(3%, -2%) !important;
}




html body .hero.hero--page
.stack .piece--front {
  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    14px !important;

  padding:
    26px
    26px
    22px !important;

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




html body .hero.hero--page
.stack .piece--front .top {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    flex-start !important;

  justify-content:
    space-between !important;

  gap:
    14px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body .hero.hero--page
.stack .piece--front
.top > .addr {
  flex:
    1 1 auto !important;

  min-width:
    0 !important;
}




html body .hero.hero--page
.stack .mini-ticket {
  position:
    relative !important;

  display:
    inline-flex !important;

  flex:
    0
    0
    auto !important;

  align-items:
    center !important;

  width:
    auto !important;

  margin:
    0 !important;

  padding:
    8px
    12px !important;

  overflow:
    hidden !important;

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

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

  border-radius:
    5px !important;
}


html body .hero.hero--page
.stack .mini-ticket b {
  display:
    block !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  font-size:
    12.5px !important;

  font-weight:
    700 !important;

  line-height:
    1.15 !important;
}




html body .hero.hero--page
.stack .mini-ticket::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    13px;

  height:
    13px;

  background:
    linear-gradient(
      225deg,
      var(--background) 0 50%,
      transparent 50%
    ) !important;
}




html body .hero.hero--page
.stack .addr {
  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    7px !important;

  width:
    100% !important;

  margin:
    2px
    0
    0 !important;

  padding:
    0 !important;
}




html body .hero.hero--page
.stack .addr i {
  display:
    block !important;

  flex:
    none !important;

  width:
    100%;

  height:
    9px !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  border-radius:
    5px !important;
}




html body .hero.hero--page
.stack .addr i.n {
  width:
    58%;

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

  opacity:
    0.85 !important;
}




html body .hero.hero--page
.stack .addr i.h {
  width:
    46% !important;

  height:
    11px !important;

  margin-bottom:
    3px !important;

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

  opacity:
    0.8 !important;
}




html body .hero.hero--page
.stack .addr.body {
  gap:
    6px !important;
}


html body .hero.hero--page
.stack .addr.body i {
  height:
    7px !important;

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




html body .hero.hero--page
.stack .addr i.w1 {
  width:
    78% !important;
}


html body .hero.hero--page
.stack .addr i.w2 {
  width:
    54% !important;
}


html body .hero.hero--page
.stack .addr i.w3 {
  width:
    66% !important;
}




html body .hero.hero--page
.stack .piece--front .foot {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    10px !important;

  width:
    100% !important;

  margin-top:
    auto !important;

  padding:
    0 !important;
}




html body .hero.hero--page
.stack .piece--front
.foot .chip {
  display:
    inline-flex !important;

  flex:
    0
    0
    auto !important;

  align-items:
    center !important;

  width:
    auto !important;

  min-height:
    30px !important;

  margin:
    0 !important;

  padding:
    0
    11px !important;

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

  color:
    var(--text) !important;

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

  border-radius:
    999px !important;

  font-size:
    12.5px !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;
}




html body .hero.hero--page
.stack .stamp {
  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0
    0
    auto !important;

  width:
    46px !important;

  height:
    34px !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  border:
    1.5px dashed
    var(--border) !important;

  border-radius:
    4px !important;

  font-size:
    9.5px !important;

  font-weight:
    600 !important;

  line-height:
    1 !important;

  letter-spacing:
    0.06em !important;
}




html body .hero.hero--page
.hero-foot {
  width:
    100% !important;

  padding-bottom:
    clamp(24px, 3vw, 38px) !important;
}




html body .hero.hero--page
.hero-foot .perf--light {
  display:
    block !important;

  width:
    100% !important;

  height:
    2px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.42) 1.1px,
      transparent 1.2px
    ) !important;

  background-repeat:
    repeat-x !important;

  background-size:
    9px
    2px !important;
}




html body .hero.hero--page
.hero-foot .ticks {
  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    14px
    34px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    22px
    0
    0 !important;

  list-style:
    none !important;
}




html body .hero.hero--page
.hero-foot .tick {
  display:
    inline-flex !important;

  flex:
    0
    0
    auto !important;

  align-items:
    center !important;

  gap:
    11px !important;

  width:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  font-size:
    15.5px !important;

  font-weight:
    600 !important;

  line-height:
    1.4 !important;

  list-style:
    none !important;
}




html body .hero.hero--page
.hero-foot .tick > i {
  position:
    relative !important;

  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0
    0
    21px !important;

  width:
    21px !important;

  min-width:
    21px !important;

  height:
    21px !important;

  min-height:
    21px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background-color:
    rgba(255, 255, 255, 0.18) !important;

  border-radius:
    50% !important;
}




html body .hero.hero--page
.hero-foot .tick > i::after {
  content:
    "";

  display:
    block !important;

  width:
    9px !important;

  height:
    5px !important;

  border-left:
    2px solid
    var(--text-white) !important;

  border-bottom:
    2px solid
    var(--text-white) !important;

  transform:
    rotate(-45deg)
    translate(1px, -1.5px) !important;
}




@media (max-width: 900px) {

  html body .hero.hero--page
  .hero-inner:has(> .stack) {
    grid-template-columns:
      1fr !important;

    gap:
      38px !important;
  }


  html body .hero.hero--page
  .hero-inner:has(> .stack)
  > div:first-child {
    max-width:
      none !important;
  }


  html body .hero.hero--page
  .hero-inner:has(> .stack)
  > .stack {
    justify-self:
      center !important;

    max-width:
      340px !important;
  }
}




@media (max-width: 560px) {

  html body .hero.hero--page
  .crumbs {
    padding-top:
      18px !important;

    font-size:
      13px !important;
  }


  html body .hero.hero--page
  .hero-inner:has(> .stack) {
    grid-template-columns:
      1fr !important;

    gap:
      32px !important;

    padding-block:
      28px
      36px !important;
  }


  html body .hero.hero--page
  .hero-inner:has(> .stack)
  > .stack {
    max-width:
      300px !important;
  }


  html body .hero.hero--page
  .hero-inner:has(> .stack)
  .hero-actions {
    gap:
      10px !important;

    margin-top:
      28px !important;
  }


  html body .hero.hero--page
  .hero-inner:has(> .stack)
  .hero-actions > .btn {
    width:
      100% !important;
  }


  html body .hero.hero--page
  .stack .piece--front {
    gap:
      11px !important;

    padding:
      22px
      20px
      18px !important;
  }


  html body .hero.hero--page
  .hero-foot .ticks {
    gap:
      12px !important;
  }


  html body .hero.hero--page
  .hero-foot .tick {
    width:
      100% !important;
  }
}






html body .split {
  display: grid !important;

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

  align-items:
    start !important;

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

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


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




html body .split .dek {
  width:
    100% !important;

  margin:
    12px
    0
    16px !important;

  padding:
    0 !important;

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

  font-size:
    clamp(17px, 1rem + 0.5vw, 21px) !important;

  font-weight:
    700 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    -0.018em !important;
}




html body .split
.lead.measure {
  margin:
    0 !important;

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




html body .split
.ticks.ticks--ink {
  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    12px
    30px !important;

  width:
    100% !important;

  margin:
    26px
    0
    0 !important;

  padding:
    0 !important;

  list-style:
    none !important;
}




html body .split
.ticks--ink .tick {
  display:
    inline-flex !important;

  flex:
    0
    0
    auto !important;

  align-items:
    center !important;

  gap:
    11px !important;

  width:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    15px !important;

  font-weight:
    600 !important;

  line-height:
    1.4 !important;

  list-style:
    none !important;
}




html body .split
.ticks--ink .tick > i {
  position:
    relative !important;

  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0
    0
    21px !important;

  width:
    21px !important;

  min-width:
    21px !important;

  height:
    21px !important;

  min-height:
    21px !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  border-radius:
    50% !important;
}




html body .split
.ticks--ink .tick > i::after {
  content:
    "";

  display:
    block !important;

  width:
    9px !important;

  height:
    5px !important;

  border-left:
    2px solid
    var(--primary) !important;

  border-bottom:
    2px solid
    var(--primary) !important;

  transform:
    rotate(-45deg)
    translate(1px, -1.5px) !important;
}




html body .split
.hilite {
  position:
    relative !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    34px
    30px
    32px !important;

  overflow:
    hidden !important;

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

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

  border-radius:
    14px !important;

  box-shadow:
    0 20px 46px
    rgba(4, 24, 42, 0.20) !important;
}




html body .split
.hilite .big {
  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  font-size:
    clamp(38px, 1.6rem + 2.6vw, 54px) !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  letter-spacing:
    -0.03em !important;
}




html body .split
.hilite .cap {
  width:
    100% !important;

  margin:
    12px
    0
    0 !important;

  padding:
    0 !important;

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

  font-size:
    17px !important;

  font-weight:
    700 !important;

  line-height:
    1.3 !important;
}




html body .split
.hilite p.txt {
  width:
    100% !important;

  margin:
    12px
    0
    0 !important;

  padding:
    0 !important;

  color:
    rgba(255, 255, 255, 0.86) !important;

  font-size:
    15.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.6 !important;
}




html body .split
.hilite .perf {
  display:
    block !important;

  width:
    100% !important;

  height:
    2px !important;

  margin:
    22px
    0
    18px !important;

  padding:
    0 !important;
}


html body .split
.hilite .perf--light {
  background-image:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.42) 1.1px,
      transparent 1.2px
    ) !important;

  background-repeat:
    repeat-x !important;

  background-size:
    9px
    2px !important;
}




html body .split
.hilite .chips {
  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    wrap !important;

  align-items:
    center !important;

  gap:
    8px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body .split
.hilite .chips > .chip,

html body .split
.hilite .chips > span.brxe-text-basic.chip {
  display:
    inline-flex !important;

  flex:
    0
    0
    auto !important;

  align-items:
    center !important;

  width:
    auto !important;

  min-width:
    0 !important;

  max-width:
    100% !important;

  min-height:
    32px !important;

  margin:
    0 !important;

  padding:
    0
    13px !important;

  background-color:
    rgba(255, 255, 255, 0.14) !important;

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

  border:
    1px solid
    rgba(255, 255, 255, 0.26) !important;

  border-radius:
    999px !important;

  font-size:
    13.5px !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;
}




html body .demo {
  display:
    grid !important;

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

  align-items:
    center !important;

  gap:
    clamp(26px, 3.4vw, 52px) !important;

  width:
    100% !important;

  margin:
    clamp(34px, 4vw, 54px)
    0
    0 !important;

  padding:
    clamp(24px, 3vw, 40px) !important;

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

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

  border-radius:
    14px !important;
}




html body .demo > * {
  min-width:
    0 !important;
}




html body .demo
.demo-ctrl {
  display:
    block !important;

  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body .demo
.demo-ctrl > .eyebrow {
  margin-bottom:
    16px !important;
}




html body .demo
.demo-ctrl label {
  display:
    block !important;

  width:
    100% !important;

  margin:
    0
    0
    9px !important;

  padding:
    0 !important;

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

  font-size:
    12.5px !important;

  font-weight:
    600 !important;

  line-height:
    1.4 !important;

  letter-spacing:
    0.08em !important;

  text-transform:
    uppercase !important;
}




html body .demo
.demo-ctrl input {
  display:
    block !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    52px !important;

  margin:
    0 !important;

  padding:
    0
    16px !important;

  appearance:
    none !important;

  -webkit-appearance:
    none !important;

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

  color:
    var(--text) !important;

  border:
    1.5px solid
    #cfd8e1 !important;

  border-radius:
    8px !important;

  outline:
    none !important;

  box-shadow:
    none !important;

  font-size:
    17px !important;

  font-weight:
    400 !important;

  line-height:
    1.4 !important;

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


html body .demo
.demo-ctrl input::placeholder {
  color:
    var(--text-muted) !important;

  opacity:
    0.72 !important;
}


html body .demo
.demo-ctrl input:hover {
  border-color:
    #b7c4d1 !important;
}


html body .demo
.demo-ctrl input:focus {
  border-color:
    var(--primary) !important;

  outline:
    3px solid
    var(--primary-light) !important;

  outline-offset:
    0 !important;
}




html body .demo
.demo-hint {
  width:
    100% !important;

  margin:
    12px
    0
    0 !important;

  padding:
    0 !important;

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

  font-size:
    14.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.6 !important;
}




html body .demo
.demo-note {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    flex-start !important;

  gap:
    12px !important;

  width:
    100% !important;

  margin:
    22px
    0
    0 !important;

  padding:
    20px
    0
    0 !important;

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


html body .demo
.demo-note > .regmark {
  flex:
    0
    0
    auto !important;

  margin-top:
    7px !important;
}


html body .demo
.demo-note > p {
  flex:
    1 1 auto !important;

  min-width:
    0 !important;

  margin:
    0 !important;

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

  font-size:
    14.5px !important;

  line-height:
    1.6 !important;
}




html body .demo
.letter {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    440px !important;

  margin:
    0
    auto !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

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

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

  border-radius:
    12px !important;

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




html body .demo
.letter-head {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    12px
    16px !important;

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

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




html body .demo
.letter-head .k {
  display:
    block !important;

  flex:
    1 1 auto !important;

  min-width:
    0 !important;

  margin:
    0 !important;

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

  font-size:
    11px !important;

  font-weight:
    600 !important;

  line-height:
    1.3 !important;

  letter-spacing:
    0.13em !important;

  text-transform:
    uppercase !important;
}




html body .demo
.letter-head .chip {
  display:
    inline-flex !important;

  flex:
    0
    0
    auto !important;

  align-items:
    center !important;

  width:
    auto !important;

  min-height:
    28px !important;

  margin:
    0 !important;

  padding:
    0
    11px !important;

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

  color:
    var(--text) !important;

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

  border-radius:
    999px !important;

  font-size:
    12px !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;

  white-space:
    nowrap !important;
}




html body .demo
.letter-head .chip.chip--yellow {
  background-color:
    var(--accent) !important;

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

  border-color:
    transparent !important;
}




html body .demo
.letter-sheet {
  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    18px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    26px
    26px
    22px !important;
}




html body .demo
.l-addr {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  font-size:
    14px !important;

  font-weight:
    400 !important;

  line-height:
    1.6 !important;
}


html body .demo
.l-addr b {
  color:
    var(--text) !important;

  font-weight:
    600 !important;
}




html body .demo
.l-anrede {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    17.5px !important;

  font-weight:
    700 !important;

  line-height:
    1.3 !important;
}




html body .demo
#demoAddr.mark,

html body .demo
#demoAnrede.mark {
  padding-inline:
    0.06em !important;

  color:
    inherit !important;

  background-color:
    transparent !important;

  background-image:
    linear-gradient(
      var(--accent),
      var(--accent)
    ) !important;

  background-repeat:
    no-repeat !important;

  background-size:
    100%
    0.22em !important;

  background-position:
    0
    88% !important;
}




html body .demo
.l-body {
  display:
    flex !important;

  flex-direction:
    column !important;

  gap:
    9px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


html body .demo
.sk {
  display:
    block !important;

  flex:
    none !important;

  height:
    8px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  background-color:
    #e9edf1 !important;

  border-radius:
    5px !important;
}




html body .demo .w100 {
  width:
    100% !important;
}

html body .demo .w95 {
  width:
    95% !important;
}

html body .demo .w88 {
  width:
    88% !important;
}

html body .demo .w80 {
  width:
    80% !important;
}

html body .demo .w62 {
  width:
    62% !important;
}

html body .demo .w45 {
  width:
    45% !important;
}




html body .demo
.l-foot {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    14px !important;

  width:
    100% !important;

  margin:
    4px
    0
    0 !important;

  padding:
    0 !important;
}


html body .demo
.l-foot .sk {
  flex:
    1 1 auto !important;

  max-width:
    150px !important;
}




html body .demo
.stamp {
  display:
    grid !important;

  place-items:
    center !important;

  flex:
    0
    0
    auto !important;

  width:
    46px !important;

  height:
    34px !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

  border:
    1.5px dashed
    var(--border) !important;

  border-radius:
    4px !important;

  font-size:
    9.5px !important;

  font-weight:
    600 !important;

  line-height:
    1 !important;

  letter-spacing:
    0.06em !important;
}




@media (max-width: 900px) {

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


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

    gap:
      28px !important;
  }


  html body .demo
  .letter {
    max-width:
      420px !important;
  }
}




@media (max-width: 560px) {

  html body .split {
    gap:
      30px !important;
  }


  html body .split
  .ticks.ticks--ink {
    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    gap:
      12px !important;

    margin-top:
      24px !important;
  }


  html body .split
  .hilite {
    padding:
      28px
      22px
      26px !important;
  }


  html body .split
  .hilite .chips {
    gap:
      7px !important;
  }


  html body .demo {
    padding:
      22px
      18px !important;
  }


  html body .demo
  .letter-sheet {
    padding:
      20px
      20px
      18px !important;
  }


  html body .demo
  .letter-head {
    align-items:
      flex-start !important;

    gap:
      8px !important;
  }


  html body .demo
  .letter-head .chip {
    white-space:
      normal !important;
  }
}






html body .sect.sect--soft:has(.prod) {
  width: 100% !important;

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




html body .sect.sect--soft:has(.prod)
> .wrap {
  width: 100% !important;
}




html body .sect.sect--soft:has(.prod)
.sec-head {
  display: grid !important;

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

  align-items:
    end !important;

  gap:
    24px !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body .sect.sect--soft:has(.prod)
.sec-head > div {
  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}




html body .sect.sect--soft:has(.prod)
.sec-head .eyebrow {
  margin-bottom:
    16px !important;
}




html body .sect.sect--soft:has(.prod)
.sec-head .h2 {
  margin:
    0 !important;
}




html body .sect.sect--soft:has(.prod)
.sec-head > .btn {
  justify-self:
    end !important;

  align-self:
    end !important;

  flex:
    0
    0
    auto !important;

  width:
    auto !important;

  margin:
    0 !important;
}




html body .sect.sect--soft:has(.prod)
.prod {
  display:
    grid !important;

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

  align-items:
    stretch !important;

  gap:
    clamp(18px, 2.4vw, 28px) !important;

  width:
    100% !important;

  margin:
    44px
    0
    0 !important;

  padding:
    0 !important;
}




html body .sect.sect--soft:has(.prod)
.prod > * {
  width:
    100% !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  margin:
    0 !important;
}




html body .sect.sect--soft:has(.prod)
.pcard {
  position:
    relative !important;

  display:
    block !important;

  width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    28px
    26px
    30px !important;

  box-sizing:
    border-box !important;

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

  color:
    var(--text) !important;

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

  border-radius:
    14px !important;

  box-shadow:
    none !important;
}




html body .sect.sect--soft:has(.prod)
.pcard .usp-ico {
  display:
    grid !important;

  place-items:
    center !important;

  width:
    54px !important;

  min-width:
    54px !important;

  max-width:
    54px !important;

  height:
    54px !important;

  min-height:
    54px !important;

  max-height:
    54px !important;

  margin:
    0
    0
    18px !important;

  padding:
    0 !important;

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

  color:
    var(--primary) !important;

  border:
    0 !important;

  border-radius:
    14px !important;
}




html body .sect.sect--soft:has(.prod)
.pcard .usp-ico svg {
  display:
    block !important;

  width:
    27px !important;

  height:
    27px !important;

  max-width:
    27px !important;

  max-height:
    27px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  fill:
    none !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.5 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;
}




html body .sect.sect--soft:has(.prod)
.pcard .usp-ico img {
  display:
    block !important;

  width:
    27px !important;

  height:
    27px !important;

  max-width:
    27px !important;

  max-height:
    27px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  object-fit:
    contain !important;
}




html body .sect.sect--soft:has(.prod)
.pcard .h3 {
  width:
    100% !important;

  margin:
    0
    0
    9px !important;

  padding:
    0 !important;

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




html body .sect.sect--soft:has(.prod)
.pcard > 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;
}




html body .sect.sect--soft:has(.prod)
.pcard > .brxe-text-basic:not(.h3) {
  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;
}




html body .sect.sect--soft:has(.prod)
.pcard:hover {
  transform:
    none !important;

  box-shadow:
    none !important;

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




@media (max-width: 1080px) {

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




@media (max-width: 900px) {

  html body .sect.sect--soft:has(.prod)
  .sec-head {
    grid-template-columns:
      1fr !important;

    align-items:
      start !important;
  }


  html body .sect.sect--soft:has(.prod)
  .sec-head > .btn {
    justify-self:
      start !important;

    align-self:
      start !important;
  }
}




@media (max-width: 560px) {

  html body .sect.sect--soft:has(.prod)
  .prod {
    grid-template-columns:
      1fr !important;

    gap:
      18px !important;

    margin-top:
      34px !important;
  }


  html body .sect.sect--soft:has(.prod)
  .pcard {
    padding:
      24px
      22px
      26px !important;
  }


  html body .sect.sect--soft:has(.prod)
  .sec-head > .btn {
    width:
      100% !important;
  }
}






html body .testimonial-card {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;

  padding:
    30px
    30px
    28px !important;

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

  color:
    var(--text) !important;

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

  border-radius:
    14px !important;

  box-shadow:
    0 12px 32px
    rgba(15, 35, 55, 0.07) !important;

  box-sizing:
    border-box !important;
}




html body .testimonial-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 30px;

  width: 54px;
  height: 4px;

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

  border-radius:
    0
    0
    3px
    3px;
}




html body .testimonial-card
.testimonial-top {
  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 20px !important;

  width: 100% !important;

  margin:
    0
    0
    22px !important;

  padding: 0 !important;
}




html body .testimonial-card
.testimonial-quote-mark {
  display: block !important;

  flex:
    0
    0
    auto !important;

  width: auto !important;

  height: 36px !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--primary) !important;

  font-size:
    58px !important;

  font-weight:
    700 !important;

  line-height:
    0.85 !important;

  opacity:
    0.25 !important;
}




html body .testimonial-card
.testimonial-stars {
  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  gap: 4px !important;

  flex:
    0
    0
    auto !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--accent) !important;

  font-size:
    16px !important;

  line-height:
    1 !important;
}


html body .testimonial-card
.testimonial-stars > span {
  display: block !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

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




html body .testimonial-card
.testimonial-quote {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  quotes: none !important;
}


html body .testimonial-card
.testimonial-quote::before,

html body .testimonial-card
.testimonial-quote::after {
  content: none !important;

  display: none !important;
}




html body .testimonial-card
.testimonial-quote > p,

html body .testimonial-card
.testimonial-quote > .brxe-text-basic {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--text) !important;

  font-size:
    17px !important;

  font-weight:
    500 !important;

  line-height:
    1.65 !important;

  letter-spacing:
    -0.01em !important;
}




html body .testimonial-card
.testimonial-person {
  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  gap: 13px !important;

  width: 100% !important;

  margin:
    0 !important;

  padding:
    28px
    0
    0 !important;
}




html body .testimonial-card
.testimonial-avatar {
  display: grid !important;

  place-items: center !important;

  flex:
    0
    0
    44px !important;

  width:
    44px !important;

  min-width:
    44px !important;

  height:
    44px !important;

  min-height:
    44px !important;

  margin:
    0 !important;

  padding:
    0 !important;

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

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

  border-radius:
    50% !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  letter-spacing:
    0.04em !important;
}




html body .testimonial-card
.testimonial-person-info {
  display: flex !important;

  flex-direction: column !important;

  gap: 3px !important;

  flex:
    1
    1
    auto !important;

  width: auto !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


html body .testimonial-card
.testimonial-person-info strong {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--text) !important;

  font-size:
    14.5px !important;

  font-weight:
    700 !important;

  line-height:
    1.35 !important;
}


html body .testimonial-card
.testimonial-person-info > span {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

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

  font-size:
    13.5px !important;

  font-weight:
    400 !important;

  line-height:
    1.4 !important;
}




@media (max-width: 560px) {

  html body .testimonial-card {
    padding:
      26px
      22px
      24px !important;
  }


  html body .testimonial-card::before {
    left:
      22px;
  }


  html body .testimonial-card
  .testimonial-quote > p,

  html body .testimonial-card
  .testimonial-quote > .brxe-text-basic {
    font-size:
      16px !important;
  }
}






html body .combo {
  display: grid !important;

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

  align-items: center !important;

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

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


html body .combo > * {
  min-width: 0 !important;
}




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

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}




html body .combo
.lead.measure {
  margin:
    18px
    0
    0 !important;

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




html body .combo
.hero-actions {
  display: flex !important;

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 14px !important;

  width: 100% !important;

  margin:
    28px
    0
    0 !important;

  padding: 0 !important;
}


html body .combo
.hero-actions > .btn {
  flex:
    0
    0
    auto !important;

  width:
    auto !important;

  margin:
    0 !important;
}




html body .combo
.combo-photo {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  border-radius:
    14px !important;

  box-shadow:
    0 20px 46px
    rgba(15, 35, 55, 0.14) !important;
}




html body .combo
.combo-photo picture {
  display: block !important;

  width: 100% !important;
}




html body .combo
.combo-photo img {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;

  margin: 0 !important;

  aspect-ratio:
    4 / 3 !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;
}




html body .flow {
  position: relative !important;

  display: grid !important;

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

  align-items: stretch !important;

  gap:
    clamp(14px, 1.8vw, 22px) !important;

  width: 100% !important;

  margin:
    clamp(34px, 4vw, 52px)
    0
    0 !important;

  padding: 0 !important;

  list-style:
    none !important;
}




html body .flow::before {
  content: "";

  position: absolute !important;

  top:
    44px !important;

  left:
    6% !important;

  right:
    6% !important;

  z-index:
    0 !important;

  height:
    2px !important;

  background-image:
    radial-gradient(
      circle,
      #c9d3dd 1.1px,
      transparent 1.2px
    ) !important;

  background-repeat:
    repeat-x !important;

  background-size:
    9px
    2px !important;

  pointer-events:
    none !important;
}




html body .flow
> .step {
  position: relative !important;

  z-index:
    1 !important;

  display: block !important;

  width:
    100% !important;

  min-width:
    0 !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    22px
    22px
    24px !important;

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

  color:
    var(--text) !important;

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

  border-radius:
    14px !important;

  list-style:
    none !important;

  box-sizing:
    border-box !important;
}




html body .flow
.step > .sn {
  display: grid !important;

  place-items: center !important;

  width:
    36px !important;

  min-width:
    36px !important;

  max-width:
    36px !important;

  height:
    36px !important;

  min-height:
    36px !important;

  max-height:
    36px !important;

  margin:
    0
    0
    15px !important;

  padding:
    0 !important;

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

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

  border-radius:
    9px !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;
}




html body .flow
.step > .h3 {
  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    var(--text) !important;

  font-size:
    16.5px !important;

  line-height:
    1.25 !important;
}




@media (max-width: 1080px) {

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


  

  html body .flow::before {
    display:
      none !important;
  }
}


@media (max-width: 900px) {

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

    gap:
      30px !important;
  }


  html body .combo
  .combo-photo {
    max-width:
      680px !important;
  }
}




@media (max-width: 560px) {

  html body .combo {
    gap:
      28px !important;
  }


  html body .combo
  .hero-actions > .btn {
    width:
      100% !important;
  }


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

    gap:
      14px !important;

    margin-top:
      34px !important;
  }


  html body .flow
  > .step {
    padding:
      20px
      18px
      22px !important;
  }
}






html body .qual {
  display: grid !important;

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

  align-items: center !important;

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

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


html body .qual > * {
  min-width: 0 !important;
}




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

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}




html body .qual
.lead.measure {
  margin:
    18px
    0
    0 !important;

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




html body .qual
.specs {
  display: flex !important;

  flex-direction: row !important;
  flex-wrap: wrap !important;

  align-items: center !important;

  gap:
    10px !important;

  width:
    100% !important;

  margin:
    24px
    0
    0 !important;

  padding:
    0 !important;
}




html body .qual
.specs > .chip {
  display: inline-flex !important;

  flex:
    0 0 auto !important;

  align-items:
    center !important;

  gap:
    8px !important;

  width:
    auto !important;

  min-height:
    38px !important;

  margin:
    0 !important;

  padding:
    0
    16px !important;

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

  color:
    var(--text) !important;

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

  border-radius:
    999px !important;

  font-size:
    14.5px !important;

  font-weight:
    600 !important;

  line-height:
    1.2 !important;

  white-space:
    nowrap !important;
}




html body .qual
.specs > .chip--dot::before {
  content:
    "";

  display:
    block !important;

  flex:
    0 0
    7px !important;

  width:
    7px !important;

  min-width:
    7px !important;

  height:
    7px !important;

  min-height:
    7px !important;

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

  border-radius:
    50% !important;
}




html body .qual
.qual-photo {
  position:
    relative !important;

  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border-radius:
    14px !important;

  box-shadow:
    0 20px 46px
    rgba(15, 35, 55, 0.14) !important;
}




html body .qual
.qual-photo picture {
  display:
    block !important;

  width:
    100% !important;
}




html body .qual
.qual-photo img {
  display:
    block !important;

  width:
    100% !important;

  max-width:
    none !important;

  height:
    auto !important;

  margin:
    0 !important;

  aspect-ratio:
    4 / 3 !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;
}




html body .band {
  display:
    grid !important;

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

  align-items:
    center !important;

  gap:
    clamp(18px, 2.4vw, 30px) !important;

  width:
    100% !important;

  margin:
    clamp(34px, 4vw, 52px)
    0
    0 !important;

  padding:
    22px
    clamp(20px, 2.6vw, 30px) !important;

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

  border-radius:
    14px !important;

  box-sizing:
    border-box !important;
}




html body .band
> img {
  display:
    block !important;

  flex:
    none !important;

  width:
    150px !important;

  min-width:
    150px !important;

  max-width:
    150px !important;

  height:
    100px !important;

  margin:
    0 !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;

  border-radius:
    9px !important;
}




html body .band
> figure {
  display:
    block !important;

  width:
    150px !important;

  min-width:
    150px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  border-radius:
    9px !important;
}


html body .band
> figure img {
  display:
    block !important;

  width:
    150px !important;

  height:
    100px !important;

  margin:
    0 !important;

  object-fit:
    cover !important;
}




html body .band
> div {
  width:
    100% !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


html body .band
.h3 {
  margin:
    9px
    0
    5px !important;
}


html body .band
> div > p {
  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.6 !important;
}




html body .band
> .btn {
  justify-self:
    end !important;

  flex:
    0 0 auto !important;

  width:
    auto !important;

  margin:
    0 !important;
}




@media (max-width: 900px) {

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

    gap:
      30px !important;
  }


  html body .qual
  .qual-photo {
    max-width:
      680px !important;
  }


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

    align-items:
      start !important;
  }


  html body .band
  > img {
    width:
      220px !important;

    min-width:
      0 !important;

    max-width:
      220px !important;

    height:
      auto !important;

    aspect-ratio:
      3 / 2 !important;
  }


  html body .band
  > figure {
    width:
      220px !important;

    min-width:
      0 !important;

    max-width:
      220px !important;
  }


  html body .band
  > figure img {
    width:
      100% !important;

    height:
      auto !important;

    aspect-ratio:
      3 / 2 !important;
  }


  html body .band
  > .btn {
    justify-self:
      stretch !important;

    width:
      100% !important;
  }
}




@media (max-width: 560px) {

  html body .qual {
    gap:
      26px !important;
  }


  html body .qual
  .specs {
    gap:
      8px !important;

    margin-top:
      22px !important;
  }


  html body .qual
  .specs > .chip {
    min-height:
      36px !important;

    padding:
      0
      13px !important;

    font-size:
      13.5px !important;

    white-space:
      normal !important;
  }


  html body .band {
    gap:
      18px !important;

    margin-top:
      34px !important;

    padding:
      20px
      18px !important;
  }


  html body .band
  > img,

  html body .band
  > figure {
    width:
      100% !important;

    max-width:
      none !important;
  }


  html body .band
  > img,

  html body .band
  > figure img {
    aspect-ratio:
      3 / 2 !important;
  }
}


  .product-thumb {
    --avatar-size: clamp(60px, 7vw, 80px);
    --avatar-overlap: 20px;

    display: flex;
    align-items: center;
    isolation: isolate;
    padding: 0;
  }

  .product-thumb__image {
    display: block;
    flex: 0 0 var(--avatar-size);
    width: var(--avatar-size);
    height: var(--avatar-size);
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    position: relative;
  }

  .product-thumb__image + .product-thumb__image {
    margin-left: calc(-1 * var(--avatar-overlap));
  }

  .product-thumb__image:nth-child(1) { z-index: 4; }
  .product-thumb__image:nth-child(2) { z-index: 3; }
  .product-thumb__image:nth-child(3) { z-index: 2; }
  .product-thumb__image:nth-child(4) { z-index: 1; }