/* =========================================================
   FINAL EXPERIENCE
========================================================= */


/* =========================================================
   NO FLOATING BUTTONS
========================================================= */

.nav-text,
.resource-nav-trigger,
.hero-button,
.analyze-button,
.analyze-btn,
.media-tab,
.final-media-option,
.final-select-trigger,
.final-select-option,
.modal-button,
.profile-action,
.clear-history,
.history-entry,
.resource-link{
    transition:
        background .28s var(--ease),
        border-color .28s var(--ease),
        color .28s var(--ease),
        box-shadow .28s var(--ease),
        opacity .28s var(--ease) !important;
}


.nav-text:hover,
.resource-nav-trigger:hover,
.hero-button:hover,
.analyze-button:hover:not(:disabled),
.analyze-btn:hover:not(:disabled),
.media-tab:hover,
.final-media-option:hover,
.final-select-trigger:hover,
.final-select-option:hover,
.modal-button:hover,
.profile-action:hover,
.clear-history:hover,
.history-entry:hover,
.resource-link:hover{
    transform:none !important;
}


.nav-text:hover,
.resource-nav-trigger:hover{
    color:var(--text) !important;

    background:
        rgba(20,120,255,.045) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(20,120,255,.06);
}


.hero-button:hover,
.modal-button:hover{
    box-shadow:
        0 0 0 4px
        rgba(20,120,255,.045) !important;
}


.analyze-button:hover:not(:disabled),
.analyze-btn:hover:not(:disabled){
    opacity:.95;

    box-shadow:
        0 0 0 4px
        rgba(20,120,255,.05),
        0 10px 28px
        rgba(0,0,0,.08) !important;
}


.profile-button:hover{
    transform:none !important;
}


.profile-button:hover svg{
    transform:none !important;
}


/* =========================================================
   DETECTOR — CLEAN UNSELECTED START
========================================================= */

.final-native-media-wrap{
    display:none !important;
}


#mediaSelect.final-native-hidden,
#formatSelect.final-native-hidden{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    opacity:0 !important;

    pointer-events:none !important;

    overflow:hidden !important;
}


.final-media-selector{
    margin-top:8px;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:5px;

    padding:5px;

    border:
        1px solid
        var(--line);

    border-radius:17px;

    background:
        rgba(18,18,22,.035);
}


body.dark
.final-media-selector{
    background:
        rgba(255,255,255,.03);
}


.final-media-option{
    min-height:40px;

    padding:
        0 8px;

    border-radius:12px;

    color:
        var(--muted);

    font-size:.73rem;

    font-weight:590;

    border:
        1px solid
        transparent;
}


.final-media-option:hover{
    color:var(--text);

    background:
        rgba(20,120,255,.04);
}


.final-media-option.active{
    color:var(--text);

    background:
        var(--surface);

    border-color:
        rgba(20,120,255,.08);

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.05);
}


body.dark
.final-media-option.active{
    background:
        rgba(255,255,255,.07);
}


.detector-controls{
    grid-template-columns:
        minmax(0,1fr)
        126px !important;
}


.final-format-host{
    position:relative;

    min-width:0;
}


.final-select{
    position:relative;

    width:100%;
}


.final-select-trigger{
    width:100%;

    min-height:42px;

    padding:
        0 13px;

    border:
        1px solid
        var(--line);

    border-radius:13px;

    display:flex;

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

    gap:12px;

    text-align:left;

    background:
        rgba(255,255,255,.56);

    color:
        var(--text);

    font-size:.72rem;
}


body.dark
.final-select-trigger{
    background:
        rgba(255,255,255,.04);
}


.final-select-trigger:disabled{
    opacity:.43;

    cursor:not-allowed;
}


.final-select-trigger:not(:disabled):hover{
    border-color:
        rgba(20,120,255,.22);

    background:
        rgba(20,120,255,.03);

    box-shadow:
        0 0 0 3px
        rgba(20,120,255,.025);
}


.final-select-copy{
    min-width:0;

    display:flex;

    align-items:center;

    gap:9px;
}


.final-select-icon{
    width:25px;
    height:25px;

    flex:0 0 auto;

    border-radius:8px;

    display:grid;

    place-items:center;

    background:
        rgba(20,120,255,.075);

    color:var(--blue);

    font-size:.57rem;

    font-weight:780;
}


