.tooltip-content {
    /* Layout & Positioning */
    position: absolute;
    left: 500px; /* Moves it to the right of the button */
    top: 500px; /* Centers it vertically relative to button */
    transform: translateY(-50%); /* Adjustment for exact centering */
    width: 384px;
    background-color: #4285f3; /* The bright blue color */
    color: white;
    padding: 10px 9px 7px 13px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* Animation State (Hidden) */
    /*opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;*/
}

    /* 4. The Triangle Arrow (Pointing Left) */
    .tooltip-content::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%; /* Positions it on the left edge of the blue box */
        margin-top: -10px; /* Half of the border width to center it */
        border-width: 10px;
        border-style: solid;
        border-color: transparent #4da6ff transparent transparent;
    }

    /* 5. Typography */
    .tooltip-content p {
        margin: 0 0 15px 0;
        font-size: 14px;
        line-height: 1.5;
        color: white;
    }

/* 6. The "Try for Free" Button */
.tooltip-btn {
    display: block;
    width: fit-content;
    margin-left: auto; /* Pushes button to the right */
    background-color: #fbb016; /* Orange color */
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}

    .tooltip-btn:hover {
        background-color: #e59d0f;
    }

/* 7. The Hover Effect (Logic) */
.tooltip-wrapper:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
}