/*
=========================================================
NEYO — LEVERAGE INTRO
CHATGPT-STYLE PREMIUM INTRO
VERSION 3

Owns:
- Leverage intro overlay
- Premium modal layout
- Gradient presentation
- Segmented NEYO / Leverage control
- Slide content typography
- Navigation dots
- Footer actions
- Responsive behavior
- Dark mode
- Viewport-centered positioning

Does NOT own:
- Checkout
- Pricing modal
- Subscription logic
=========================================================
*/


/* =====================================================
   ROOT OPEN STATE
   ===================================================== */

html.leverage-intro-open,
body.leverage-intro-open {
    overflow: hidden;
}


/* =====================================================
   OVERLAY
   ===================================================== */

.leverage-intro-overlay {
    position: fixed;

    inset: 0;

    z-index: 12000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 28px;

    background:
        rgba(247, 247, 248, 0.96);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    overflow-y: auto;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;
}


.leverage-intro-overlay.open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =====================================================
   MODAL
   ===================================================== */

.leverage-intro-modal {
    position: relative;

    width:
        min(
            650px,
            calc(100vw - 48px)
        );

    min-height: 550px;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        rgba(0, 0, 0, 0.12);

    border-radius: 24px;

    background:
        #ffffff;

    box-shadow:
        0 18px 55px
            rgba(0, 0, 0, 0.12),
        0 2px 8px
            rgba(0, 0, 0, 0.04);

    transform:
        translateY(-16px)
        scale(0.985);

    transition:
        transform 220ms
            cubic-bezier(
                0.2,
                0.8,
                0.2,
                1
            );
}


.leverage-intro-overlay.open
.leverage-intro-modal {
    transform:
        translateY(-16px)
        scale(1);
}


/* =====================================================
   GRADIENT AREA
   ===================================================== */

.leverage-intro-gradient {
    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 310px;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 22% 18%,
            rgba(149, 176, 255, 0.92),
            transparent 42%
        ),
        radial-gradient(
            circle at 78% 10%,
            rgba(119, 116, 235, 0.82),
            transparent 44%
        ),
        radial-gradient(
            circle at 42% 54%,
            rgba(203, 181, 244, 0.70),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #dbe4ff 0%,
            #ebe8ff 47%,
            rgba(255, 255, 255, 0.96) 88%,
            #ffffff 100%
        );
}


/* =====================================================
   CLOSE BUTTON
   ===================================================== */

.leverage-intro-close {
    position: absolute;

    top: 26px;

    right: 26px;

    z-index: 10;

    width: 38px;

    height: 38px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background:
        transparent;

    color:
        rgba(20, 20, 20, 0.70);

    cursor: pointer;

    transition:
        background 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}


.leverage-intro-close:hover {
    background:
        rgba(255, 255, 255, 0.52);

    color:
        #111111;
}


.leverage-intro-close:active {
    transform:
        scale(0.94);
}


.leverage-intro-close:focus-visible {
    outline:
        2px solid
        rgba(34, 102, 255, 0.68);

    outline-offset:
        2px;
}


/* =====================================================
   TOP
   ===================================================== */

.leverage-intro-top {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    padding:
        94px
        24px
        24px;
}


/* =====================================================
   SEGMENTED CONTROL
   ===================================================== */

.leverage-intro-segmented {
    display: inline-flex;

    align-items: center;

    padding: 3px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.52);

    box-shadow:
        inset 0 0 0 1px
            rgba(255, 255, 255, 0.24);
}


.leverage-intro-segment {
    min-width: 122px;

    height: 54px;

    padding:
        0
        24px;

    border: 0;

    border-radius: 999px;

    background:
        transparent;

    color:
        rgba(47, 47, 55, 0.52);

    font: inherit;

    font-size: 17px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 140ms ease;
}


.leverage-intro-segment:hover {
    color:
        rgba(20, 20, 24, 0.80);
}


.leverage-intro-segment.active {
    background:
        #ffffff;

    color:
        #111111;

    box-shadow:
        0 2px 8px
            rgba(0, 0, 0, 0.06),
        0 1px 2px
            rgba(0, 0, 0, 0.04);
}


.leverage-intro-segment:active {
    transform:
        scale(0.98);
}


.leverage-intro-segment:focus-visible {
    outline:
        2px solid
        rgba(34, 102, 255, 0.62);

    outline-offset:
        2px;
}