.final-select-label{
    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.final-select-chevron{
    color:var(--muted);

    font-size:.58rem;

    transition:
        transform .32s
        var(--ease);
}


.final-select.open
.final-select-chevron{
    transform:
        rotate(180deg);
}


.final-select-menu{
    position:absolute;

    left:0;
    right:0;

    bottom:
        calc(100% + 8px);

    z-index:150;

    padding:6px;

    border:
        1px solid
        var(--line);

    border-radius:15px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 20px 55px
        rgba(0,0,0,.13);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(6px)
        scale(.985);

    filter:
        blur(2px);

    transition:
        opacity .27s var(--ease),
        transform .27s var(--ease),
        filter .27s var(--ease),
        visibility .27s;
}


body.dark
.final-select-menu{
    background:
        rgba(15,16,22,.98);
}


.final-select.open
.final-select-menu{
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);
}


.final-select-option{
    width:100%;

    min-height:39px;

    padding:
        0 10px;

    border-radius:10px;

    display:flex;

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

    gap:10px;

    color:var(--muted);

    font-size:.7rem;
}


.final-select-option:hover{
    color:var(--text);

    background:
        rgba(20,120,255,.055);
}


.final-select-option.active{
    color:var(--text);

    background:
        rgba(20,120,255,.075);
}


.final-option-check{
    width:20px;
    height:20px;

    border-radius:50%;

    display:grid;

    place-items:center;

    background:
        rgba(20,120,255,.055);

    color:
        transparent;

    font-size:.58rem;
}


.final-select-option.active
.final-option-check{
    color:var(--blue);

    background:
        rgba(20,120,255,.12);
}


.drop-zone:hover,
.drop-zone.dragging{
    transform:none !important;

    border-color:
        rgba(20,120,255,.36) !important;

    background:
        rgba(20,120,255,.025) !important;
}


.drop-zone:hover
.upload-orb{
    transform:none !important;
}


/* =========================================================
   RESOURCE — DIRECTLY BESIDE LOGO
========================================================= */

.nav-inner{
    gap:7px !important;
}


.nav-inner > .brand{
    flex:0 0 auto;
}


.nav-inner > .resource-wrap{
    flex:0 0 auto;

    margin-left:1px;
    margin-right:6px;
}


.nav-right{
    margin-left:auto !important;
}


.resource-wrap{
    position:relative;
}


.resource-nav-trigger{
    min-height:37px;

    padding:
        0 12px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:5px;

    color:var(--muted);

    font-size:.8rem;

    font-weight:520;
}


.resource-chevron{
    font-size:.55rem;

    transition:
        transform .32s
        var(--ease);
}


.resource-wrap.open
.resource-chevron{
    transform:
        rotate(180deg);
}


.resource-menu{
    position:fixed;

    top:var(--nav-h);
    left:50%;

    z-index:1270;

    width:
        min(
            900px,
            calc(100vw - 46px)
        );

    border:
        1px solid
        var(--line);

    border-radius:
        0 0 24px 24px;

    overflow:hidden;

    background:
        rgba(255,255,255,.975);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.14);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateX(-50%)
        translateY(-8px)
        scale(.992);

    filter:
        blur(2px);

    transition:
        opacity .32s var(--ease),
        transform .32s var(--ease),
        filter .32s var(--ease),
        visibility .32s;
}


body.dark
.resource-menu{
    background:
        rgba(13,14,20,.98);
}


.resource-wrap.open
.resource-menu{
    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);

    filter:
        blur(0);
}


.final-resource-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);
}


.final-resource-group{
    padding:
        27px 25px;
}


.final-resource-group +
.final-resource-group{
    border-left:
        1px solid
        var(--line);
}


.final-resource-label{
    color:var(--muted-2);

    font-size:.58rem;

    font-weight:760;

    letter-spacing:.1em;

    text-transform:uppercase;
}


.resource-link{
    margin-top:13px;

    padding:14px;

    border:
        1px solid
        transparent;

    border-radius:16px;

    display:grid;

    grid-template-columns:
        39px
        minmax(0,1fr)
        auto;

    gap:11px;

    align-items:center;
}


.resource-link:hover{
    background:
        rgba(20,120,255,.045) !important;

    border-color:
        rgba(20,120,255,.09) !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(20,120,255,.02) !important;
}


.final-resource-icon{
    width:39px;
    height:39px;

    border-radius:12px;

    display:grid;

    place-items:center;

    background:
        linear-gradient(
            145deg,
            rgba(20,120,255,.11),
            rgba(255,92,168,.07),
            rgba(255,181,143,.08)
        );

    color:var(--blue);

    font-size:.61rem;

    font-weight:780;
}


