/* =========================================================
   VAERO ENGINE — DISCOVERY JOURNEY
   PREMIUM IDENTITY / FOCUS / DIRECTION FLOW
   FINAL CONSOLIDATED EDITION
========================================================= */


/* =========================================================
   01. DISCOVERY TOKENS
========================================================= */

.discovery-screen{
    --discovery-bg:#05080d;
    --discovery-bg-mid:#0a121e;
    --discovery-bg-soft:#101927;

    --discovery-text:#f6f3ec;

    --discovery-muted:
        rgba(236,239,244,.6);

    --discovery-muted-soft:
        rgba(236,239,244,.4);

    --discovery-gold:#d8b86c;
    --discovery-gold-bright:#f0d17d;
    --discovery-gold-soft:#c99b47;

    --discovery-blue:#75b9ea;
    --discovery-green:#63d7b4;

    --discovery-border:
        rgba(255,255,255,.09);

    --discovery-border-strong:
        rgba(255,255,255,.13);

    --discovery-surface:
        rgba(10,17,28,.84);

    --discovery-radius-lg:28px;
    --discovery-radius-md:16px;

    --discovery-ease:
        cubic-bezier(.22,.78,.2,1);
}


/* =========================================================
   02. SCREEN
========================================================= */

.discovery-screen{
    position:fixed;

    inset:0;

    z-index:9998;

    display:flex;

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

    width:100%;
    height:100dvh;

    min-width:0;
    min-height:0;

    padding:
        24px
        20px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% -4%,
            rgba(211,174,93,.14),
            transparent 34%
        ),

        radial-gradient(
            circle at 82% 56%,
            rgba(73,135,190,.045),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            var(--discovery-bg),
            var(--discovery-bg-mid) 55%,
            var(--discovery-bg-soft)
        );

    color:
        var(--discovery-text);

    opacity:1;

    transform:
        translateY(0);

    overscroll-behavior:none;

    isolation:isolate;

    transition:
        opacity .45s ease,
        transform .45s
        var(--discovery-ease);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}


/* =========================================================
   03. BOX MODEL
========================================================= */

.discovery-screen,
.discovery-screen *,
.discovery-screen *::before,
.discovery-screen *::after{
    box-sizing:border-box;
}


/* =========================================================
   04. AMBIENT LAYERS
========================================================= */

.discovery-screen::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(216,184,108,.04),
            transparent 25%
        ),

        radial-gradient(
            circle at 76% 82%,
            rgba(71,143,199,.045),
            transparent 29%
        );
}

.discovery-screen::after{
    content:"";

    position:absolute;

    top:-190px;
    left:50%;

    z-index:-1;

    width:min(800px,85vw);
    height:380px;

    transform:
        translateX(-50%);

    pointer-events:none;

    border-radius:50%;

    background:
        rgba(213,174,93,.035);

    filter:blur(80px);
}


/* =========================================================
   05. CONTENT PANEL
========================================================= */

.discovery-content{
    position:relative;

    width:100%;
    max-width:680px;

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

    margin:0;

    padding:
        34px
        40px
        36px;

    overflow-x:hidden;
    overflow-y:auto;

    border:
        1px solid
        rgba(255,255,255,.115);

    border-radius:
        var(--discovery-radius-lg);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(216,184,108,.025),
            transparent 26%
        ),

        linear-gradient(
            145deg,
            rgba(13,21,33,.9),
            rgba(7,13,22,.88)
        );

    box-shadow:
        0
        30px
        80px
        rgba(0,0,0,.42),

        inset
        0
        1px
        0
        rgba(255,255,255,.024);

    backdrop-filter:
        blur(22px)
        saturate(112%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(112%);

    overscroll-behavior-y:contain;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.discovery-content::-webkit-scrollbar{
    display:none;
}

.discovery-content::before{
    content:"";

    position:absolute;

    top:0;
    left:16%;

    width:68%;
    height:1px;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    opacity:.7;
}


/* =========================================================
   06. NAVIGATION
========================================================= */

.discovery-navigation{
    display:flex;

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

    gap:16px;

    min-height:30px;

    margin-bottom:14px;
}

.discovery-back,
.discovery-back-placeholder{
    min-width:70px;
}


/* =========================================================
   07. BACK BUTTON
========================================================= */

.discovery-back{
    padding:
        7px
        0;

    border:0;

    outline:none;

    background:transparent;

    color:
        rgba(255,255,255,.62);

    font:inherit;

    font-size:14px;
    font-weight:520;

    line-height:1;

    text-align:left;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        color .2s ease,
        transform .2s
        var(--discovery-ease);
}

.discovery-back:hover{
    color:
        var(--discovery-gold-bright);

    transform:
        translateX(-3px);
}

.discovery-back:active{
    transform:
        translateX(-1px)
        scale(.97);
}

.discovery-back:focus-visible{
    outline:
        1px solid
        rgba(240,209,125,.5);

    outline-offset:4px;
}


/* =========================================================
   08. STEP COUNT
========================================================= */

.discovery-count{
    color:
        var(--discovery-gold);

    font-size:12px;
    font-weight:720;

    line-height:1;

    letter-spacing:.16em;

    white-space:nowrap;
}


/* =========================================================
   09. PROGRESS
========================================================= */

.discovery-progress{
    position:relative;

    width:100%;
    height:4px;

    margin-bottom:25px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(255,255,255,.085);
}

.discovery-progress span{
    position:relative;

    display:block;

    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            var(--discovery-gold-soft),
            var(--discovery-gold-bright)
        );

    box-shadow:
        0
        0
        14px
        rgba(240,209,125,.18);

    transition:
        width .38s
        var(--discovery-ease);
}