/* =====================================================
   STAGE
   ===================================================== */

.leverage-intro-stage {
    position: relative;

    z-index: 2;

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        30px
        64px
        12px;

    transition:
        opacity 120ms ease,
        transform 120ms ease;
}


.leverage-intro-stage.is-changing {
    opacity: 0;

    transform:
        translateY(4px);
}


/* =====================================================
   CONTENT
   ===================================================== */

.leverage-intro-content {
    width: 100%;

    max-width: 515px;

    text-align: center;
}


/* =====================================================
   EYEBROW
   ===================================================== */

.leverage-intro-eyebrow {
    margin-bottom: 12px;

    color:
        rgba(41, 41, 46, 0.52);

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


/* =====================================================
   TITLE
   ===================================================== */

.leverage-intro-title {
    margin: 0;

    color:
        #111111;

    font-size: 30px;

    font-weight: 650;

    line-height: 1.18;

    letter-spacing:
        -0.025em;
}


/* =====================================================
   DESCRIPTION
   ===================================================== */

.leverage-intro-description {
    margin:
        16px
        auto
        0;

    max-width: 520px;

    color:
        rgba(36, 36, 42, 0.64);

    font-size: 17px;

    font-weight: 400;

    line-height: 1.62;
}


/* =====================================================
   LEARN MORE
   ===================================================== */

.leverage-intro-learn-more {
    margin-top: 9px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        rgba(36, 36, 42, 0.76);

    font: inherit;

    font-size: 15px;

    font-weight: 500;

    text-decoration: underline;

    text-underline-offset: 3px;

    cursor: pointer;
}


.leverage-intro-learn-more:hover {
    color:
        #111111;
}


.leverage-intro-learn-more[hidden] {
    display:
        none !important;
}


/* =====================================================
   DOTS
   ===================================================== */

.leverage-intro-dots {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        8px
        24px
        10px;
}


.leverage-intro-dot {
    width: 7px;

    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 999px;

    background:
        rgba(30, 30, 35, 0.20);

    cursor: pointer;

    transition:
        width 160ms ease,
        background 160ms ease,
        transform 140ms ease;
}


.leverage-intro-dot:hover {
    background:
        rgba(30, 30, 35, 0.40);
}


.leverage-intro-dot.active {
    width: 20px;

    background:
        #1f1f22;
}


.leverage-intro-dot:active {
    transform:
        scale(0.90);
}


/* =====================================================
   FOOTER
   ===================================================== */

.leverage-intro-footer {
    position: relative;

    z-index: 3;

    min-height: 96px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        14px
        28px
        30px;
}


/* =====================================================
   BACK BUTTON
   ===================================================== */

.leverage-intro-back {
    min-width: 96px;

    height: 50px;

    padding:
        0
        24px;

    border:
        1px solid
        rgba(0, 0, 0, 0.10);

    border-radius: 999px;

    background:
        #ffffff;

    color:
        #333338;

    font: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 140ms ease,
        border-color 140ms ease,
        transform 140ms ease;
}


.leverage-intro-back:hover {
    background:
        #f5f5f6;

    border-color:
        rgba(0, 0, 0, 0.16);
}


.leverage-intro-back:active {
    transform:
        scale(0.98);
}


.leverage-intro-back[hidden] {
    display:
        none !important;
}


/* =====================================================
   NEXT BUTTON
   ===================================================== */

.leverage-intro-next {
    min-width: 145px;

    height: 50px;

    padding:
        0
        28px;

    border: 0;

    border-radius: 999px;

    background:
        #eef3ff;

    color:
        #346ee8;

    font: inherit;

    font-size: 15px;

    font-weight: 650;

    cursor: pointer;

    box-shadow:
        inset 0 0 0 1px
            rgba(52, 110, 232, 0.04);

    transition:
        background 150ms ease,
        color 150ms ease,
        transform 140ms ease,
        box-shadow 150ms ease;
}


.leverage-intro-next:hover {
    background:
        #e4ecff;

    color:
        #255ed4;
}


.leverage-intro-next:active {
    transform:
        scale(0.98);
}


.leverage-intro-next.is-final {
    min-width: 190px;

    background:
        #111111;

    color:
        #ffffff;

    box-shadow:
        0 6px 16px
            rgba(0, 0, 0, 0.12);
}


.leverage-intro-next.is-final:hover {
    background:
        #242424;
}


/* =====================================================
   BUTTON FOCUS
   ===================================================== */

.leverage-intro-back:focus-visible,
.leverage-intro-next:focus-visible,
.leverage-intro-dot:focus-visible,
.leverage-intro-learn-more:focus-visible {
    outline:
        2px solid
        rgba(34, 102, 255, 0.62);

    outline-offset:
        3px;
}


/* =====================================================
   DARK MODE
   ===================================================== */

body.dark-mode
.leverage-intro-overlay {
    background:
        rgba(15, 15, 15, 0.98);
}


body.dark-mode
.leverage-intro-modal {
    border-color:
        rgba(255, 255, 255, 0.12);

    background:
        #161616;

    box-shadow:
        0 22px 70px
            rgba(0, 0, 0, 0.52);
}


body.dark-mode
.leverage-intro-gradient {
    background:
        radial-gradient(
            circle at 20% 18%,
            rgba(80, 108, 196, 0.82),
            transparent 42%
        ),
        radial-gradient(
            circle at 78% 8%,
            rgba(92, 72, 170, 0.72),
            transparent 44%
        ),
        radial-gradient(
            circle at 45% 54%,
            rgba(118, 89, 153, 0.50),
            transparent 46%
        ),
        linear-gradient(
            180deg,
            #252942 0%,
            #272436 48%,
            rgba(22, 22, 22, 0.97) 88%,
            #161616 100%
        );
}


body.dark-mode
.leverage-intro-close {
    color:
        rgba(255, 255, 255, 0.70);
}


body.dark-mode
.leverage-intro-close:hover {
    background:
        rgba(255, 255, 255, 0.08);

    color:
        #ffffff;
}


body.dark-mode
.leverage-intro-segmented {
    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        inset 0 0 0 1px
            rgba(255, 255, 255, 0.05);
}


body.dark-mode
.leverage-intro-segment {
    color:
        rgba(255, 255, 255, 0.44);
}


body.dark-mode
.leverage-intro-segment:hover {
    color:
        rgba(255, 255, 255, 0.78);
}


body.dark-mode
.leverage-intro-segment.active {
    background:
        rgba(255, 255, 255, 0.94);

    color:
        #111111;
}


body.dark-mode
.leverage-intro-eyebrow {
    color:
        rgba(255, 255, 255, 0.44);
}


body.dark-mode
.leverage-intro-title {
    color:
        #ffffff;
}


body.dark-mode
.leverage-intro-description {
    color:
        rgba(255, 255, 255, 0.62);
}


body.dark-mode
.leverage-intro-learn-more {
    color:
        rgba(255, 255, 255, 0.72);
}


body.dark-mode
.leverage-intro-learn-more:hover {
    color:
        #ffffff;
}


body.dark-mode
.leverage-intro-dot {
    background:
        rgba(255, 255, 255, 0.22);
}


body.dark-mode
.leverage-intro-dot:hover {
    background:
        rgba(255, 255, 255, 0.42);
}


body.dark-mode
.leverage-intro-dot.active {
    background:
        #ffffff;
}


body.dark-mode
.leverage-intro-back {
    border-color:
        rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.06);

    color:
        rgba(255, 255, 255, 0.82);
}