.resource-link strong{
    display:block;

    color:var(--text);

    font-size:.76rem;
}


.resource-link p{
    margin-top:4px;

    color:var(--muted);

    font-size:.61rem;

    line-height:1.45;
}


.final-resource-arrow{
    color:var(--muted);

    font-size:.74rem;
}


/* =========================================================
   PAGE MENU BLUR
========================================================= */

.page-menu-blur{
    position:fixed;

    inset:
        var(--nav-h)
        0
        0;

    z-index:1080;

    pointer-events:none;

    opacity:0;

    visibility:hidden;

    background:
        rgba(20,20,24,.055);

    backdrop-filter:
        blur(0);

    -webkit-backdrop-filter:
        blur(0);

    transition:
        opacity .38s var(--ease),
        backdrop-filter .38s var(--ease),
        -webkit-backdrop-filter .38s var(--ease),
        visibility .38s;
}


body.menu-background-blur
.page-menu-blur{
    opacity:1;

    visibility:visible;

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);
}


/* =========================================================
   RESULT — LARGE + SCROLLABLE + DETAILED
========================================================= */

#resultLayer{
    padding:
        16px !important;
}


.result-modal{
    width:
        min(
            1180px,
            calc(100vw - 34px)
        ) !important;

    max-height:
        calc(100svh - 32px) !important;

    overflow-y:auto !important;

    overflow-x:hidden !important;

    overscroll-behavior:
        contain;

    border-radius:
        30px !important;

    scrollbar-width:
        thin;
}


.result-modal::-webkit-scrollbar{
    width:7px;
}


.result-modal::-webkit-scrollbar-thumb{
    border-radius:999px;

    background:
        rgba(120,125,138,.25);
}


.result-modal
.modal-top{
    position:sticky;

    top:0;

    z-index:30;

    min-height:62px;

    padding:
        0 25px !important;

    background:
        rgba(255,255,255,.88);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid
        var(--line);
}


body.dark
.result-modal
.modal-top{
    background:
        rgba(13,14,20,.9);
}


.result-grid{
    grid-template-columns:
        360px
        minmax(0,1fr) !important;

    align-items:start !important;

    gap:34px !important;

    padding:
        30px !important;
}


.score-panel{
    position:sticky;

    top:82px;

    padding:
        15px !important;

    border-radius:
        24px !important;
}


.final-result-preview{
    width:100%;

    aspect-ratio:
        4 / 3;

    overflow:hidden;

    border:
        1px solid
        var(--line);

    border-radius:
        18px;

    display:flex;

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

    background:
        linear-gradient(
            145deg,
            rgba(20,120,255,.07),
            rgba(255,92,168,.035),
            rgba(255,181,143,.045)
        );
}


.final-result-preview img,
.final-result-preview video{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    background:#08090d;
}


.final-result-preview audio{
    width:
        calc(100% - 24px);
}


.final-preview-placeholder{
    padding:
        30px 20px;

    text-align:center;

    color:var(--muted);
}


.final-preview-placeholder strong{
    display:block;

    color:var(--text);

    font-size:.76rem;
}


.final-preview-placeholder span{
    display:block;

    margin-top:7px;

    font-size:.62rem;

    line-height:1.5;
}


.final-result-file{
    padding:
        13px 3px
        16px;

    margin-bottom:
        15px;

    border-bottom:
        1px solid
        var(--line);
}


.final-result-file strong{
    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text);

    font-size:.76rem;
}


.final-result-file span{
    display:block;

    margin-top:5px;

    color:var(--muted);

    font-size:.61rem;
}


.score-ring{
    width:170px !important;
    height:170px !important;

    margin:
        18px auto
        13px !important;
}


.score-ring::after{
    width:137px !important;
    height:137px !important;
}


.score-value{
    font-size:
        2rem !important;
}


.report h2{
    font-size:
        clamp(
            2rem,
            4vw,
            3.15rem
        ) !important;

    line-height:1;

    letter-spacing:
        -.055em !important;
}


.report-copy{
    max-width:
        720px;

    font-size:
        .81rem !important;

    line-height:
        1.7 !important;
}


.final-result-sections{
    margin-top:
        24px;

    display:grid;

    gap:14px;
}


.final-result-section{
    padding:
        20px;

    border:
        1px solid
        var(--line);

    border-radius:
        20px;

    background:
        rgba(18,18,22,.018);
}


body.dark
.final-result-section{
    background:
        rgba(255,255,255,.022);
}


