/* XpertLab CTA Banner */

.xlcta-wrapper {
    --xlcta-blob: #cfe8ff;
    --xlcta-title: #0b1d3a;
    --xlcta-sub: #5b6b80;
    --xlcta-icon: #2f9bff;
    --xlcta-pin: #e53935;
    --xlcta-btn-from: #7dd3f5;
    --xlcta-btn-to: #4db8e8;
    --xlcta-btn-text: #0b1d3a;
    --xlcta-max: 1024px;

    width: 100%;
    display: flex;
    margin: 28px 0;
    box-sizing: border-box;
}

.xlcta-align-left   { justify-content: flex-start; }
.xlcta-align-center { justify-content: center; }
.xlcta-align-right  { justify-content: flex-end; }

.xlcta-banner {
    position: relative;
    width: 100%;
    max-width: var(--xlcta-max);
    /* tighter top padding so pin overlaps correctly */
    padding: 45px 32px 30px;
    box-sizing: border-box;

    /* Blob background using uploaded image — fills full width */
    background-image: url('../images/blob.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;

    border-radius: 0;
    text-align: center;
    color: var(--xlcta-title);
    overflow: visible;
}

/* Pin — smaller, tighter to banner top */
.xlcta-pin {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 0;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.25));
    pointer-events: none;
    z-index: 2;
}

.xlcta-pin img {
    width: 40px;
    height: auto;
    display: block;
}

/* Content */
.xlcta-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 1;
    padding-top: 30px;
}

.xlcta-title {
    margin: 0;
    font-size: clamp(17px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--xlcta-title);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    transform: rotate(-3.25deg);
}

.xlcta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--xlcta-icon);
    line-height: 0;
}

.xlcta-title-text {
    display: inline-block;
}

.xlcta-subtitle {
    margin: 0;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 400;
    color: #778AA9;
    max-width: 600px;
    margin-bottom: 40px;
    transform: rotate(-3.25deg);
}

/* Button — glass gradient effect */
/* .xlcta-btn {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 40px;
    border-radius: 999px;
    background:
        linear-gradient(330deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 100%),
        linear-gradient(330deg, var(--xlcta-btn-from), var(--xlcta-btn-to));
    color: var(--xlcta-btn-text) !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none !important;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.12),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    bottom: -50px;
}

.xlcta-btn:hover,
.xlcta-btn:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.65),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    color: var(--xlcta-btn-text) !important;
}

.xlcta-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transition: transform .15s ease;
}

.xlcta-btn:hover .xlcta-btn-arrow {
    transform: translateX(3px);
} */

.xlcta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 315px;
    height: 74px;
    border-radius: 60px;
    background: linear-gradient(18.58deg, #EDF8FF 2.43%, #35B6FF 97.63%);
    color: #191919 !important;
    font-family: 'Syne', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
    text-decoration: none !important;
    border: none;
    box-shadow: none;
    cursor: pointer;
    position: absolute;
    bottom: -66px;
    left: 50%;
    transform: translateX(-50%) rotate(-3.25deg);
}

.xlcta-btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* Responsive */
@media (max-width: 600px) {
    .xlcta-banner {
        padding: 24px 16px 40px;
    }
    /* Chat icon stays on the same line as the title.
       The title is a wrapping flex row, and a flex item is placed by its own
       max-content width: the whole sentence is far wider than a phone line, so
       it was pushed onto its own flex line and the icon was left sitting alone
       above it. Normal inline flow instead lets the sentence wrap AROUND the
       icon — the icon sits before the first word and the text breaks after it.
       `.xlcta-title-text` has to become a true inline (it is inline-block by
       default): an inline-block is an unbreakable box, so it would be bumped to
       the next line exactly like the flex item was. */
    .xlcta-title {
        font-size: 16px;
        margin-top: 10px;
        display: block;
    }
    .xlcta-icon {
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px; /* stands in for the flex `gap` */
    }
    .xlcta-title-text { display: inline; }

    .xlcta-subtitle { font-size: 13px; }
    /* .xlcta-btn { padding: 10px 20px; font-size: 13px; bottom:-20px; } */
    .xlcta-btn {
        width: min(260px, calc(100% - 24px));
        height: 56px;
        font-size: 16px;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%) rotate(-3.25deg);
    }
    .xlcta-pin img { width: 26px; }
    .xlcta-pin { top: 30px; }
}

/* ==========================================================================
   Scroll Reveal — "Unroll from the Pin"
   A signature entrance (a type not used in the other plugins): the pushpin
   drops in and settles with a soft overshoot, then the banner content unrolls
   downward from under it via a clip-path wipe, while the banner itself fades
   up into place. JS adds .xlcta-reveal (arms the hidden state) and then
   .xlcta-in once the banner scrolls into view.
   ========================================================================== */

/* Banner fades + lifts in as a unit. */
.xlcta-reveal .xlcta-banner {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.xlcta-reveal.xlcta-in .xlcta-banner {
    opacity: 1;
    transform: none;
}

/* Pin drops from above and settles with a gentle overshoot ("pinning in").
   translateX(-50%) is preserved so it stays horizontally centred. */
.xlcta-reveal .xlcta-pin {
    opacity: 0;
    transform: translateX(-50%) translateY(-38px);
    transition:
        opacity 0.45s ease,
        transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.15s;
}
.xlcta-reveal.xlcta-in .xlcta-pin {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Content unrolls downward from under the pin (clip-path wipe) after it lands.
   The final state keeps a generous NEGATIVE bottom inset so the button — which
   is positioned absolutely below the content box (bottom: -66px) — is never
   cropped by the clip region. The extra bottom insets the top/sides at 0 (the
   content never overflows there). */
.xlcta-reveal .xlcta-content {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.45s;
}
.xlcta-reveal.xlcta-in .xlcta-content {
    clip-path: inset(0 0 -120px 0);
}

/* Reduced motion — show everything immediately, no movement. */
@media (prefers-reduced-motion: reduce) {
    .xlcta-reveal .xlcta-banner {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .xlcta-reveal .xlcta-pin {
        opacity: 1;
        transform: translateX(-50%);
        transition: none;
    }
    .xlcta-reveal .xlcta-content {
        clip-path: none;
        transition: none;
    }
}