.box-body .stage-item {
    padding: 0px 0px 0px 0px;
    margin-left: 10px;
    padding-left: 10px;
    position: relative;
    margin-bottom: 0px;
}
.box-body .stage-item-inner {
    border-top-right-radius: 60px;
    border-bottom-right-radius: 60px;
    padding: 5px;
    border: 2px solid var(--clr-white) !important; 
    height: 90px;
}

.box-body .stage-item-inner {
    display: grid;
    grid-template-columns: 10fr 2fr;
    justify-content: start;
}

.stage-item-inner-icon {
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-body .stage-item-inner i {
    color: #516654;
    font-size: 2.5rem;
    margin-right:7px;
}
.stage-item-inner, .stage-item-inner-header, .stage-item-inner-text{
    color: var(--clr-black)
}
.stage-item-inner-header{
    font-size: 0.9rem;
    font-weight: bold;
}
.stage-item-inner-text{
    font-size: .9rem;
}
.box-body .stage-item-inner .info-icon {
    color: var(--clr-6);
    font-size: 2.5rem;
    margin-right:7px;
}
.stage-item-checkbox{
    position: absolute;
    left: -20px;
    font-size: 2.0rem;
    top: 0px;
    height: 30px;
    width: 30px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
}
.stage-item-checkbox .arrow-icon{
    color:red !important;
    transform: rotate(160deg);
    margin-right: 20px;
    margin-bottom: 20px;
    scale: 0.9;
}
.stage-item-checkbox .arrow-icon::after{
    content: "";
    position: absolute;
    transform: rotate(160deg);
    transform-origin: 0 0;
    transition: transform 0.3s ease-in-out;
    scale: 1.1;
}
.stage-item-checkbox .checkmark-icon{
    color:black !important;
    margin-bottom: 10px;
    scale: 0.7; 
    margin-left: 10px;
    transform: rotate(-10deg);
}
.box-body .stage-item:nth-child(1) {
    border-left: 8px solid var(--clr-9);
}
.box-body .stage-item:nth-child(2) {
    border-left: 8px solid var(--clr-10);
}
.box-body .stage-item:nth-child(3) {
    border-left: 8px solid var(--clr-11);
}
.box-body .stage-item:nth-child(4) {
    border-left: 8px solid var(--clr-12);
}
.box-body .stage-item:nth-child(5) {
    border-left: 8px solid var(--clr-13);
}
.box-body .stage-item:nth-child(6) {
    border-left: 8px solid var(--clr-14);
}
.box-body .stage-item:nth-child(7) {
    border-left: 8px solid var(--clr-15);
}
.box-body .stage-item:nth-child(8) {
    border-left: 8px solid var(--clr-8);
}
.box-body .stage-item:nth-child(1) .stage-item-checkbox{
    border: 8px solid var(--clr-9);
    background-color: var(--clr-white)
}
.box-body .stage-item:nth-child(2) .stage-item-checkbox{
    border: 8px solid var(--clr-10);
    background-color:var(--clr-white)
}
.box-body .stage-item:nth-child(3) .stage-item-checkbox{
    border: 8px solid var(--clr-11);
    background-color: var(--clr-white)
}
.box-body .stage-item:nth-child(4) .stage-item-checkbox{
    border: 8px solid var(--clr-12);
    background-color: var(--clr-white)
}
.box-body .stage-item:nth-child(5) .stage-item-checkbox{
    border: 8px solid var(--clr-13);
    background-color: var(--clr-white)
}
.box-body .stage-item:nth-child(6) .stage-item-checkbox{
    border: 8px solid var(--clr-14);
    background-color: var(--clr-white)
}
.box-body .stage-item:nth-child(7) .stage-item-checkbox{
    border: 8px solid var(--clr-15);
    background-color: var(--clr-white)
}
.box-body .stage-item:nth-child(8) .stage-item-checkbox{
    border: 8px solid var(--clr-8);
    background-color: var(--clr-white)
}
.box-body .stage-item:nth-child(1) .stage-item-inner{
    background-color: var(--clr-9);
}
.box-body .stage-item:nth-child(2) .stage-item-inner{
    background-color: var(--clr-10);
}
.box-body .stage-item:nth-child(3) .stage-item-inner{
    background-color: var(--clr-11);
}
.box-body .stage-item:nth-child(4) .stage-item-inner{
    background-color: var(--clr-12);
}
.box-body .stage-item:nth-child(5) .stage-item-inner{
    background-color: var(--clr-13);
}
.box-body .stage-item:nth-child(6) .stage-item-inner{
    background-color: var(--clr-14);
}
.box-body .stage-item:nth-child(7) .stage-item-inner{
    background-color: var(--clr-15);
}
.box-body .stage-item:nth-child(8) .stage-item-inner{
    background-color: var(--clr-8);
}

/* Base button ------------------------------------------------------------ */
.standard-btn,
a.standard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background-color: var(--clr-8);
  color: #fff;
  padding: 8px 30px;
  border: 1px solid transparent;
  border-radius: 36px;               /* remove !important */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;

  min-width: 50px;                   /* replace hard width */
  text-decoration: none;             /* for anchors */
  cursor: pointer;

  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

/* Generic interactions */
.standard-btn:hover,
a.standard-btn:hover {
  background-color: var(--clr-7);
  color: var(--clr-black);
  text-decoration: none;             /* keep buttons from underlining */
}

.standard-btn:active,
a.standard-btn:active {
  filter: brightness(.95);
}

.standard-btn:focus-visible,
a.standard-btn:focus-visible {
  outline: 3px solid var(--clr-focus, var(--clr-8));
  outline-offset: 2px;
}

/* Disabled states (button or anchor with aria-disabled) */
.standard-btn:disabled,
.standard-btn[disabled],
.standard-btn[aria-disabled="true"],
a.standard-btn[aria-disabled="true"] {
  opacity:0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variants --------------------------------------------------------------- */

/* Light */
.standard-btn.btn-light-cm, .standard-btn-sm.btn-light-cm
a.standard-btn.btn-light-cm, a.standard-btn-sm.btn-light-cm  {
  background-color: var(--clr-light-grey);
  color: var(--clr-6);
}
.standard-btn.btn-light-cm:hover, .standard-btn-sm.btn-light-cm:hover,
a.standard-btn.btn-light-cm:hover, a.standard-btn-sm.btn-light-cm:hover  {
  background-color: var(--clr-pinkish-red);
  color: var(--clr-6); 
}

/* Dark green */
.standard-btn.btn-dark-green-cm, .standard-btn-sm.btn-dark-green-cm
a.standard-btn.btn-dark-green-cm, a.standard-btn-sm.btn-dark-green-cm {
  background-color: var(--clr-6);
  color: var(--clr-white);                     /* was black; ensure contrast */
}
.standard-btn.btn-dark-green-cm:hover, .standard-btn-sm.btn-dark-green-cm:hover,
a.standard-btn.btn-dark-green-cm:hover, a.standard-btn-sm.btn-dark-green-cm:hover  {
  filter: brightness(.95);
  background-color: var(--clr-pinkish-red); 
}

/* Cyan/green */
.standard-btn.btn-cyan-green-cm, .standard-btn-sm.btn-cyan-green-cm,
a.standard-btn.btn-cyan-green-cm, a.standard-btn-sm.btn-cyan-green-cm  {
  background-color: var(--clr-8);
  color: var(--clr-white);                      /* ensure readability */
}
.standard-btn.btn-cyan-green-cm:hover, .standard-btn-sm.btn-cyan-green-cm:hover,
a.standard-btn.btn-cyan-green-cm:hover, a.standard-btn-sm.btn-cyan-green-cm:hover  {
  filter: brightness(.95);
  background-color: var(--clr-pinkish-red); 
}

/* Copy: visually distinct but interactive */
.standard-btn.copy,
a.standard-btn.copy {
  background-color: var(--clr-8);
  color: var(--clr-6); 
  border-radius: .5rem;
}
.standard-btn.copy:hover,
a.standard-btn.copy:hover {
  filter: brightness(.95);
  color: var(--clr-6); 
}

/* Small button ----------------------------------------------------------- */
.standard-btn-sm,
a.standard-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-6);
  color: var(--clr-white); 
  border: none;
  border-radius: 1rem;
  padding: .2rem 1rem;
  font-size: 14px;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  max-width: 190px;
}
.standard-btn-sm:hover,
a.standard-btn-sm:hover {
  background-color: var(--clr-pinkish-red);           /* your original hover */
  color: var(--clr-white);
}