.final-result-kicker{
    color:
        var(--blue);

    font-size:.58rem;

    font-weight:760;

    letter-spacing:.09em;

    text-transform:uppercase;
}


.final-result-section h3{
    margin-top:
        7px;

    font-size:
        1.05rem;

    letter-spacing:
        -.025em;
}


.final-result-section p{
    margin-top:
        8px;

    color:
        var(--muted);

    font-size:.7rem;

    line-height:
        1.65;
}


.final-result-grid{
    margin-top:
        15px;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:8px;
}


.final-detail{
    min-height:
        115px;

    padding:
        14px;

    border-radius:
        15px;

    border:
        1px solid
        var(--line);

    background:
        rgba(20,120,255,.018);
}


.final-detail span{
    display:block;

    color:
        var(--muted-2);

    font-size:
        .55rem;

    font-weight:
        720;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;
}


.final-detail strong{
    display:block;

    margin-top:
        7px;

    color:
        var(--text);

    font-size:
        .78rem;

    line-height:
        1.35;
}


.final-detail p{
    margin-top:
        6px;

    font-size:
        .62rem;

    line-height:
        1.5;
}


.final-region-grid{
    margin-top:
        13px;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:7px;
}


.final-region{
    min-height:
        75px;

    padding:
        11px;

    border-radius:
        13px;

    border:
        1px solid
        var(--line);

    background:
        rgba(20,120,255,.025);
}


.final-region strong{
    display:block;

    font-size:.68rem;
}


.final-region span{
    display:block;

    margin-top:
        5px;

    color:var(--muted);

    font-size:.58rem;

    line-height:1.4;
}


.final-segments{
    margin-top:
        12px;

    display:grid;

    gap:6px;
}


.final-segment{
    padding:
        10px 12px;

    border-radius:
        12px;

    border:
        1px solid
        var(--line);

    display:flex;

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

    gap:15px;

    color:var(--muted);

    font-size:.62rem;
}


.final-segment strong{
    color:var(--text);

    font-size:.64rem;
}


.meta-grid{
    margin-top:
        17px !important;
}


.evidence{
    margin-top:
        17px !important;
}


.evidence-body{
    max-height:none !important;
}


.history-entry{
    cursor:pointer !important;

    position:relative;

    padding-right:
        42px !important;
}


.history-entry::after{
    content:"→";

    position:absolute;

    right:15px;
    top:50%;

    transform:
        translateY(-50%);

    color:
        var(--muted);
}


.history-entry:hover{
    background:
        rgba(20,120,255,.035) !important;

    border-color:
        rgba(20,120,255,.10) !important;
}


/* =========================================================
   REAL APPLE-LIKE SCROLL-DRIVEN WALKTHROUGH

   Page scrolls normally.
   Walkthrough pins only while progress moves slides.
========================================================= */

.walkthrough{
    position:relative !important;

    height:
        350vh !important;

    min-height:
        2400px;

    margin-top:
        90px !important;

    padding:
        0 !important;

    overflow:
        visible !important;
}


.final-walkthrough-pin{
    position:
        sticky;

    top:
        var(--nav-h);

    height:
        calc(
            100svh -
            var(--nav-h)
        );

    min-height:
        620px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

    padding:
        35px 0
        30px;
}


.walkthrough-head{
    flex:
        0 0 auto;
}


.walkthrough-buttons{
    display:none !important;
}


.slide-dots{
    display:none !important;
}


.slides-window{
    width:100%;

    margin-top:
        28px !important;

    overflow:hidden !important;
}


.slides-track{
    display:flex !important;

    width:100%;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition:
        none !important;

    will-change:
        transform;
}


.slide{
    min-width:
        100% !important;

    width:
        100% !important;

    flex:
        0 0
        100% !important;

    opacity:.28;

    transform:
        scale(.975);

    filter:
        blur(3px);

    transition:
        opacity .38s var(--ease),
        transform .38s var(--ease),
        filter .38s var(--ease) !important;
}


.slide.final-active{
    opacity:1;

    transform:
        scale(1);

    filter:
        blur(0);
}


/* =========================================================
   TOGGLE MOTION
========================================================= */

.switch{
    transform:none !important;

    transition:
        background .38s var(--ease),
        box-shadow .38s var(--ease) !important;
}


.switch:hover{
    transform:none !important;

    box-shadow:
        0 0 0 4px
        rgba(20,120,255,.035);
}