.discovery-progress span::after{
    content:"";

    position:absolute;

    top:50%;
    right:0;

    width:6px;
    height:6px;

    transform:
        translate(
            1px,
            -50%
        );

    border-radius:50%;

    background:
        var(--discovery-gold-bright);

    box-shadow:
        0
        0
        9px
        rgba(240,209,125,.6);
}


/* =========================================================
   10. HEADER
========================================================= */

.discovery-header{
    min-width:0;
}

.discovery-header h1,
.discovery-completion h1{
    max-width:620px;

    margin:0;

    color:
        var(--discovery-text);

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    font-weight:620;

    line-height:1.07;

    letter-spacing:-.035em;

    text-wrap:balance;
}


/* =========================================================
   11. DESCRIPTION
========================================================= */

.discovery-description{
    max-width:590px;

    margin:
        15px
        0
        0;

    color:
        var(--discovery-muted);

    font-size:15px;

    line-height:1.58;
}


/* =========================================================
   12. OPTIONS
========================================================= */

.discovery-options{
    display:grid;

    gap:10px;

    margin-top:27px;
}


/* =========================================================
   13. OPTION BUTTON
========================================================= */

.discovery-option{
    position:relative;

    display:flex;

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

    gap:16px;

    width:100%;
    min-height:56px;

    margin:0;

    padding:
        13px
        17px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.115);

    border-radius:
        var(--discovery-radius-md);

    outline:none;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.052),
            rgba(255,255,255,.025)
        );

    color:
        rgba(248,246,241,.92);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.012);

    font:inherit;

    font-size:15px;
    font-weight:590;

    line-height:1.35;

    text-align:left;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .18s
        var(--discovery-ease),

        border-color .18s ease,

        background .18s ease,

        color .18s ease,

        box-shadow .18s ease;
}

.discovery-option::before{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 0% 50%,
            rgba(229,195,111,.06),
            transparent 34%
        );

    opacity:0;

    transition:
        opacity .18s ease;
}

.discovery-option:hover{
    transform:
        translateY(-1px);

    border-color:
        rgba(229,195,111,.42);

    background:
        rgba(229,195,111,.065);

    box-shadow:
        0
        8px
        24px
        rgba(0,0,0,.08);
}

.discovery-option:hover::before{
    opacity:1;
}

.discovery-option:active{
    transform:
        scale(.99);
}

.discovery-option:focus-visible{
    outline:
        1px solid
        rgba(229,195,111,.55);

    outline-offset:2px;
}


/* =========================================================
   14. SELECTED OPTION
========================================================= */

.discovery-option.is-selected{
    border-color:
        rgba(229,195,111,.78);

    background:
        linear-gradient(
            145deg,
            rgba(229,195,111,.15),
            rgba(229,195,111,.07)
        );

    color:#fffaf0;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(229,195,111,.09),

        0
        8px
        28px
        rgba(0,0,0,.08);
}

.discovery-option.is-selected::before{
    opacity:1;
}


/* =========================================================
   15. CHECK
========================================================= */

