/*# sourceMappingURL=style.css.map */

.chart {
  background-color: #1B1C1E;
  padding: 48px 20px;
  margin: 0 -20px;
}

.chart p em, .chart p i{
  font-family: "Publico Italic", Georgia,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}

.chart p strong, .chart p strong {
  font-family: "Publico Bold", Georgia,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}

.chart p strong em, .chart p strong i {
  font-family: "Publico Bold Italic", Georgia,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}

.chart h1 em, .chart h1 i,
.chart h2 em, .chart h2 i,
.chart h3 em, .chart h3 i,
.chart h4 em, .chart h4 i,
.chart h5 em, .chart h5 i,
.chart h6 em, .chart h6 i {
  font-family: "Balto Bold Italic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media only screen and (min-width: 1024px) {
  .chart {
    margin: 0;
    padding: 48px;
    border-radius: 16px;
  }
}

.chart.chart--plain {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
}

.chart .chart__headline {
  margin-bottom: 42px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__headline {
    margin-bottom: 24px;
  }
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid {
    --progress-lines: 14.06%;
    background: linear-gradient(90deg, #1B1C1E 15%, transparent 15%, 
      transparent 27.9%, rgba(84, 85, 86, 1) calc(27.9% + 1px), transparent calc(27.9% + 2px), 
      transparent 42.15%, rgba(84, 85, 86, 1) calc(42.15% + 1px), transparent calc(42.15% + 2px), 
      transparent 56.75%, rgba(84, 85, 86, 1) calc(56.75% + 1px), transparent calc(56.75% + 2px), 
      transparent 71%, rgba(84, 85, 86, 1) calc(71% + 1px), transparent calc(71% + 2px),
      transparent 85.4%, rgba(84, 85, 86, 1) calc(85.4% + 1px), transparent calc(85.4% + 2px),
      transparent calc(100% - 2px), rgba(84, 85, 86, 1) 100%
    );
  }
}

@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid {
    position: relative;
    background: none;
  }
}

@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid::after {
    content: '';
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: linear-gradient(90deg, transparent, 
      transparent 16.66%, #FFFFFF4D calc(16.66% + 1px), transparent calc(16.66% + 2px), 
      transparent 33.33%, #FFFFFF4D calc(33.33% + 1px), transparent calc(33.33% + 2px), 
      transparent 49.98%, #FFFFFF4D calc(49.98% + 1px), transparent calc(49.98% + 2px), 
      transparent 66.66%, #FFFFFF4D calc(66.66% + 1px), transparent calc(66.66% + 2px),
      transparent 83.33%, #FFFFFF4D calc(83.33% + 1px), transparent calc(83.33% + 2px),
      transparent calc(100% - 2px), transparent 100%
    );
  }
}

.chart .chart__grid .chart__grid__col {
  display: none;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__grid__col {
    display: grid;
    grid-template-columns: 13.5% repeat(6, 1fr);
    margin-bottom: 21px;
    padding-top: 8px;
  }
}


@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid .chart__grid__col {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-bottom: 12px;
  }
}

.chart .chart__grid .chart__grid__col h3 {
  text-transform: uppercase;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  line-height: 11px;
  font-weight: 700;
}

.chart.chart--plain .chart__grid .chart__grid__col h3 {
  padding-left: 9px;
}

.chart .chart__grid .chart__grid__col h3:first-child {
  color: #FFFFFF80;
}

.chart .chart__grid .chart__grid__col h3:not(:first-child, :nth-child(2)) {
  padding-left: 9px;
}

.chart .chart__grid .chart__pillar:not(:last-child) {
  margin-bottom: 40px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar:not(:last-child) {
    margin-bottom: 19px;
  } 
}

@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid .chart__pillar {
    grid-template-columns: repeat(6, 1fr);
  }
}

.chart .chart__grid .chart__pillar h4 {
  color: #FFFFFF80;
  font-size: 18px;
  line-height: 20.7px;
  margin-bottom: 40px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar h4 {
    grid-column: 1 / 2;
    margin-bottom: 6px;
  }
}