body.dark-mode
.leverage-intro-back:hover {
    background:
        rgba(255, 255, 255, 0.10);

    border-color:
        rgba(255, 255, 255, 0.18);
}


body.dark-mode
.leverage-intro-next {
    background:
        rgba(93, 135, 255, 0.16);

    color:
        #8eafff;
}


body.dark-mode
.leverage-intro-next:hover {
    background:
        rgba(93, 135, 255, 0.22);

    color:
        #a8c0ff;
}


body.dark-mode
.leverage-intro-next.is-final {
    background:
        #ffffff;

    color:
        #111111;
}


body.dark-mode
.leverage-intro-next.is-final:hover {
    background:
        #ededed;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 760px) {

    .leverage-intro-overlay {
        align-items: center;

        padding:
            20px;
    }


    .leverage-intro-modal {
        width: 100%;

        min-height: 530px;

        border-radius: 22px;

        transform:
            translateY(-14px)
            scale(0.985);
    }


    .leverage-intro-overlay.open
    .leverage-intro-modal {
        transform:
            translateY(-14px)
            scale(1);
    }


    .leverage-intro-top {
        padding-top: 84px;
    }


    .leverage-intro-stage {
        padding:
            26px
            42px
            10px;
    }


    .leverage-intro-title {
        font-size: 27px;
    }


    .leverage-intro-description {
        font-size: 16px;
    }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 520px) {

    .leverage-intro-overlay {
        align-items: center;

        justify-content: center;

        padding:
            14px
            14px
            max(
                14px,
                env(safe-area-inset-bottom)
            );
    }


    .leverage-intro-modal {
        width: 100%;

        min-height: 545px;

        max-height:
            calc(
                100dvh - 34px
            );

        border-radius: 24px;

        transform:
            translateY(-18px)
            scale(0.985);
    }


    .leverage-intro-overlay.open
    .leverage-intro-modal {
        transform:
            translateY(-18px)
            scale(1);
    }


    .leverage-intro-gradient {
        height: 280px;
    }


    .leverage-intro-close {
        top: 20px;

        right: 20px;

        width: 36px;

        height: 36px;
    }


    .leverage-intro-top {
        padding:
            78px
            18px
            20px;
    }


    .leverage-intro-segmented {
        width:
            min(
                100%,
                290px
            );
    }


    .leverage-intro-segment {
        flex: 1;

        min-width: 0;

        height: 50px;

        padding:
            0
            16px;

        font-size: 16px;
    }


    .leverage-intro-stage {
        padding:
            24px
            26px
            8px;
    }


    .leverage-intro-eyebrow {
        margin-bottom: 10px;

        font-size: 10px;
    }


    .leverage-intro-title {
        font-size: 25px;

        line-height: 1.2;
    }


    .leverage-intro-description {
        margin-top: 14px;

        font-size: 15px;

        line-height: 1.58;
    }


    .leverage-intro-dots {
        padding-top: 12px;
    }


    .leverage-intro-footer {
        min-height: 92px;

        padding:
            12px
            20px
            24px;
    }


    .leverage-intro-back,
    .leverage-intro-next {
        height: 48px;
    }


    .leverage-intro-next {
        min-width: 138px;
    }


    .leverage-intro-next.is-final {
        min-width: 176px;
    }

}


