.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:var(--u16) var(--u32);
  border-radius:var(--u56);
  border:none;
  background:var(--baseColor);
  font-weight:700;
  color:var(--color);
  text-align:center;
  transition:background .3s ease-out,color .3s ease-out,box-shadow .3s ease-out;
  cursor:pointer
}
.btn.btn--empty {
  --baseHover:var(--primary);
  --color:var(--baseColor);
  background:0 0;
  box-shadow:inset 0 0 0 1px var(--baseColor)
}
.btn.btn--emptyblack {
  --baseColor:var(--bgDark);
  --color:var(--cEmph);
  background-color:transparent;
  box-shadow:inset 0 0 0 1px var(--baseColor)
}
.btn.btn--emptywhite {
  --baseColor:var(--white);
  --color:var(--white);
  background-color:transparent;
  box-shadow:inset 0 0 0 1px var(--baseColor)
}
.btn.btn--emptylight {
  --baseColor:var(--bgGrey);
  --color:var(--cEmph);
  background-color:transparent;
  box-shadow:inset 0 0 0 1px var(--baseColor)
}
.dark .btn.btn--emptylight {
  --color:var(--white)
}
.btn.btn--emptyCard {
  --baseColor:var(--cBorder);
  --hoverColor:var(--primary);
  --color:var(--cEmph);
  padding:var(--u8) var(--u24);
  background-color:transparent;
  font-weight:400;
  box-shadow:inset 0 0 0 1px var(--baseColor)
}
.dark .btn.btn--emptyCard {
  --baseColor:var(--cBorderDark);
  --color:var(--white)
}
.btn.btn--emptyDark {
  --baseColor:var(--bgGrey);
  --color:var(--cEmph);
  background-color:transparent;
  box-shadow:inset 0 0 0 1px var(--baseColor)
}
.btn.btn--black {
  background:var(--bgDark)
}
.btn.btn--noOutline {
  box-shadow:none
}
.btn.btn--icontext {
  --btnIconMargin:var(--u8);
  text-align:start
}
.btn.btn--icontext .cc-icons {
  margin-right:var(--btnIconMargin)
}
[dir=rtl] .btn.btn--icontext .cc-icons {
  margin-right:unset;
  margin-left:var(--btnIconMargin)
}
.btn.btn--icontext.btn--reverse .cc-icons {
  margin-right:unset;
  margin-left:var(--btnIconMargin)
}
[dir=rtl] .btn.btn--icontext.btn--reverse .cc-icons {
  margin-left:unset;
  margin-right:var(--btnIconMargin)
}
.btn.btn--round {
  border-radius:50%;
  padding:var(--u8)
}
.btn.btn--round svg {
  display:block
}
.btn.btn--darkText {
  --color:var(--darkColor)
}
.btn.btn--lightBg {
  background:0 0;
  color:var(--primary);
  border:1px solid var(--primary)
}
.btn.btn--nowrap {
  white-space:nowrap
}
.btn--xs {
  padding:var(--u8) var(--u16);
  line-height:var(--u16);
  font-size:var(--u13)
}
.btn--sm {
  padding:var(--u8) var(--u16);
  font-size:var(--u13)
}
.btn--smMd {
  padding:var(--u8) var(--u16);
  line-height:var(--u16);
  font-size:var(--u13)
}
.btn--md {
  line-height:var(--u32);
  font-size:20px
}
.btn--lg {
  padding:var(--u24) var(--u40);
  line-height:var(--u32);
  font-size:var(--u24)
}
.btn--wide {
  width:100%
}
.btn--promo {
  padding-inline:var(--u32)
}
.btn--icontext.btn--sm {
  padding:var(--u8);
  -webkit-padding-end:var(--u16);
  padding-inline-end:var(--u16);
  line-height:var(--u16);
  font-size:var(--u13)
}
.btn--icontext.btn--md {
  --btnIconMargin:calc(var(--u8) * 2);
  padding:var(--u16);
  -webkit-padding-start:var(--u32);
  padding-inline-start:var(--u32);
  -webkit-padding-end:var(--u24);
  padding-inline-end:var(--u24)
}
.btn--icontext.btn--reverse.btn--sm {
  padding:var(--u8);
  -webkit-padding-end:var(--u8);
  padding-inline-end:var(--u8);
  -webkit-padding-start:var(--u16);
  padding-inline-start:var(--u16)
}
.btn:active,
.btn:hover {
  background:var(--baseHover)
}
.btn--disabled,
.btn.disabled,
.btn:disabled {
  --baseColor:var(--bgDisabled);
  --color:var(--cSub);
  pointer-events:none
}
.btn--disabled:active,
.btn--disabled:hover,
.btn.disabled:active,
.btn.disabled:hover,
.btn:disabled:active,
.btn:disabled:hover {
  background:var(--baseColor)
}
.btn--empty:hover {
  --color:var(--cLight)
}
.btn--emptyblack:hover {
  --baseColor:var(--primary);
  --color:var(--primary);
  background:0 0
}
.btn--emptywhite:hover {
  --color:var(--cEmph);
  background:var(--white)
}
.btn--emptylight:hover {
  --baseColor:var(--primary);
  background:0 0
}
.btn--emptyCard:hover {
  box-shadow:inset 0 0 0 1px var(--hoverColor);
  background:0 0
}
.btn--emptyDark.active,
.btn--emptyDark:focus,
.btn--emptyDark:hover {
  --color:var(--white);
  background:var(--bgDark)
}
.btn--lightBg:hover {
  color:var(--cLight);
  background:rgba(210,198,187,.2);
  border-color:var(--cLight)
}
.tpRating {
  --ratingBackgroundMain:var(--bgGrey);
  --ratingBackground1:#ff3821;
  --ratingBackground2:#ff8521;
  --ratingBackground3:#ffcf00;
  --ratingBackground4:#73d00e;
  --ratingBackground5:#02b57a;
  --subColor:var(--cSub);
  --tpGap:var(--u8);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:0 calc(var(--tpGap)/ -2)
}
.tpRating--center {
  align-items:center
}
.tpRating--rows>:not(:last-child) {
  margin-bottom:8px
}
.tpRating__stars {
  display:inline-flex;
  align-items:center;
  position:relative;
  background:var(--ratingBackgroundMain);
  -webkit-clip-path:polygon(0 0,18% 0,18% 100%,20.5% 100%,20.5% 0,38.5% 0,38.5% 100%,41% 100%,41% 0,59% 0,59% 100%,61.5% 100%,61.5% 0,79.5% 0,79.5% 100%,82% 100%,82% 0,100% 0,100% 100%,0 100%);
  clip-path:polygon(0 0,18% 0,18% 100%,20.5% 100%,20.5% 0,38.5% 0,38.5% 100%,41% 100%,41% 0,59% 0,59% 100%,61.5% 100%,61.5% 0,79.5% 0,79.5% 100%,82% 100%,82% 0,100% 0,100% 100%,0 100%)
}
.tpRating__stars:before {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:calc(20% * var(--ratingVal));
  content:""
}
[dir=rtl] .tpRating__stars:before {
  left:unset;
  right:0
}
.tpRating--1 .tpRating__stars:before {
  background:var(--ratingBackground1)
}
.tpRating--2 .tpRating__stars:before {
  background:var(--ratingBackground2)
}
.tpRating--3 .tpRating__stars:before {
  background:var(--ratingBackground3)
}
.tpRating--4 .tpRating__stars:before {
  background:var(--ratingBackground4)
}
.tpRating--5 .tpRating__stars:before {
  background:var(--ratingBackground5)
}
.tpRating__icon {
  z-index:1;
}
.tpRating__prop {
  display:grid;
  grid-template-columns:repeat(3,-webkit-max-content);
  grid-template-columns:repeat(3,max-content);
  align-items:center;
  gap:8px;
  line-height:24px;
  font-size:13px;
  color:var(--subColor)
}
.tpRating__val {
  font-size:24px;
  line-height:24px
}
.tpRating strong {
  font-size:16px;
  line-height:24px;
  color:inherit;
  text-align:left
}
.gray .tpRating,
.grey .tpRating {
  --ratingBackgroundMain:var(--bgOnGrey)
}
.ourStory__head {
  position:relative;
  margin-bottom:176px;
  padding:var(--u24);
  border-radius:var(--u24)
}
.ourStory__title {
  margin:0
}
.ourStory__iphone {
  width:auto;
  height:auto;
  max-height:50vh
}
.ourStory__ipad {
  display:block;
  margin:var(--u24) -24px -216px -24px
}

