/* ============================================================
   VOXLY WELCOME CARD — Web 0.18.18.55
   ============================================================ */

.voxly-welcome-card {
    position:
        relative;

    display:
        flex;

    gap:
        18px;

    margin:
        18px 18px 24px;

    padding:
        22px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 35%,
            var(--border)
        );

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--accent) 10%,
                var(--panel)
            ),
            var(--panel-2)
        );

    box-shadow:
        0 14px 40px
        rgba(0, 0, 0, .18);

    overflow:
        hidden;

    flex:
        0 0 auto;
}


.voxly-welcome-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0 auto 0 0;

    width:
        4px;

    background:
        var(--accent);
}


.voxly-welcome-icon {
    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    width:
        52px;

    height:
        52px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 45%,
            var(--border)
        );

    border-radius:
        14px;

    background:
        color-mix(
            in srgb,
            var(--accent) 15%,
            var(--panel-3)
        );

    font-size:
        26px;
}


.voxly-welcome-content {
    min-width:
        0;
}


.voxly-welcome-eyebrow {
    margin-bottom:
        5px;

    color:
        var(--accent);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .14em;
}


.voxly-welcome-title {
    margin:
        0 0 8px;

    color:
        var(--text);

    font-size:
        22px;

    line-height:
        1.2;
}


.voxly-welcome-copy {
    max-width:
        720px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.55;
}


.voxly-welcome-tagline {
    margin-top:
        14px;

    color:
        color-mix(
            in srgb,
            var(--accent) 72%,
            var(--text)
        );

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        .04em;
}


@media (max-width: 700px) {

    .voxly-welcome-card {
        gap:
            12px;

        margin:
            12px;

        padding:
            16px;
    }


    .voxly-welcome-icon {
        width:
            42px;

        height:
            42px;

        font-size:
            21px;
    }


    .voxly-welcome-title {
        font-size:
            18px;
    }
}