/* =====================================================
   SHORT VIEWPORT MOBILE
   ===================================================== */

@media (
    max-width: 520px
)
and (
    max-height: 740px
) {

    .leverage-intro-overlay {
        align-items: center;

        padding:
            10px
            14px;
    }


    .leverage-intro-modal {
        min-height: 0;

        max-height:
            calc(
                100dvh - 24px
            );

        overflow-y: auto;

        transform:
            translateY(-8px)
            scale(0.985);
    }


    .leverage-intro-overlay.open
    .leverage-intro-modal {
        transform:
            translateY(-8px)
            scale(1);
    }


    .leverage-intro-gradient {
        height: 250px;
    }


    .leverage-intro-top {
        padding-top: 68px;

        padding-bottom: 12px;
    }


    .leverage-intro-stage {
        padding-top: 16px;

        padding-bottom: 4px;
    }


    .leverage-intro-footer {
        min-height: 80px;

        padding-bottom: 18px;
    }

}


/* =====================================================
   VERY SMALL MOBILE
   ===================================================== */

@media (max-width: 390px) {

    .leverage-intro-overlay {
        padding:
            10px;
    }


    .leverage-intro-modal {
        max-height:
            calc(
                100dvh - 24px
            );

        transform:
            translateY(-12px)
            scale(0.985);
    }


    .leverage-intro-overlay.open
    .leverage-intro-modal {
        transform:
            translateY(-12px)
            scale(1);
    }


    .leverage-intro-stage {
        padding-left: 20px;

        padding-right: 20px;
    }


    .leverage-intro-title {
        font-size: 23px;
    }


    .leverage-intro-footer {
        gap: 8px;

        padding-left: 16px;

        padding-right: 16px;
    }


    .leverage-intro-back {
        min-width: 82px;

        padding:
            0
            18px;
    }


    .leverage-intro-next {
        min-width: 125px;

        padding:
            0
            20px;
    }


    .leverage-intro-next.is-final {
        min-width: 160px;
    }

}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .leverage-intro-overlay,
    .leverage-intro-modal,
    .leverage-intro-stage,
    .leverage-intro-close,
    .leverage-intro-segment,
    .leverage-intro-dot,
    .leverage-intro-back,
    .leverage-intro-next {
        transition:
            none !important;
    }

}