.switch::after{
    transition:
        transform .38s
        cubic-bezier(
            .34,
            1.56,
            .64,
            1
        ),
        box-shadow .32s var(--ease),
        background .32s var(--ease) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .result-grid{
        grid-template-columns:
            1fr !important;
    }


    .score-panel{
        position:relative;

        top:auto;
    }


    .final-result-grid{
        grid-template-columns:
            1fr;
    }


    .final-resource-grid{
        grid-template-columns:
            1fr;

        max-height:
            72vh;

        overflow:auto;
    }


    .final-resource-group +
    .final-resource-group{
        border-left:0;

        border-top:
            1px solid
            var(--line);
    }


    .walkthrough{
        min-height:
            2100px;
    }


    .final-walkthrough-pin{
        min-height:
            560px;
    }

}


@media(max-width:700px){

    .final-media-selector{
        grid-template-columns:
            1fr;
    }


    .detector-controls{
        grid-template-columns:
            1fr !important;
    }


    .result-modal{
        width:
            calc(
                100vw -
                16px
            ) !important;
    }


    .result-grid{
        padding:
            18px !important;
    }


    .walkthrough{
        height:
            330vh !important;
    }

}


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

    .slide{
        transition:none !important;
    }

}



/* WALKTHROUGH-HARD-PIN-FIX-START */


/*
   CRITICAL:
   overflow:hidden on .deep-section prevents the sticky walkthrough
   from behaving like a proper viewport-pinned sequence.

   overflow:clip keeps the visual clipping without turning this
   ancestor into the sticky scroll container.
*/

.deep-section{
    overflow:
        clip !important;
}


/*
   The walkthrough itself is a tall SCROLL TIMELINE.

   The page still scrolls normally.
   The content inside stays pinned while this section is active.
*/

.walkthrough{
    position:
        relative !important;

    height:
        530vh !important;

    min-height:
        3600px !important;

    padding:
        0 !important;

    margin-top:
        95px !important;

    overflow:
        visible !important;

    contain:
        none !important;
}


/*
   The reveal transform can also interfere with sticky descendants.

   Walkthrough has its own animation system now, so don't transform
   the actual sticky parent.
*/

.walkthrough.reveal,
.walkthrough.reveal.in-view{
    opacity:
        1 !important;

    transform:
        none !important;

    filter:
        none !important;
}


/*
   This is the pinned screen.
*/

.final-walkthrough-pin{
    position:
        sticky !important;

    top:
        var(--nav-h) !important;

    width:
        100%;

    height:
        calc(
            100svh -
            var(--nav-h)
        ) !important;

    min-height:
        560px !important;

    padding:
        34px 0
        28px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    overflow:
        hidden !important;

    transform:
        none !important;

    isolation:
        isolate;
}


/*
   Scroll controls the slideshow now.
   No arrows.
*/

.walkthrough-buttons{
    display:
        none !important;
}


.slide-dots{
    display:
        none !important;
}


/*
   Genuine horizontal slide track.
*/

.slides-window{
    width:
        100% !important;

    overflow:
        hidden !important;

    margin-top:
        30px !important;
}


.slides-track{
    width:
        100% !important;

    display:
        flex !important;

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;

    transition:
        none !important;
}


.slide{
    flex:
        0 0
        100% !important;

    width:
        100% !important;

    min-width:
        100% !important;

    opacity:
        .22;

    transform:
        scale(.978);

    filter:
        blur(3px);

    transition:
        opacity .42s var(--ease),
        transform .42s var(--ease),
        filter .42s var(--ease) !important;
}


.slide.final-active{
    opacity:
        1;

    transform:
        scale(1);

    filter:
        blur(0);
}


/*
   Makes the pinned section visually feel fixed instead of
   moving vertically while the slideshow changes.
*/

.walkthrough-head{
    flex:
        0 0 auto;
}


@media(max-width:900px){

    .walkthrough{
        height:
            500vh !important;

        min-height:
            3100px !important;
    }


    .final-walkthrough-pin{
        min-height:
            500px !important;
    }

}


/* WALKTHROUGH-HARD-PIN-FIX-END */



/* FINAL-SEAMLESS-POLISH-START */


/* =========================================================
   INFO STRIP — TEXT ONLY
========================================================= */

.info-strip-inner{
    gap:14px !important;
}


.info-strip-message{
    font-weight:510;

    letter-spacing:
        -.006em;
}


.notice-icon{
    display:none !important;
}


/* =========================================================
   RESOURCES ARROW — SLIGHTLY BIGGER
========================================================= */

.resource-chevron{
    margin-left:
        4px !important;

    font-size:
        .78rem !important;

    line-height:
        1 !important;

    font-weight:
        650;

    transform-origin:
        center center;
}