.chart .chart__grid .chart__pillar .chart__approach {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.chart .chart__grid .chart__pillar .chart__approach:not(:last-child) {
  margin-bottom: 40px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach:not(:last-child) {
    margin-bottom: 6px;
  }
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach {
    grid-template-columns: 13.5% repeat(6, 1fr);
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid .chart__pillar .chart__approach {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid .chart__pillar .chart__approach {
    grid-template-columns: repeat(6, 1fr);
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name {
  grid-column: 1 / 2;
  margin-bottom: 15px;
  position: relative;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name {
    margin-bottom: 0;
    padding-right: 6px;
    max-height: 22px;
    display: flex;
    align-items: center;
  } 
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name h5 {
  font-size: 14px;
  line-height: 16.94px;
  font-weight: 700;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  cursor: default;
  text-transform: uppercase;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog {
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  background-color: transparent;
  max-width: unset;
  max-height: unset;
  padding: 24px;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog h1 {
  font-size: 64px;
  color: #ffffff;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog h2 {
  font-size: 52px;
  color: #ffffff;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog h3 {
  font-size: 48px;
  color: #ffffff;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog h4 {
  font-size: 36px;
  color: #ffffff;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog h5 {
  font-size: 32px;
  color: #ffffff;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog h6 {
  color: #ffffff;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  line-height: 27.6px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog p {
  color: #FFFFFFE5;
  font-size: 16px;
  line-height: 22.4px;
  font-family: "Publico",Georgia,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog p.dialog-close {
  font-family: "Balto Book", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 10px;
  line-height: 12.1px;
  color: #FFFFFF80;
  text-transform: uppercase;
  position: absolute;
  bottom: 16px;
  left: 24px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog[open] {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  outline: none;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog p.dialog-close {
    display: none;
  }
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog[open] {
    position: absolute; 
    height: min-content;
    width: unset;
    display: none;
    flex-direction: unset;
    justify-content: unset;
  }
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog {
    animation: vanish 0.3s;
    background-color: transparent;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    position: absolute;
    left: 70%;
    top: -30px;
    padding: 24px;
    min-width: 378px;
    max-width: 378px;
    height: min-content;
    z-index: 2;
    box-shadow: 8px 16px 24px 0px #000000B2;
    border-radius: 8px;
    display: none;
  }
  
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 1px;
    border-radius: 8px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.15));
    mask: 
     linear-gradient(#000 0 0) exclude, 
     linear-gradient(#000 0 0) content-box;
  }
  
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog h6 {
    font-size: 18px;
    line-height: 20.7px;
    margin-bottom: 8px;
  }
  
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog p {
    font-size: 18px;
    line-height: 25.2px;
    letter-spacing: -0.02em;
  }
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name h5:hover + dialog {
    display: block !important;
    animation: appear 0.3s;
  }
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name dialog:hover {
    display: block !important;
    animation: appear 0.3s;
  }
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__name h5 {
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress {
  grid-column: 1 / -1;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress {
    grid-column: 2 / -1;
  } 
}


@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid .chart__pillar .chart__approach .chart__approach__progress {
    grid-column: 1 / -1;
  } 
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li em,
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li i {
  font-family: "Balto Bold Italic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li:not(:last-child) {
  margin-bottom: 16px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li:not(:last-child) {
    margin-bottom: 6px;
  } 
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li {
    border-radius: 100px;
    position: relative;
    height: 22px;
    overflow: hidden;
    display: flex;
    background: #00000040;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
  }
}

@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li {
    height: 44px;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li {
    height: 44px;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li:hover {
    background: rgba(104, 104, 104, 0.2);
    -webkit-box-shadow:inset 0px 0px 0px 1px rgba(104, 104, 104, 0.2);
    -moz-box-shadow:inset 0px 0px 0px 1px rgba(104, 104, 104, 0.2);
    box-shadow:inset 0px 0px 0px 1px rgba(104, 104, 104, 0.2);
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li p.chart__phase__mobile {
  text-transform: uppercase;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 16.94px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li p.chart__phase__mobile {
    display: none;
  }
}



.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a {
  display: inline-block;
  font-size: 14px;
  line-height: 16.94px;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 1px;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a {
    display: block;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 12px;
    line-height: 11px;
    padding-left: 9px;
    margin-bottom: 0;
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span {
  transition: all 0.2s ease-in-out;
  text-transform: uppercase;
  line-height: 22px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span {
    position: absolute;
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span:first-child {
  display: none;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span:first-child {
    display: block;
    top: -100%;
  } 
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span:last-child {
  position: relative;
  padding-right: 24px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span:last-child {
    top: 0;
    position: absolute;
    padding-right: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span:first-child::after {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE1MzJfMzQ2MikiPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDFfMTUzMl8zNDYyKSI+CjxwYXRoIGQ9Ik0xMC42Njg5IDYuMjc2TDQuOTMwOTUgMTIuMDE0TDMuOTg4MjggMTEuMDcxM0w5LjcyNTYxIDUuMzMzMzNINC42Njg5NVY0SDEyLjAwMjNWMTEuMzMzM0gxMC42Njg5VjYuMjc2WiIgZmlsbD0id2hpdGUiIHN0eWxlPSJmaWxsOndoaXRlO2ZpbGwtb3BhY2l0eToxOyIvPgo8L2c+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTUzMl8zNDYyIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgc3R5bGU9ImZpbGw6d2hpdGU7ZmlsbC1vcGFjaXR5OjE7Ii8+CjwvY2xpcFBhdGg+CjxjbGlwUGF0aCBpZD0iY2xpcDFfMTUzMl8zNDYyIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgc3R5bGU9ImZpbGw6d2hpdGU7ZmlsbC1vcGFjaXR5OjE7Ii8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==');
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span:last-child::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE1MzJfMzQ2MikiPgo8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDFfMTUzMl8zNDYyKSI+CjxwYXRoIGQ9Ik0xMC42Njg5IDYuMjc2TDQuOTMwOTUgMTIuMDE0TDMuOTg4MjggMTEuMDcxM0w5LjcyNTYxIDUuMzMzMzNINC42Njg5NVY0SDEyLjAwMjNWMTEuMzMzM0gxMC42Njg5VjYuMjc2WiIgZmlsbD0id2hpdGUiIHN0eWxlPSJmaWxsOndoaXRlO2ZpbGwtb3BhY2l0eToxOyIvPgo8L2c+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTUzMl8zNDYyIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgc3R5bGU9ImZpbGw6d2hpdGU7ZmlsbC1vcGFjaXR5OjE7Ii8+CjwvY2xpcFBhdGg+CjxjbGlwUGF0aCBpZD0iY2xpcDFfMTUzMl8zNDYyIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIgc3R5bGU9ImZpbGw6d2hpdGU7ZmlsbC1vcGFjaXR5OjE7Ii8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==');
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a span:last-child::after {
    display: none;
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a:hover {
  opacity: unset;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a:hover span:first-child {
  top: 0;
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li a:hover span:last-child {
  top: 100%;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span {
  font-size: 0;
  display: block;
  height: 12px;
  border-radius: 100px;
  background-color: #000000;
  position: relative;
  overflow: hidden;
}

.chart.chart--plain .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span {
  background-color: #191919;
}

.chart.chart--plain .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span {
  background-color: #191919; 
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span::before {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--progress-1);
  border-radius: 100px;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(1)::before {
  width: min(100%, calc(100% * (var(--research-progress) / 16.67)));
  background-color: var(--progress-1);
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(2)::before {
  width: min(100%, calc(100% * ((var(--research-progress) - 16.67) / 16.67)));
  background-color: var(--progress-1);
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(3)::before {
  width: min(100%, calc(100% * ((var(--research-progress) - 33.34) / 16.67)));
  background-color: var(--progress-2);
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(4)::before {
  width: min(100%, calc(100% * ((var(--research-progress) - 50.01) / 16.67)));
  background-color: var(--progress-2);
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(5)::before {
  width: min(100%, calc(100% * ((var(--research-progress) - 66.68) / 16.67)));
  background-color: var(--progress-2);
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(6)::before {
  width: min(100%, calc(100% * ((var(--research-progress) - 83.35) / 16.67)));
  background-color: var(--progress-3);
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(6){
  position: relative;
}
.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(6)::after {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMyAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjc1IDNMNS4yNSA4LjVMMi43NSA2IiBzdHJva2U9IndoaXRlIiBzdHlsZT0ic3Ryb2tlOndoaXRlO3N0cm9rZS1vcGFjaXR5OjE7IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  opacity: 0.4;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span:nth-child(6)::after {
    display: none;
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile span.active:nth-child(6)::after {
  opacity: 1;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-mobile {
    display: none;
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-bar {
  display: none;
}

@media only screen and (min-width: 1024px) {
  .chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
  }
}


@media only screen and (min-width: 1024px) {
  .chart.chart--plain .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-bar {
    background-color: #FFFFFF1A;
  }
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-bar .chart__current {
  width: calc(var(--research-progress) * 1%);
  height: 100%;
  overflow: hidden;
  border-radius: 100px;
  clip-path: border-box;
}

.chart .chart__grid .chart__pillar .chart__approach .chart__approach__progress ul li .chart__progress-bar .chart__current .chart__total {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, var(--progress-1) 0%, var(--progress-1) 33.14%, white calc(33.14% + 1px), white calc(33.14% + 2px), var(--progress-2) calc(33.14% + 2px), var(--progress-2) 83.16%, white calc(83.14% + 1px), white calc(83.14% + 2px), var(--progress-3) calc(83.14% + 2px), var(--progress-3) 100%);
  width: 100%;
  height: 100%;
}

@keyframes vanish {
  from {
    display: block;
    opacity: 1;
  }
  to {
    display: none;
    opacity: 0;
  }
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

* {
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

dialog.disclaimer {
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  padding: 36.5px 24px 43.5px;
  background-color: transparent;
  z-index: 99;
  color: white;
  width: 100vw;
  overflow: auto;
  max-width: unset;
}

@media only screen and (min-width: 768px) {
  dialog.disclaimer {
    min-height: auto;
    width: 80vw;
    padding: 24px;
    border-radius: 8px;
    -webkit-backdrop-filter: blur(90px);
    backdrop-filter: blur(90px);
    max-width: 662px;
    box-shadow: 8px 16px 24px 0px #000000B2;
  }
}

@media only screen and (min-width: 768px) {
  dialog.disclaimer::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: 1px;
    border-radius: 8px;
    background: linear-gradient(125.5deg, rgba(255, 255, 255, 0.6) 2.88%, rgba(255, 255, 255, 0.15) 52.45%);
    mask: 
     linear-gradient(#000 0 0) exclude, 
     linear-gradient(#000 0 0) content-box;
  }
}

.disclaimer h2 {
  font-weight: 700;
  font-size: 18px;
  line-height: 20.7px;
  letter-spacing: -0.02em;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 8px;
}

@media only screen and (min-width: 768px) {
  .disclaimer h2 {
    margin-bottom: 4px;
    line-height: 25.2px;
  }
}

.disclaimer article {
  margin-bottom: 24px;
}

.disclaimer article p {
  font-size: 16px;
  line-height: 22.4px;
  font-family: "Publico",Georgia,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  color: rgba(255, 255, 255, 0.9);
}

@media only screen and (min-width: 768px) {
  .disclaimer article p {
    font-size: 18px;
    line-height: 25.2px;
    letter-spacing: -0.02em;
  }
}

.disclaimer button {
  padding: 13px 40px;
  border-radius: 100px;
  border: 1px solid white;
  font-size: 16px;
  line-height: 18.4px;
  font-weight: 700;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  transition: all 0.2s ease-in-out;
}

.disclaimer button:focus {
  outline: none;
}

.disclaimer button:hover {
  background-color: white;
  color: black;
}

.disclaimer::backdrop {
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

@media only screen and (min-width: 768px) {
  .disclaimer::backdrop {
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
  }
}

.disclaimer input {
  display: none;
}

.disclaimer input:checked + label::before {
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' transform='translate(0 0.5)' fill='white' style='fill:white;fill-opacity:1;'/%3E%3Cg clip-path='url(/%23clip0_1494_5031)'%3E%3Cpath d='M10.4996 14.879L17.3936 7.98425L18.4548 9.04475L10.4996 17L5.72656 12.227L6.78706 11.1665L10.4996 14.879Z' fill='black' style='fill:black;fill-opacity:1;'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1494_5031'%3E%3Crect width='18' height='18' fill='white' style='fill:white;fill-opacity:1;' transform='translate(3 3.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.disclaimer label {
  text-transform: uppercase;
  font-family: "Balto Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 16px;
}

.disclaimer label::before {
  content: "";
  -webkit-appearance: none;
  border: 1px solid white;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: cover;
  background-repeat: no-repeat;
}

body.no-scroll {
  overflow: hidden;
}