/* Optional: subtle elevation */
.standard-btn,
a.standard-btn,
.standard-btn-sm,
a.standard-btn-sm {
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.06);
}
.standard-btn:hover,
a.standard-btn:hover,
.standard-btn-sm:hover,
a.standard-btn-sm:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.08);
}

/* =========================================================
   Standard badges (non-interactive)
   - rounded corners
   - cursor: not-allowed
   - uses your existing color variables/scheme
   ========================================================= */

.standard-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem .65rem;
  border-radius: 5px;   
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  pointer-events: none;
}

/* Danger (pinkish red) */
.standard-badge.badge-danger{
  background-color: var(--clr-pinkish-red);
  color: var(--clr-black);
}

/* Success (cyan green) */
.standard-badge.badge-success{
  background-color: var(--clr-8);
  color: var(--clr-white);
}
/* Info (dark green) */
.standard-badge.badge-info{
  background-color: var(--clr-6);
  color: var(--clr-white);
}
.standard-badge.badge-light{
  background-color: var(--clr-light-grey);
  color: var(--clr-6);
}

/* Warning (gold) */
.standard-badge.badge-warning{
  background-color: var(--clr-gold);
  color: var(--clr-black);
}

/* Secondary (grey) */
.standard-badge.badge-secondary{
  background-color: var(--clr-light-grey);
  color: var(--clr-6);
}