.resource-wrap.open
.resource-chevron{
    transform:
        rotate(180deg) !important;
}


/* =========================================================
   WALKTHROUGH — MORE SEAMLESS
========================================================= */

/*
   Keep the long pinned experience that worked,
   but give the transitions more breathing room.
*/

.walkthrough{
    height:
        590vh !important;

    min-height:
        4000px !important;

    border-top:
        0 !important;
}


/*
   Fade the section into the surrounding dark page instead
   of looking like a separate card/box.
*/

.final-walkthrough-pin{
    padding:
        40px 0
        36px !important;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(105,151,255,.055),
            transparent 38%
        );
}


/*
   Header becomes quieter so the slides themselves feel
   like the continuation of the page.
*/

.walkthrough-head{
    max-width:
        900px;

    margin-bottom:
        5px;

    opacity:
        .92;
}


.walkthrough-head h3{
    font-size:
        clamp(
            1.35rem,
            2.5vw,
            1.9rem
        ) !important;

    letter-spacing:
        -.04em !important;
}


.walkthrough-head p{
    max-width:
        660px !important;

    margin-top:
        8px !important;

    color:
        #aeb4c0 !important;

    line-height:
        1.65 !important;
}


/* no controls */

.walkthrough-buttons,
.slide-dots{
    display:
        none !important;
}


/*
   More breathing room around horizontal content.
*/

.slides-window{
    margin-top:
        38px !important;

    overflow:
        hidden !important;
}


/*
   Keep GPU transform smooth.
*/

.slides-track{
    display:
        flex !important;

    width:
        100% !important;

    transform:
        translate3d(
            0,
            0,
            0
        );

    will-change:
        transform;

    backface-visibility:
        hidden;

    perspective:
        1000px;

    transition:
        none !important;
}


/*
   Slide itself is not a card.
*/

.slide{
    position:
        relative;

    flex:
        0 0
        100% !important;

    width:
        100% !important;

    min-width:
        100% !important;

    min-height:
        440px;

    padding:
        22px 2px
        22px 0 !important;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(330px,.92fr) !important;

    gap:
        clamp(
            50px,
            8vw,
            110px
        ) !important;

    align-items:
        center !important;

    opacity:
        .12;

    transform:
        translate3d(
            0,
            14px,
            0
        )
        scale(.992);

    filter:
        blur(5px);

    backface-visibility:
        hidden;

    transition:
        opacity .55s var(--ease),
        filter .55s var(--ease),
        transform .55s var(--ease) !important;
}


/*
   Vertical line makes the content feel editorial instead
   of "two boxes".
*/

.slide::after{
    content:"";

    position:absolute;

    top:8%;
    bottom:8%;

    left:
        calc(
            54% +
            12px
        );

    width:
        1px;

    background:
        linear-gradient(
            transparent,
            rgba(255,255,255,.10) 18%,
            rgba(255,255,255,.10) 82%,
            transparent
        );

    opacity:
        .8;
}


.slide.final-active{
    opacity:
        1;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    filter:
        blur(0);
}


/* =========================================================
   SLIDE TYPOGRAPHY
========================================================= */

.slide-copy{
    padding-right:
        12px;
}


.slide-copy small{
    display:block;

    margin-bottom:
        14px;

    color:
        #83b9ff !important;

    font-size:
        .62rem !important;

    font-weight:
        730;

    letter-spacing:
        .105em !important;
}


.slide-copy h4{
    max-width:
        620px;

    font-size:
        clamp(
            2rem,
            4.6vw,
            4rem
        ) !important;

    line-height:
        .99 !important;

    letter-spacing:
        -.055em !important;

    font-weight:
        690 !important;
}


.slide-copy > p{
    max-width:
        590px;

    margin-top:
        18px !important;

    color:
        #b9bec8 !important;

    font-size:
        .8rem !important;

    line-height:
        1.72 !important;
}


/*
   Remove the "box list" feeling.
*/

.slide-points{
    margin-top:
        24px !important;

    display:grid;

    gap:
        0 !important;
}


.slide-points li{
    padding:
        12px 0 !important;

    border-top:
        1px solid
        rgba(255,255,255,.065);

    background:
        transparent !important;

    border-radius:
        0 !important;
}


.slide-points li:last-child{
    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}


.slide-points i{
    background:
        transparent !important;

    border:
        1px solid
        rgba(131,185,255,.23);

    color:
        #83b9ff !important;
}


/* =========================================================
   METRICS — NO CARD GRID FEEL
========================================================= */

