.button-style1, .button-style2, .button-style3 {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: inherit;
    line-height: 1;
    outline: none;
    overflow: hidden;
    padding: 0;
    pointer-events: all;
    position: relative;
    text-decoration: none;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.button-style1 {
    position: relative;
    color: inherit;
    font-size: 14px;
    text-transform: uppercase;
    padding: 20px 35px;
    border: none;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    letter-spacing: 0.05em;
    font-weight: 600;
    background: transparent;
    line-height: 1.3;
}

.button-style1 .d:before, .button-style1 .d:after {
    content: '';
    position: absolute;
    height: 1px;
    -webkit-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.button-style1 .d span:before, .button-style1 .d span:after {
    content: '';
    position: absolute;
    width: 1px;
    -webkit-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
.button-style1 .d:before {
    top: 0;
    left: 45%;
    right: 10%;
}
.button-style1 .d:after {
    left: 10%;
    right: 65%;
    bottom: 0;
}
.button-style1 .d span:before {
    top: 0;
    left: 0;
    bottom: 70%;
}
.button-style1 .d span:after {
    top: 50%;
    right: 0;
    bottom: 10%;
}
.button-style1 .d:before, .button-style1 .d:after, .button-style1 .d span:before, .button-style1 .d span:after {
    background: #eb1c2f;
}

.button-style1:hover .d span {
    width: 0;
    height: 0;
}

.button-style1:hover .d:before, .button-style1:hover .d:after {
    left: 0;
    right: 0;
}
.button-style1:hover .d span:before, .button-style1:hover .d span:after {
    top: 0;
    bottom: 0;
}

/* Button 2 Style */
.button-style2 {
    font-size: 12px;
    text-transform: uppercase;
    padding: 10px 15px;
    letter-spacing: .1em;
}
.button-style2:before {
    left: 0;
    border-left-width: 1px;
    border-left-style: solid;
}
.button-style2:after {
    right: 0;
    border-right-width: 1px;
    border-right-style: solid;
}
.button-style2:before, .button-style2:after {
    border-color: #D81023;
}
.button-style2:before, .button-style2:after {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    pointer-events: none;
    width: 1px;
    border-top-width: 1px;
    border-top-style: solid;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    -webkit-animation: bt2 500ms ease-in-out;
    animation: bt2 500ms ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.button-style2:hover:before, .button-style2:hover:after {
    -webkit-animation: bt2_hover 500ms ease-in-out;
    animation: bt2_hover 500ms ease-in-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes bt2 {
    0% {
      width: 51%;
      top: 0;
      bottom: 0;
    }
    40% {
      top: 0;
      bottom: 0;
      width: 0;
    }
    100% {
      top: 8px;
      bottom: 8px;
    }
  }
  
  @keyframes bt2 {
    0% {
      width: 51%;
      top: 0;
      bottom: 0;
    }
    40% {
      top: 0;
      bottom: 0;
      width: 0;
    }
    100% {
      top: 8px;
      bottom: 8px;
    }
  }
@-webkit-keyframes bt2_hover {
    0% {
      top: 8px;
      bottom: 8px;
    }
    40% {
      top: 0;
      bottom: 0;
      width: 0;
    }
    100% {
      width: 51%;
      top: 0;
      bottom: 0;
    }
  }
  
  @keyframes bt2_hover {
    0% {
      top: 8px;
      bottom: 8px;
    }
    40% {
      top: 0;
      bottom: 0;
      width: 0;
    }
    100% {
      width: 51%;
      top: 0;
      bottom: 0;
    }
  }



/* Progress */
.chart-wrap {
  --c-red: #e11d2a;
  --c-navy: #0b2b4a;
  --c-gray-light: #cfcfd3;
  --c-gray-dark: #353a40;
  --c-muted: #6b7280;
}
.chart {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: end;
    padding: 20px 16px 0;
    min-height: 440px;
    min-width: 460px;
	max-width: 500px;
}

  /* --- Baseline INSIDE chart, above bars --- */
.baseline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    bottom: 100px;
	width: calc(100% + 30px);
}
  .baseline svg{ width:100%; height:100%; overflow:visible; }

  /* Solid white wedge under the arrow */
  .baseline .fill{
    opacity:1;
    transition:opacity .6s ease-out;
  }
  .baseline.in-view .fill{ opacity:1; }

  /* Arrow image reveal (draw effect) */
  .arrowimg{
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s ease-out;
  }
  .baseline.in-view .arrowimg{ clip-path: inset(0 0 0 0); }

  /* --- Pillars (bars UNDER baseline) --- */
  .pillar{
    position:relative;
    /* z-index:1;  */
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    height:clamp(260px, 60vh, 420px);
  }

  .percent{ position:absolute; top:14%; left:50%; transform:translateX(-50%); color:#fff; font-weight:800; font-size:clamp(18px,2.5vw,22px); text-align:center; }
/* === Gradient split for bars + roof === */
.bar{
  /* define the two halves; set per tier below */
  --bar-a: var(--c-gray-light);
  --bar-b: var(--c-gray-dark);

  width: clamp(64px, 12vw, 80px);
  height: 0%;
  position: relative;
  transition: height 1s cubic-bezier(.2,.8,.2,1);
  background: linear-gradient(90deg, var(--bar-a) 0 50%, var(--bar-b) 50% 100%);
  border-radius: 0;
}

/* replace the old ::after triangle made with borders */
.bar::after{
  content: "";
  position: absolute;
  bottom: calc(100% - 0px);
  left: 0;
  width: 100%;
  height: 50px; /* triangle height */
  background: linear-gradient(90deg, var(--bar-a) 0 50%, var(--bar-b) 50% 100%);
  /* equilateral-ish roof */
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.startup .bar{ --bar-a: #CACACA; --bar-b: #C4C4C4; }
.growth  .bar{ --bar-a: #949494; --bar-b: #858585; }
.scaling .bar{ --bar-a: #6F6F6F; --bar-b: #636363; }
.elite   .bar{ --bar-a: #404040; --bar-b: #3B3B3B; }

/* Optional: keep text readable on any split */
.percent{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }

  .percent small{ display:block; font-size:.65em; letter-spacing:.14em; opacity:.9; margin-top:6px; }

  /* --- Stair captions ABOVE baseline, under each bar --- */
/* UPDATED: start hidden + gentle slide-in */
.caption{
  margin-top:16px;
  text-align:left;
  height:100px;
  width:100px;

  /* keep your stair offset but start slightly lower */
  transform: translateY(calc(var(--stair, 0px) + 8px));
  position:relative;
  z-index:3;

  /* NEW: hidden by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.pillar:hover .caption,
.pillar:focus-within .caption{
  /* NEW: reveal on hover or keyboard focus */
  opacity: 1;
  visibility: visible;
  transform: translateY(var(--stair, 0px));
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}


/* START: replace this block */
.chart:hover .pillar:not(:hover):not(:focus-within) .caption{
  opacity: .45;
  filter: blur(1px);
}
/* END: replace this block */
.pillar .bar{
  transition: transform .5s ease, box-shadow .5s ease, filter .5s ease, opacity .5s ease, filter .5s ease;
  will-change: transform;
}
/* Keep captions crisp by default */
/* .pillar .caption{
  opacity: 1;
  filter: none;
  transition: opacity .25s ease, filter .25s ease, transform .25s ease;
} */

/* POP the active (hover/focus) pillar’s caption */
/* .pillar:hover .caption,
.pillar:focus-within .caption{
  opacity: 1;
  filter: none;
  transform: translateY(var(--stair, 0px)) scale(1.04);
} */

/* Bar pop stays the same */
.pillar:hover .bar,
.pillar:focus-within .bar{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  filter: brightness(1.05) saturate(1.02);
}
.bar{ cursor: pointer; }
.chart:hover .pillar:not(:hover) .bar{
  filter: blur(2px) brightness(.72) saturate(.78);
}




  .tier{ font-weight:800; text-transform:uppercase; margin-bottom:6px; }
  .prog-desc{ color:#fff; font-size:.8rem; line-height:1.25; white-space:nowrap; }
  .startup .caption .tier { color:var(--c-gray-light); }
  .growth .caption .tier { color:var(--c-red); }
  .scaling .caption .tier { color:var(--c-gray-dark); }
  .elite .caption .tier { color:var(--c-navy); }
.caption .tier {
    color: var(--c-red) !important;
}
  @media (max-width:640px){ .bar{ width:72px; } }