/* Optional: slightly smaller version */
.standard-badge.badge-sm{
  font-size: .8rem;
  padding: .2rem .5rem;
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .standard-btn,
  a.standard-btn,
  .standard-btn-sm,
  a.standard-btn-sm {
    transition: none;
  }
}

@media (max-width: 375.98px) {
    .stage-item-inner-text{
        font-size: 0.7rem;
    }
    .stage-item-inner-header{
        font-size: 0.7rem;
    }
    .box-body .stage-item-inner .info-icon{
        font-size: 1.4rem;
    }
    .box-body .stage-item-inner{
        height: 85px;
    }
 }
@media (min-width: 375.98px) {
    .stage-item-inner-text{
        font-size: 0.7rem;
    }
    .stage-item-inner-header{
        font-size: 0.7rem;
    }
    .box-body .stage-item-inner .info-icon{
        font-size: 1.7rem;
    }
 }
@media (min-width: 575.98px) {
    .stage-item-inner-text{
        font-size: 0.7rem;
    }
    .stage-item-inner-header{
        font-size: 0.7rem;
    }
    .box-body .stage-item-inner .info-icon{
        font-size: 1.9rem;
    }
    .box-body .stage-item-inner{
        height: 80px;
    }
 }
 @media (min-width: 767.98px) {
    .stage-item-inner-header{
        font-size: 0.7rem;
    }
    .stage-item-inner-text{
        font-size: 0.7rem;
    }
    .box-body .stage-item-inner{
        height: 94px;
    }
    .box-body .stage-item-inner .info-icon{
        font-size: 2.0rem;
    }
  }
  @media (min-width: 992.98px) {
    .stage-item-inner-header{
        font-size: 0.8rem;
    }
    .stage-item-inner-text{
        font-size: 0.8rem;
    }
    .box-body .stage-item-inner{
        height: 85px;
    }
    .box-body .stage-item-inner .info-icon{
        font-size: 2.2rem;
    }
  }
  @media (min-width: 1200.98px) {
    .stage-item-inner-header{
        font-size: 0.8rem;
    }
    .stage-item-inner-text{
        font-size: 0.8rem;
    }
    .box-body .stage-item-inner{
        height: 85px;
    }
    .box-body .stage-item-inner .info-icon{
        font-size: 2.2rem;
    }
  }