.metrics{
    position:relative;

    display:grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        0 !important;

    padding-left:
        10px;
}


.metric{
    min-height:
        92px;

    padding:
        18px 0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    border-top:
        1px solid
        rgba(255,255,255,.075) !important;

    background:
        transparent !important;
}


.metric:last-child{
    border-bottom:
        1px solid
        rgba(255,255,255,.075) !important;
}


.metric span{
    color:
        #7f8796 !important;

    font-size:
        .57rem !important;

    font-weight:
        720;

    letter-spacing:
        .085em;

    text-transform:
        uppercase;
}


.metric strong{
    display:block;

    margin-top:
        8px;

    color:
        #f4f6fa !important;

    font-size:
        clamp(
            .9rem,
            1.8vw,
            1.2rem
        ) !important;

    line-height:
        1.3;
}


/* =========================================================
   WHITE FOOTER — FULL BLEED
========================================================= */

.final-footer{
    position:
        relative;

    z-index:
        5;

    width:
        100vw;

    margin:
        115px 0
        -75px
        calc(
            50% -
            50vw
        ) !important;

    padding:
        72px
        max(
            24px,
            calc(
                (
                    100vw -
                    1180px
                ) / 2
            )
        )
        30px !important;

    display:
        block !important;

    color:
        #16171b !important;

    background:
        #f7f8fa;

    border-top:
        1px solid
        rgba(18,18,22,.07) !important;

    font-size:
        inherit !important;

    line-height:
        inherit !important;
}


.final-footer::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(20,120,255,.30),
            rgba(255,92,168,.22),
            rgba(255,181,143,.24),
            transparent
        );
}


.final-footer-inner{
    width:
        min(
            1180px,
            100%
        );

    margin:
        0 auto;

    display:grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(210px,.75fr)
        minmax(220px,.8fr);

    gap:
        clamp(
            45px,
            7vw,
            100px
        );
}


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

.final-footer-wordmark{
    color:
        #111216;

    font-size:
        clamp(
            2.4rem,
            5vw,
            4.7rem
        );

    font-weight:
        710;

    line-height:
        .92;

    letter-spacing:
        -.065em;
}


.final-footer-type{
    margin-top:
        12px;

    color:
        #40434b;

    font-size:
        .78rem;

    font-weight:
        630;

    letter-spacing:
        -.01em;
}


.final-footer-since{
    margin-top:
        5px;

    color:
        #8b8e96;

    font-size:
        .64rem;

    font-weight:
        600;

    letter-spacing:
        .045em;

    text-transform:
        uppercase;
}


.final-footer-brand p{
    max-width:
        430px;

    margin-top:
        23px;

    color:
        #70737b;

    font-size:
        .72rem;

    line-height:
        1.65;
}


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

