.tooltip-anchor {
    position: relative;
    z-index: 3;
    cursor: var(--custom-pointer);
    font-family: Montserrat;
}

.tooltip-anchor::after {
    content: attr(data-tooltip);
    visibility: hidden;
    transform-origin: bottom;
    opacity: 0;
    transition: all 125ms;
    position: absolute;
    background-color: var(--dark-gunmetal);
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    z-index: -1;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: var(--cloudy-white);
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    pointer-events: none;
}

.tooltip-anchor:hover::after {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-8px) scale(1);
}

.tooltip-anchor::before {
    content: '';
    visibility: hidden;
    opacity: 0;
    transition: all 125ms;
    position: absolute;
    background-color: var(--dark-gunmetal);
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    bottom: 100%;
    left: 50%;
    transform: translateX(-55%);
    z-index: 0;
    width: 0.75rem;
    height: 4px;
}

.tooltip-anchor:hover::before {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-8px) scale(1);
}