.discovery-check{
    position:relative;

    display:inline-flex;

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

    flex:
        0
        0
        23px;

    width:23px;
    height:23px;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:50%;

    color:
        transparent;

    font-size:13px;
    font-weight:900;

    line-height:1;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        transform .18s
        var(--discovery-ease);
}

.discovery-option.is-selected
.discovery-check{
    border-color:
        var(--discovery-gold-bright);

    background:
        var(--discovery-gold-bright);

    color:#07111d;

    box-shadow:
        0
        0
        12px
        rgba(240,209,125,.16);
}


/* =========================================================
   16. CONTINUE / ENTER
========================================================= */

.discovery-continue,
.discovery-enter{
    display:flex;

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

    width:100%;
    min-height:57px;

    margin-top:22px;

    padding:
        14px
        20px;

    border:0;

    border-radius:17px;

    outline:none;

    background:
        linear-gradient(
            110deg,
            #cca34f,
            #f1d382 55%,
            #d2a450
        );

    color:#101722;

    box-shadow:
        0
        14px
        34px
        rgba(211,170,86,.18),

        inset
        0
        1px
        0
        rgba(255,255,255,.32);

    font:inherit;

    font-size:16px;
    font-weight:760;

    line-height:1;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .18s
        var(--discovery-ease),

        opacity .18s ease,

        filter .18s ease,

        box-shadow .18s ease;
}

.discovery-continue:hover,
.discovery-enter:hover{
    transform:
        translateY(-2px);

    filter:
        brightness(1.025);

    box-shadow:
        0
        18px
        40px
        rgba(211,170,86,.24),

        inset
        0
        1px
        0
        rgba(255,255,255,.36);
}

.discovery-continue:active,
.discovery-enter:active{
    transform:
        scale(.985);
}

.discovery-continue:focus-visible,
.discovery-enter:focus-visible{
    outline:
        2px solid
        rgba(240,209,125,.55);

    outline-offset:3px;
}


/* =========================================================
   17. DISABLED CONTINUE
========================================================= */

.discovery-continue:disabled{
    opacity:.34;

    cursor:not-allowed;

    filter:saturate(.55);

    box-shadow:none;

    transform:none;
}


/* =========================================================
   18. COMPLETION
========================================================= */

.discovery-completion{
    max-width:590px;

    margin:
        0
        auto;

    padding:
        48px
        12px;

    text-align:center;
}

.discovery-completion-mark{
    position:relative;

    display:flex;

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

    width:72px;
    height:72px;

    margin:
        0
        auto
        23px;

    border:
        1px solid
        rgba(229,195,111,.62);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(229,195,111,.16),
            rgba(229,195,111,.07)
        );

    color:
        var(--discovery-gold-bright);

    box-shadow:
        0
        0
        45px
        rgba(229,195,111,.12),

        inset
        0
        1px
        0
        rgba(255,255,255,.04);

    font-size:32px;
    font-weight:800;

    line-height:1;
}

.discovery-completion-mark::after{
    content:"";

    position:absolute;

    inset:-9px;

    border:
        1px solid
        rgba(229,195,111,.07);

    border-radius:50%;
}


/* =========================================================
   19. COMPLETION LABEL
========================================================= */

.discovery-completion-label{
    margin:
        0
        0
        15px;

    color:
        var(--discovery-gold);

    font-size:11px;
    font-weight:760;

    line-height:1;

    letter-spacing:.19em;

    text-transform:uppercase;
}

.discovery-completion
.discovery-description{
    max-width:470px;

    margin-right:auto;
    margin-left:auto;
}

.discovery-enter{
    max-width:330px;

    margin:
        30px
        auto
        0;
}


/* =========================================================
   20. PROFILE SUMMARY
========================================================= */

.discovery-profile-row{
    display:grid;

    grid-template-columns:
        minmax(130px,.7fr)
        minmax(0,1.5fr);

    align-items:start;

    gap:18px;

    padding:
        13px
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.05);
}

.discovery-profile-row:last-child{
    border-bottom:0;
}

.discovery-profile-label{
    color:
        rgba(255,255,255,.48);

    font-size:13px;

    line-height:1.5;
}

.discovery-profile-value{
    min-width:0;

    color:
        rgba(255,255,255,.92);

    font-size:14px;
    font-weight:630;

    line-height:1.55;

    overflow-wrap:anywhere;
}


/* =========================================================
   21. DISCOVERY TRANSITION
========================================================= */

.discovery-screen.is-leaving{
    opacity:0;

    transform:
        translateY(-18px);

    pointer-events:none;
}