.final-footer-label{
    margin-bottom:
        15px;

    color:
        #9b9da4;

    font-size:
        .58rem;

    font-weight:
        760;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.final-footer-column{
    min-width:
        0;
}


.final-footer-link{
    min-height:
        43px;

    padding:
        10px 0;

    display:flex;

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

    gap:
        16px;

    border-bottom:
        1px solid
        rgba(18,18,22,.075);

    color:
        #3e4148;

    font-size:
        .68rem;

    line-height:
        1.45;

    transition:
        color .26s var(--ease),
        border-color .26s var(--ease),
        background .26s var(--ease) !important;
}


.final-footer-link:first-of-type{
    border-top:
        1px solid
        rgba(18,18,22,.075);
}


.final-footer-link:hover{
    color:
        #1478ff !important;

    transform:
        none !important;

    border-color:
        rgba(20,120,255,.18);
}


.final-footer-link span{
    flex:
        0 0 auto;

    color:
        #a0a3ab;

    font-size:
        .68rem;
}


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

.final-footer-bottom{
    width:
        min(
            1180px,
            100%
        );

    margin:
        62px auto
        0;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(18,18,22,.075);

    display:flex;

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

    gap:
        25px;

    color:
        #989ba3;

    font-size:
        .6rem;

    line-height:
        1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .slide{
        grid-template-columns:
            1fr !important;

        gap:
            32px !important;

        min-height:
            570px;
    }


    .slide::after{
        display:none;
    }


    .metrics{
        padding-left:
            0;
    }


    .final-footer-inner{
        grid-template-columns:
            1fr 1fr;
    }


    .final-footer-brand{
        grid-column:
            1 / -1;
    }

}


@media(max-width:620px){

    .final-footer{
        padding:
            55px 22px
            28px !important;
    }


    .final-footer-inner{
        grid-template-columns:
            1fr;
    }


    .final-footer-brand{
        grid-column:
            auto;
    }


    .final-footer-bottom{
        margin-top:
            45px;

        flex-direction:
            column;

        align-items:
            flex-start;
    }

}


/* FINAL-SEAMLESS-POLISH-END */



/* FEDORA-BRANDING-START */


/* =========================================================
   NAVBAR FEDORA WORDMARK
========================================================= */

.fedora-brand{
    min-width:0;

    height:42px;

    padding:
        0 5px 0 0;

    display:flex;

    align-items:center;

    opacity:1 !important;

    transform:none !important;
}


.fedora-navbar-logo{
    display:block;

    width:auto !important;

    height:27px !important;

    max-width:100px !important;

    object-fit:contain;

    filter:none;

    transform:none !important;

    transition:
        opacity .28s var(--ease),
        filter .28s var(--ease);
}


.fedora-brand:hover
.fedora-navbar-logo{
    opacity:.78;

    transform:none !important;
}


/* =========================================================
   FOOTER FEDORA WORDMARK
========================================================= */

.final-footer-logo-link{
    display:inline-flex;

    align-items:center;

    transform:none !important;
}


.fedora-footer-logo{
    display:block;

    width:
        min(
            260px,
            72vw
        ) !important;

    height:auto !important;

    max-width:none !important;

    object-fit:contain;

    transform:none !important;
}


.final-footer-logo-link:hover
.fedora-footer-logo{
    opacity:.86;
}


.final-footer-since{
    margin-top:12px !important;

    color:#8e9199;

    font-size:.62rem;

    font-weight:650;

    letter-spacing:.1em;

    text-transform:uppercase;
}


/* =========================================================
   KEEP ORIGINAL IMAGE RULE FROM SQUASHING WORDMARK
========================================================= */

.brand img.fedora-navbar-logo{
    width:auto !important;

    height:27px !important;
}


@media(max-width:650px){

    .fedora-navbar-logo{
        height:23px !important;

        max-width:82px !important;
    }


    .fedora-footer-logo{
        width:
            min(
                220px,
                78vw
            ) !important;
    }

}


/* FEDORA-BRANDING-END */



/* FEDORA-LOGO-THEME-SWITCH-START */

/* keep same uploaded PNG logo, recolor by theme */

.fedora-navbar-logo,
.fedora-footer-logo{
    display:block;
    will-change: filter, opacity, transform;
    transform-origin: center center;

    filter:
        brightness(0);

    transition:
        filter .42s cubic-bezier(.22,1,.36,1),
        opacity .32s cubic-bezier(.22,1,.36,1),
        transform .42s cubic-bezier(.22,1,.36,1);
}

/* dark mode = white logo */
body.dark .fedora-navbar-logo,
body.dark .fedora-footer-logo,
html[data-theme="dark"] .fedora-navbar-logo,
html[data-theme="dark"] .fedora-footer-logo{
    filter:
        brightness(0)
        invert(1);
}

/* subtle hover only */
.fedora-brand:hover .fedora-navbar-logo,
.final-footer-logo-link:hover .fedora-footer-logo{
    opacity: .84;
    transform: none !important;
}

/* theme switch animation trigger */
body.logo-theme-switching .fedora-navbar-logo,
body.logo-theme-switching .fedora-footer-logo{
    animation:
        fedoraLogoThemeSwap .52s cubic-bezier(.22,1,.36,1);
}

@keyframes fedoraLogoThemeSwap{
    0%{
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    35%{
        opacity: .56;
        transform: scale(.985) translateY(1px);
    }

    68%{
        opacity: .88;
        transform: scale(1.022) translateY(-1px);
    }

    100%{
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* make navbar wordmark slightly cleaner */
.fedora-brand{
    display: inline-flex;
    align-items: center;
    min-width: 0;
    transform: none !important;
}

.brand img.fedora-navbar-logo{
    width: auto !important;
    height: 26px !important;
    max-width: 112px !important;
    object-fit: contain;
}

.fedora-footer-logo{
    width: min(260px, 72vw) !important;
    height: auto !important;
    object-fit: contain;
}

@media(max-width:650px){

    .brand img.fedora-navbar-logo{
        height: 23px !important;
        max-width: 96px !important;
    }

    .fedora-footer-logo{
        width: min(220px, 78vw) !important;
    }
}

/* FEDORA-LOGO-THEME-SWITCH-END */