.ourStory__tradingview {
  display:grid;
  align-items:center;
  max-width:-webkit-max-content;
  max-width:-moz-max-content;
  max-width:max-content;
  grid-template-columns:auto auto auto;
  gap:0 var(--u16);
  border-radius:var(--u16);
  padding:var(--u16);
  font-size:var(--u24);
  line-height:var(--u32)
}
.ourStory__tradingview .svg {
  grid-column:1/3
}
.ourStory__tradingview img {
  display:block
}
.ourStory img {
  max-height:100%;
  width:auto;
  height:auto
}
@media screen and (min-width:768px) {
  .btn--smMd {
    padding:var(--u16) var(--u24)
  }
  .tpRating {
    --tpGap:var(--u16);
    flex-direction:row;
    align-items:flex-start
  }
  .tpRating--rows {
    flex-direction:column
  }
  .tpRating>* {
    margin:0 calc(var(--tpGap)/ 2)
  }
  .ourStory__tradingview {
    grid-auto-flow:column;
    gap:16px;
    border-radius:8px;
    padding:var(--u8) var(--u16)
  }
  .ourStory__tradingview .svg {
    width:184px; height:40px;
  }
  .ourStory__tradingview picture {
    order:1
  }
  .ourStory .tpRating__prop a {
    display:none
  }
}
@media screen and (min-width:1024px) {
  .btn--promo {
    padding-inline:var(--u48)
  }
  .ourStory__head {
    margin:0;
    padding:56px 72px;
    border-radius:var(--u32)
  }
  .ourStory__iphone {
    max-height:none
  }
  .ourStory__ipad {
    position:absolute;
    top:-8px;
    right:0;
    margin:0;
    max-width:50%
  }
  .ourStory__col {
    padding-top:216px
  }
}
@media screen and (max-width:767px) {
  .btn--wideMob {
    width:100%
  }
  .tpRating>:not(:last-child) {
    margin:0 calc(var(--tpGap)/ 2) var(--tpGap)
  }
}