.discovery-transition-layer{
    position:fixed;

    inset:0;

    z-index:100000;

    pointer-events:none;
}


/* =========================================================
   22. BRAIN VISIBILITY
========================================================= */

body.discovery-active
.brain-fab{
    display:none !important;
}


/* =========================================================
   23. TABLET
========================================================= */

@media (max-width:820px){

    .discovery-screen{
        padding:
            18px
            16px;
    }

    .discovery-content{
        max-width:650px;

        padding:
            30px
            32px
            32px;
    }

}


/* =========================================================
   24. MOBILE
========================================================= */

@media (max-width:768px){

    .discovery-screen{
        display:block;

        width:100%;
        height:100dvh;

        padding:
            max(
                12px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            12px
            max(
                12px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        overflow:hidden;

        transform:none;
    }

    .discovery-content{
        width:100%;
        max-width:680px;

        height:100%;

        max-height:none;

        margin:
            0
            auto;

        padding:
            23px
            19px
            calc(
                18px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        overflow-x:hidden;
        overflow-y:auto;

        border-radius:22px;

        overscroll-behavior-y:contain;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }

    .discovery-content::-webkit-scrollbar{
        display:none;
    }


    /* -----------------------------------------------------
       MOBILE NAVIGATION
    ----------------------------------------------------- */

    .discovery-navigation{
        min-height:28px;

        margin-bottom:10px;
    }

    .discovery-back,
    .discovery-back-placeholder{
        min-width:62px;
    }

    .discovery-back{
        font-size:12px;
    }

    .discovery-count{
        font-size:10px;
    }


    /* -----------------------------------------------------
       MOBILE PROGRESS
    ----------------------------------------------------- */

    .discovery-progress{
        height:4px;

        margin-bottom:20px;
    }


    /* -----------------------------------------------------
       MOBILE HEADINGS
    ----------------------------------------------------- */

    .discovery-header h1,
    .discovery-completion h1{
        font-size:
            clamp(
                28px,
                8.7vw,
                38px
            );

        line-height:1.07;
    }

    .discovery-description{
        margin-top:12px;

        font-size:14px;

        line-height:1.48;
    }


    /* -----------------------------------------------------
       MOBILE OPTIONS
    ----------------------------------------------------- */

    .discovery-options{
        gap:8px;

        margin-top:21px;
    }

    .discovery-option{
        min-height:53px;

        padding:
            11px
            14px;

        border-radius:14px;

        font-size:14px;
    }

    .discovery-check{
        width:21px;
        height:21px;

        flex-basis:21px;

        font-size:11px;
    }


    /* -----------------------------------------------------
       MOBILE CONTINUE
    ----------------------------------------------------- */

    button.discovery-continue{
        position:sticky;

        right:auto;
        bottom:
            calc(
                4px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
        left:auto;

        z-index:20;

        width:100%;

        min-height:54px;

        margin-top:18px;

        border-radius:15px;

        box-shadow:
            0
            16px
            36px
            rgba(0,0,0,.46),

            0
            10px
            28px
            rgba(211,170,86,.14);
    }

    button.discovery-continue:disabled{
        opacity:.4;
    }


    /* -----------------------------------------------------
       MOBILE COMPLETION
    ----------------------------------------------------- */

    .discovery-completion{
        display:flex;

        flex-direction:column;

        justify-content:center;

        min-height:
            calc(
                100% - 30px
            );

        padding:
            28px
            4px;
    }

    .discovery-completion-mark{
        width:64px;
        height:64px;

        margin-bottom:19px;

        font-size:28px;
    }

    .discovery-enter{
        min-height:54px;

        margin-top:24px;
    }


    /* -----------------------------------------------------
       MOBILE PROFILE
    ----------------------------------------------------- */

    .discovery-profile-row{
        grid-template-columns:1fr;

        gap:4px;

        padding:
            10px
            0;
    }

    .discovery-profile-label{
        font-size:11px;
    }

    .discovery-profile-value{
        font-size:13px;
    }


    /* -----------------------------------------------------
       MOBILE LEAVING
    ----------------------------------------------------- */

    .discovery-screen.is-leaving{
        transform:
            translateY(-18px);
    }

}

/* =========================================================
   25. SMALL MOBILE
========================================================= */

@media (max-width:600px){

    .discovery-screen{
        padding:
            max(
                8px,
                env(
                    safe-area-inset-top,
                    0px
                )
            )
            8px
            max(
                8px,
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }

    .discovery-content{
        padding:
            21px
            16px
            calc(
                15px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        border-radius:20px;
    }

    .discovery-header h1,
    .discovery-completion h1{
        font-size:
            clamp(
                27px,
                8.8vw,
                36px
            );
    }

    .discovery-description{
        font-size:13px;
    }

}


/* =========================================================
   26. VERY SMALL MOBILE
========================================================= */

@media (max-width:390px){

    .discovery-content{
        padding-left:14px;
        padding-right:14px;
    }

    .discovery-navigation{
        margin-bottom:8px;
    }

    .discovery-back{
        font-size:11px;
    }

    .discovery-count{
        font-size:9px;

        letter-spacing:.12em;
    }

    .discovery-progress{
        margin-bottom:17px;
    }

    .discovery-header h1,
    .discovery-completion h1{
        font-size:
            clamp(
                25px,
                8.5vw,
                33px
            );
    }

    .discovery-description{
        margin-top:10px;

        font-size:12px;

        line-height:1.45;
    }

    .discovery-options{
        gap:7px;

        margin-top:18px;
    }

    .discovery-option{
        min-height:49px;

        padding:
            10px
            12px;

        border-radius:13px;

        font-size:13px;
    }

    .discovery-check{
        width:20px;
        height:20px;

        flex-basis:20px;
    }

    button.discovery-continue{
        min-height:50px;

        font-size:14px;
    }

}


/* =========================================================
   27. SHORT VIEWPORT
========================================================= */

@media (max-height:760px){

    .discovery-screen{
        align-items:flex-start;
    }

    .discovery-content{
        max-height:
            calc(
                100dvh - 28px
            );

        padding-top:24px;
        padding-bottom:24px;
    }

    .discovery-navigation{
        margin-bottom:9px;
    }

    .discovery-progress{
        margin-bottom:18px;
    }

    .discovery-header h1,
    .discovery-completion h1{
        font-size:
            clamp(
                27px,
                3.6vw,
                39px
            );
    }

    .discovery-description{
        margin-top:10px;

        font-size:13px;

        line-height:1.45;
    }

    .discovery-options{
        gap:7px;

        margin-top:18px;
    }

    .discovery-option{
        min-height:48px;

        padding:
            10px
            14px;

        font-size:13px;
    }

    .discovery-continue,
    .discovery-enter{
        min-height:49px;

        margin-top:16px;

        font-size:14px;
    }

    .discovery-completion{
        padding-top:30px;
        padding-bottom:30px;
    }

    .discovery-completion-mark{
        width:60px;
        height:60px;

        margin-bottom:16px;

        font-size:26px;
    }

}


/* =========================================================
   28. MOBILE + SHORT VIEWPORT
========================================================= */

@media
(
    max-width:768px
)
and
(
    max-height:760px
){

    .discovery-content{
        height:100%;

        max-height:none;

        padding-top:17px;
    }

    .discovery-header h1,
    .discovery-completion h1{
        font-size:
            clamp(
                25px,
                7.8vw,
                32px
            );
    }

    .discovery-description{
        font-size:12px;
    }

    .discovery-options{
        margin-top:15px;
    }

    .discovery-option{
        min-height:45px;

        padding:
            8px
            12px;
    }

    button.discovery-continue{
        min-height:48px;

        margin-top:14px;
    }

}


/* =========================================================
   29. VERY SHORT VIEWPORT
========================================================= */

@media (max-height:620px){

    .discovery-screen{
        padding-top:5px;
        padding-bottom:5px;
    }

    .discovery-content{
        max-height:
            calc(
                100dvh - 10px
            );

        padding:
            14px
            18px;
    }

    .discovery-navigation{
        min-height:23px;

        margin-bottom:5px;
    }

    .discovery-progress{
        height:3px;

        margin-bottom:12px;
    }

    .discovery-header h1,
    .discovery-completion h1{
        font-size:
            clamp(
                23px,
                3vw,
                31px
            );
    }

    .discovery-description{
        margin-top:7px;

        font-size:11px;

        line-height:1.35;
    }

    .discovery-options{
        gap:5px;

        margin-top:12px;
    }

    .discovery-option{
        min-height:40px;

        padding:
            7px
            11px;

        border-radius:11px;

        font-size:12px;
    }

    .discovery-check{
        width:18px;
        height:18px;

        flex-basis:18px;

        font-size:9px;
    }

    .discovery-continue,
    .discovery-enter{
        min-height:43px;

        margin-top:11px;

        padding:
            10px
            14px;

        border-radius:12px;

        font-size:13px;
    }

    .discovery-completion{
        padding:
            18px
            4px;
    }

    .discovery-completion-mark{
        width:50px;
        height:50px;

        margin-bottom:12px;

        font-size:22px;
    }

    .discovery-completion-label{
        margin-bottom:10px;

        font-size:9px;
    }

}


/* =========================================================
   30. LANDSCAPE MOBILE
========================================================= */

@media
(
    orientation:landscape
)
and
(
    max-height:520px
){

    .discovery-screen{
        padding:
            4px
            max(
                8px,
                env(
                    safe-area-inset-right,
                    0px
                )
            )
            4px
            max(
                8px,
                env(
                    safe-area-inset-left,
                    0px
                )
            );
    }

    .discovery-content{
        max-width:760px;

        height:100%;

        padding:
            12px
            20px;

        border-radius:17px;
    }

    .discovery-header h1{
        font-size:
            clamp(
                22px,
                4vw,
                29px
            );
    }

    .discovery-options{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:6px;
    }

    .discovery-option{
        min-height:38px;
    }

    button.discovery-continue{
        position:relative;

        bottom:auto;

        min-height:41px;
    }

}


/* =========================================================
   31. HOVER CAPABLE DEVICES
========================================================= */

@media
(
    hover:hover
)
and
(
    pointer:fine
){

    .discovery-option:hover
    .discovery-check{
        border-color:
            rgba(229,195,111,.45);
    }

}


/* =========================================================
   32. TOUCH DEVICES
========================================================= */

@media (hover:none){

    .discovery-back:hover{
        color:
            rgba(255,255,255,.62);

        transform:none;
    }

    .discovery-option:hover{
        transform:none;

        border-color:
            rgba(255,255,255,.115);

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.052),
                rgba(255,255,255,.025)
            );

        box-shadow:none;
    }

    .discovery-option:hover::before{
        opacity:0;
    }

    .discovery-option.is-selected:hover{
        border-color:
            rgba(229,195,111,.78);

        background:
            linear-gradient(
                145deg,
                rgba(229,195,111,.15),
                rgba(229,195,111,.07)
            );
    }

    .discovery-option.is-selected:hover::before{
        opacity:1;
    }

    .discovery-continue:hover,
    .discovery-enter:hover{
        transform:none;

        filter:none;
    }

}


/* =========================================================
   33. REDUCED MOTION
========================================================= */

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

    .discovery-screen,
    .discovery-progress span,
    .discovery-back,
    .discovery-option,
    .discovery-check,
    .discovery-continue,
    .discovery-enter{
        transition:none;
    }

}


/* =========================================================
   34. HIGH CONTRAST
========================================================= */

@media (prefers-contrast:more){

    .discovery-content{
        border-color:
            rgba(255,255,255,.18);
    }

    .discovery-option{
        border-color:
            rgba(255,255,255,.18);
    }

    .discovery-description{
        color:
            rgba(255,255,255,.78);
    }

}


/* =========================================================
   35. IOS VIEWPORT STABILITY
========================================================= */

@supports (-webkit-touch-callout:none){

    .discovery-screen{
        height:100%;

        min-height:
            -webkit-fill-available;
    }

}


/* =========================================================
   36. DYNAMIC VIEWPORT
========================================================= */

@supports (height:100dvh){

    .discovery-screen{
        height:100dvh;
    }

}


/* =========================================================
   37. FINAL STRUCTURE SAFETY
========================================================= */

.discovery-screen,
.discovery-content,
.discovery-navigation,
.discovery-header,
.discovery-options,
.discovery-option,
.discovery-profile-row,
.discovery-profile-value{
    min-width:0;
}

.discovery-screen button{
    font-family:inherit;
}

.discovery-description,
.discovery-profile-value,
.discovery-option{
    overflow-wrap:break-word;
}


/* =========================================================
   38. FINAL SCROLL SAFETY
   Document stays fixed.
   Discovery panel owns overflow.
========================================================= */

.discovery-screen{
    overscroll-behavior:none;
}

.discovery-content{
    overscroll-behavior-y:contain;
}


/* =========================================================
   END — VAERO ENGINE DISCOVERY JOURNEY
========================================================= */