/* =========================================================
   MOTF HOME PAGE MASTER v1.0
   Visual family: MOTF Big Trades Product Page Master v1.0
   - 1500px product-page width
   - matte surfaces
   - neutral black depth only
   - no exterior blue glow
   - sharper corners
   ========================================================= */

:root{
    --hm-bg:#070a0d;
    --hm-bg-2:#0a0f14;
    --hm-panel:#0e141a;
    --hm-panel-deep:#06131c;

    --hm-text:#f2f5f6;
    --hm-muted:#8f9ba5;
    --hm-muted-2:#66727d;

    --hm-line:#202c35;
    --hm-line-2:#293740;

    --hm-blue:#4785E3;
    --hm-blue-soft:#78a8ff;
    --hm-blue-deep:#4f83e8;

    --hm-red:#d94a4a;

    --hm-display:"Michroma",Inter,Arial,sans-serif;
    --hm-body:Inter,Arial,sans-serif;

    --hm-shadow:
        0 3px 5px rgba(0,0,0,.30),
        0 10px 22px rgba(0,0,0,.42);
}


/* ---------------------------------------------------------
   HOME-ONLY RESET / WIDTH
   --------------------------------------------------------- */

body:has(.motf-home-master) .ambient{
    display:none !important;
}

.motf-home-master,
.motf-home-master *{
    box-sizing:border-box;
}

.motf-home-master{
    width:100%;
    max-width:100%;
    overflow-x:clip;

    background:
        linear-gradient(
            180deg,
            #070a0d 0%,
            #081018 42%,
            #070a0d 100%
        );

    color:var(--hm-text);
    font-family:var(--hm-body);
}

.hm-shell{
    width:min(1500px,calc(100% - 64px));
    margin:0 auto;
}

.hm-display{
    font-family:var(--hm-display);
    font-weight:400;
    text-transform:uppercase;
}

.hm-kicker{
    font-family:var(--hm-display);
    font-size:12px;
    line-height:1.4;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--hm-blue-soft);
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.hm-btn{
    min-height:52px;
    padding:0 24px;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border-radius:3px;

    text-decoration:none;
    text-transform:uppercase;

    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        filter .18s ease;
}

.hm-btn:hover{
    transform:translateY(-1px);
}

.hm-btn-primary{
    color:#fff;

    border:1px solid #6b9ceb;

    background:
        linear-gradient(
            180deg,
            #5d8fe8 0%,
            #4779d9 100%
        );

    box-shadow:var(--hm-shadow);
}

.hm-btn-primary:hover{
    filter:brightness(1.05);
}

.hm-btn-secondary{
    color:#edf3f8;

    border:1px solid #31536b;

    background:#06131c;

    box-shadow:var(--hm-shadow);
}

.hm-btn-secondary:hover{
    border-color:#456d89;
    background:#081925;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hm-hero{
    padding:76px 0 36px;
}

.hm-hero-copy{
    max-width:1030px;
}

.hm-hero-copy .hm-kicker{
    margin-bottom:18px;
}

.hm-hero h1{
    margin:0;

    font-size:clamp(48px,5.8vw,82px);
    line-height:.99;

    letter-spacing:.005em;
}

.hm-hero h1 span,
.hm-hero h1 strong{
    display:block;
}

.hm-hero h1 span{
    color:#f3f6f8;
    font-weight:400;
}

.hm-hero h1 strong{
    margin-top:3px;

    color:var(--hm-blue-soft);
    font-weight:400;
}

.hm-lead{
    max-width:890px;

    margin:26px 0 0;

    font-size:17px;
    line-height:1.7;

    color:#b8c2ca;
}

.hm-video-card{
    margin:48px 0 0;
}

.hm-video-frame{
    position:relative;

    width:100%;
    aspect-ratio:16 / 9;

    overflow:hidden;

    border:1px solid #263946;
    border-radius:4px;

    background:#020609;

    box-shadow:var(--hm-shadow);
}

.hm-video{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    background:#020609;
}

.hm-video-label{
    position:absolute;

    left:24px;
    bottom:24px;

    max-width:440px;

    padding:12px 15px;

    border-left:2px solid var(--hm-blue);

    background:rgba(3,16,26,.80);

    pointer-events:none;
}

.hm-video-label span,
.hm-video-label strong{
    display:block;
}

.hm-video-label span{
    margin-bottom:4px;

    font-family:var(--hm-display);
    font-size:10px;
    letter-spacing:.15em;

    color:var(--hm-blue-soft);
}

.hm-video-label strong{
    font-size:14px;
    font-weight:600;
    letter-spacing:.03em;

    color:#f2f5f8;
}

.hm-hero-actions{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    flex-wrap:wrap;

    margin-top:26px;
}


/* ---------------------------------------------------------
   STATISTICAL MODELS
   --------------------------------------------------------- */

.hm-stats{
    padding:0 0 96px;
}

.hm-stats-intro{
    display:grid;

    grid-template-columns:
        minmax(360px,.85fr)
        minmax(520px,1.15fr);

    gap:74px;
    align-items:end;

    margin-bottom:44px;
}

.hm-stats h2{
    max-width:720px;

    margin:12px 0 0;

    font-size:clamp(40px,4.6vw,68px);
    line-height:1.03;

    color:#f2f5f7;
}

.hm-stats-copy{
    padding-left:42px;

    border-left:1px solid #263946;
}

.hm-stats-copy p{
    max-width:700px;

    margin:0;

    font-size:15px;
    line-height:1.72;

    color:#b8c2ca;
}

.hm-stats-copy .hm-distinction{
    margin-bottom:18px;

    font-family:var(--hm-display);
    font-size:13px;
    line-height:1.7;

    letter-spacing:.045em;

    color:#e6edf2;
}

.hm-stats-showcase{
    display:grid;

    grid-template-columns:
        minmax(0,1.38fr)
        minmax(330px,.62fr);

    min-height:520px;

    border:1px solid #263946;
    border-radius:4px;

    overflow:hidden;

    background:#06131c;

    box-shadow:var(--hm-shadow);
}

.hm-stats-media{
    position:relative;

    min-width:0;

    border-right:1px solid #20313c;

    background:#020609;
}

.hm-stats-video{
    display:block;

    width:100%;
    height:100%;

    min-height:520px;

    object-fit:cover;
    object-position:center;

    background:#020609;
}

.hm-stats-media-caption{
    position:absolute;

    left:24px;
    bottom:22px;

    padding-left:13px;

    border-left:2px solid var(--hm-blue);

    font-family:var(--hm-display);
    font-size:10px;

    letter-spacing:.15em;

    color:var(--hm-blue-soft);
}

.hm-stats-panel{
    padding:32px 30px;

    background:#06131c;
}

.hm-stats-panel-kicker{
    margin-bottom:22px;

    font-family:var(--hm-display);
    font-size:12px;
    line-height:1.6;

    letter-spacing:.12em;

    color:#f1f5f8;
}

.hm-stat-row{
    padding:20px 0;

    border-top:1px solid #20313c;
}

.hm-stat-row strong,
.hm-stat-row span{
    display:block;
}

.hm-stat-row strong{
    margin-bottom:5px;

    font-family:var(--hm-display);
    font-size:10px;
    font-weight:400;

    letter-spacing:.10em;

    color:var(--hm-blue-soft);
}

.hm-stat-row span{
    font-size:13px;
    line-height:1.5;

    color:#aebbc5;
}

.hm-stats-action{
    margin-top:24px;
}

.hm-btn-stats{
    min-width:310px;
}


/* ---------------------------------------------------------
   READ THE FLOW / SYSTEMATIZE THE TRADE
   --------------------------------------------------------- */

.hm-pillars{
    padding:70px 0 104px;
}

.hm-pillars-grid{
    display:grid;
    grid-template-columns:1fr;

    gap:18px;
}

.hm-pillar-card{
    display:grid;

    grid-template-columns:
        minmax(340px,.72fr)
        minmax(480px,1.55fr);

    min-height:410px;

    overflow:hidden;

    border:1px solid #263946;
    border-radius:4px;

    background:#06131c;

    box-shadow:var(--hm-shadow);
}

.hm-pillar-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:34px 32px;
}

.hm-pillar-kicker{
    margin-bottom:14px;

    font-family:var(--hm-display);
    font-size:11px;

    letter-spacing:.16em;

    color:var(--hm-blue-soft);
}

.hm-pillar-kicker-execute{
    color:#d9aa62;
}

.hm-pillar-card h3{
    margin:0 0 7px;

    font-size:clamp(28px,2.7vw,42px);
    line-height:1.08;

    color:#f2f5f7;
}

.hm-pillar-card .hm-pillar-copy > strong{
    font-size:12px;

    letter-spacing:.14em;

    color:var(--hm-blue-soft);
}

.hm-pillar-card p{
    max-width:430px;

    margin:24px 0 28px;

    font-size:14px;
    line-height:1.7;

    color:#b1bdc6;
}

.hm-pillar-card .hm-btn{
    margin-top:auto;
}

.hm-pillar-visual{
    min-width:0;

    background:#020609;

    border-left:1px solid #20313c;
}

.hm-pillar-visual img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    background:#020609;
}


/* strategy illustration */

.hm-strategy-visual{
    position:relative;

    min-height:100%;

    overflow:hidden;

    border-left:1px solid #20313c;

    background:
        linear-gradient(
            180deg,
            #07131c 0%,
            #020609 100%
        );
}

.hm-strategy-grid{
    position:absolute;
    inset:26px;

    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);

    background-size:42px 42px;
}

.hm-strategy-path{
    position:absolute;

    left:22%;
    right:15%;
    top:22%;
    bottom:18%;

    clip-path:polygon(
        0 90%,
        8% 78%,
        16% 82%,
        24% 65%,
        32% 69%,
        40% 52%,
        48% 57%,
        58% 38%,
        68% 44%,
        78% 24%,
        88% 30%,
        100% 8%,
        100% 14%,
        89% 36%,
        79% 31%,
        69% 50%,
        59% 45%,
        49% 64%,
        41% 59%,
        33% 76%,
        25% 72%,
        17% 89%,
        9% 85%,
        0 98%
    );

    background:#5f90e8;
    opacity:.75;
}

.hm-strategy-entry,
.hm-strategy-target,
.hm-strategy-stop{
    position:absolute;

    padding:6px 8px;

    border-radius:2px;

    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
}

.hm-strategy-entry{
    left:42%;
    top:57%;

    color:#dce9ff;

    border:1px solid #4779d9;
    background:#173b6d;
}

.hm-strategy-target{
    right:14%;
    top:17%;

    color:#dff5e7;

    border:1px solid #387352;
    background:#143c2a;
}

.hm-strategy-stop{
    left:40%;
    bottom:16%;

    color:#ffe0e0;

    border:1px solid #7d3a3a;
    background:#4a1d1d;
}


/* ---------------------------------------------------------
   NINJATRADER
   --------------------------------------------------------- */

.hm-ninjatrader{
    padding:44px 0;

    border-top:1px solid #263946;
    border-bottom:1px solid #263946;

    background:#03101a;
}

.hm-nt-grid{
    display:grid;

    grid-template-columns:
        minmax(280px,.85fr)
        minmax(260px,.65fr)
        minmax(360px,1fr);

    gap:48px;
    align-items:center;
}

.hm-nt-heading h2{
    margin:8px 0 0;

    font-size:34px;

    color:#f2f5f8;
}

.hm-nt-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.hm-nt-brand img{
    display:block;

    width:auto;
    height:36px;

    object-fit:contain;
}

.hm-nt-brand strong{
    font-size:18px;

    letter-spacing:.05em;

    color:#f2f5f8;
}

.hm-nt-copy p{
    margin:0 0 9px;

    font-size:13px;
    line-height:1.6;

    color:#aebbc5;
}

.hm-nt-copy a{
    font-size:11px;
    letter-spacing:.04em;

    color:var(--hm-blue-soft);
    text-decoration:none;
}


/* ---------------------------------------------------------
   SERVICE STRIP
   --------------------------------------------------------- */

.hm-service-strip{
    border-bottom:1px solid #202c35;

    background:#070a0d;
}

.hm-service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.hm-service-grid > div{
    min-height:94px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:18px 26px;

    border-right:1px solid #202c35;
}

.hm-service-grid > div:last-child{
    border-right:0;
}

.hm-service-grid strong{
    margin-bottom:4px;

    font-size:10px;

    letter-spacing:.09em;

    color:#dfe6eb;
}

.hm-service-grid span{
    font-size:11px;

    color:#7f8d98;
}


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

@media (max-width:1280px){

    .hm-shell{
        width:min(1500px,calc(100% - 40px));
    }

    .hm-stats-intro{
        gap:42px;
    }

    .hm-pillars-grid{
        grid-template-columns:1fr;
    }

    .hm-pillar-card{
        grid-template-columns:
            minmax(300px,.85fr)
            minmax(380px,1.15fr);
    }
}


@media (max-width:1020px){

    .hm-shell{
        width:min(1500px,calc(100% - 32px));
    }

    .hm-hero{
        padding-top:56px;
    }

    .hm-video-label{
        left:16px;
        bottom:16px;
    }

    .hm-stats-intro{
        grid-template-columns:1fr;

        gap:26px;
    }

    .hm-stats-copy{
        padding-left:0;

        border-left:0;
    }

    .hm-stats-showcase{
        grid-template-columns:1fr;
    }

    .hm-stats-media{
        border-right:0;
        border-bottom:1px solid #20313c;
    }

    .hm-stats-video{
        min-height:auto;
        aspect-ratio:16 / 9;
    }

    .hm-pillar-card{
        grid-template-columns:1fr 1fr;
    }

    .hm-nt-grid{
        grid-template-columns:1fr 1fr;

        gap:30px;
    }

    .hm-nt-copy{
        grid-column:1 / -1;
    }

    .hm-service-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .hm-service-grid > div:nth-child(2){
        border-right:0;
    }

    .hm-service-grid > div:nth-child(-n+2){
        border-bottom:1px solid #202c35;
    }
}


@media (max-width:720px){

    .hm-shell{
        width:calc(100% - 24px);
    }

    .hm-hero{
        padding-top:42px;
    }

    .hm-hero h1{
        font-size:clamp(38px,12vw,58px);
    }

    .hm-lead{
        font-size:15px;
    }

    .hm-video-card{
        margin-top:34px;
    }

    .hm-video-frame{
        aspect-ratio:16 / 10;
    }

    .hm-video-label{
        display:none;
    }

    .hm-hero-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .hm-btn{
        width:100%;
    }

    .hm-stats{
        padding-bottom:70px;
    }

    .hm-stats h2{
        font-size:34px;
    }

    .hm-stats-copy p{
        font-size:14px;
    }

    .hm-stats-panel{
        padding:25px 22px;
    }

    .hm-btn-stats{
        min-width:0;
    }

    .hm-pillars{
        padding-bottom:74px;
    }

    .hm-pillar-card{
        grid-template-columns:1fr;
    }

    .hm-pillar-copy{
        padding:28px 24px;
    }

    .hm-pillar-visual,
    .hm-strategy-visual{
        min-height:260px;

        border-left:0;
        border-top:1px solid #20313c;
    }

    .hm-nt-grid{
        grid-template-columns:1fr;
    }

    .hm-nt-copy{
        grid-column:auto;
    }

    .hm-service-grid{
        grid-template-columns:1fr;
    }

    .hm-service-grid > div{
        border-right:0 !important;
        border-bottom:1px solid #202c35;
    }

    .hm-service-grid > div:last-child{
        border-bottom:0;
    }
}

/* =========================================================
   MOTF HOME MASTER v1.0
   VISUAL SCALE + PRODUCT PAGE BACKGROUND ALIGNMENT
   ========================================================= */


/* ---------------------------------------------------------
   MATCH BIG TRADES PAGE BACKGROUND
   --------------------------------------------------------- */

body:has(.motf-home-master){
    background:#03101a !important;
}

.motf-home-master{
    background:
        radial-gradient(
            900px 540px at 88% 2%,
            rgba(0,93,169,.16),
            transparent 62%
        ),
        linear-gradient(
            180deg,
            #03101a 0%,
            #031522 33%,
            #041623 100%
        ) !important;
}


/* ---------------------------------------------------------
   REDUCE TITLE SCALE
   Match Big Trades visual hierarchy
   --------------------------------------------------------- */

/* HERO */
.hm-hero h1{
    font-size:clamp(40px,4vw,52px) !important;
    line-height:1.03 !important;
}


/* BUILT AROUND THE AUCTION */
.hm-stats h2{
    font-size:clamp(32px,3.2vw,42px) !important;
    line-height:1.05 !important;
}


/* READ THE FLOW / SYSTEMATIZE THE TRADE */
.hm-pillar-card h3{
    font-size:clamp(24px,2.2vw,28px) !important;
    line-height:1.08 !important;
}


/* BUILT FOR NINJATRADER 8 */
.hm-nt-heading h2{
    font-size:28px !important;
    line-height:1.08 !important;
}


/* ---------------------------------------------------------
   MOBILE SCALE
   --------------------------------------------------------- */

@media (max-width:720px){

    .hm-hero h1{
        font-size:36px !important;
    }

    .hm-stats h2{
        font-size:30px !important;
    }

    .hm-pillar-card h3{
        font-size:26px !important;
    }

    .hm-nt-heading h2{
        font-size:25px !important;
    }
}
/* =========================================================
   MOTF HOME — HEADER + HERO PROPORTION REFINEMENT
   Desktop
   ========================================================= */


/* ---------------------------------------------------------
   HEADER
   Make navigation readable on high-resolution displays
   and use the same wide page geometry
   --------------------------------------------------------- */

.site-header .nav-shell{
    width:min(1500px,calc(100% - 64px)) !important;
    max-width:none !important;

    min-height:72px !important;
}


/* MOTF logo */

.site-header .brand{
    flex-shrink:0;
}

.site-header .brand img{
    width:auto !important;
    height:48px !important;
    max-height:48px !important;
}


/* Navigation */

.site-header .main-nav{
    gap:8px !important;
}

.site-header .main-nav a,
.site-header .nav-link{
    font-size:13px !important;
    line-height:1.2 !important;

    padding-left:11px !important;
    padding-right:11px !important;
}


/* Sign in / account area */

.site-header .nav-actions{
    gap:10px !important;
}

.site-header .nav-actions a{
    font-size:12.5px !important;
}


/* ---------------------------------------------------------
   HERO
   Approved composition:
   copy left / larger video right / TOP aligned
   --------------------------------------------------------- */

.hm-hero{
    padding-top:64px !important;
    padding-bottom:48px !important;
}

.hm-hero .hm-shell{
    display:grid !important;

    grid-template-columns:
        minmax(410px,.72fr)
        minmax(0,1.28fr) !important;

    gap:38px !important;

    /* Critical change:
       do not vertically center video against shorter copy */
    align-items:start !important;
}


/* LEFT COPY */

.hm-hero-copy{
    width:100% !important;
    max-width:580px !important;

    margin:0 !important;
    padding:0 !important;
}


/* Keep the approved headline size */

.hm-hero h1{
    margin-top:12px !important;
}


/* RIGHT VIDEO */

.hm-video-card{
    width:100% !important;
    max-width:none !important;

    margin:0 !important;
    padding:0 !important;

    align-self:start !important;
}

.hm-video-frame{
    width:100% !important;

    aspect-ratio:16 / 9 !important;

    overflow:hidden !important;

    border-radius:4px !important;
}

.hm-video{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   Stack only on actual tablet/mobile
   --------------------------------------------------------- */

@media (max-width:900px){

    .site-header .nav-shell{
        width:calc(100% - 28px) !important;
    }

    .site-header .brand img{
        height:40px !important;
        max-height:40px !important;
    }

    .hm-hero .hm-shell{
        grid-template-columns:1fr !important;
        gap:30px !important;
    }

    .hm-hero-copy{
        max-width:none !important;
    }

    .hm-video-card{
        width:100% !important;
    }
}

/* =========================================================
   MOTF HOME — DESKTOP HEADER SCALE
   ========================================================= */

@media (min-width:1400px){

    /* Header overall height */
    .site-header .nav-shell{
        width:min(1500px,calc(100% - 64px)) !important;

        height:88px !important;
        min-height:88px !important;

        gap:34px !important;
    }


    /* MOTF LOGO */
    .site-header .brand img{
        width:auto !important;

        height:58px !important;
        max-height:58px !important;
    }


    /* MAIN NAVIGATION */
    .site-header .main-nav{
        gap:10px !important;
    }

    .site-header .main-nav a,
    .site-header .nav-link{
        font-size:14.5px !important;
        line-height:1.2 !important;

        padding:12px 12px !important;
    }


    /* SIGN IN */
    .site-header .nav-actions > a:not(.btn){
        font-size:14px !important;
    }


    /* CREATE ACCOUNT */
    .site-header .btn-small,
    .site-header .nav-actions .btn{
        min-height:44px !important;

        padding:0 19px !important;

        font-size:13.5px !important;
    }


    /* LANGUAGE AREA */
    .site-header .nav-actions{
        gap:12px !important;
    }

    .site-header .nav-actions span,
    .site-header .nav-actions button{
        font-size:13.5px !important;
    }
}


/* =========================================================
   MOTF HOME — HEADER SCALE FIX
   HOME PAGE ONLY
   ========================================================= */

@media (min-width:1181px){

    /* Entire header */
    body:has(.motf-home-master) .v4-header{
        height:96px !important;
    }

    /* Same wide geometry as Home / Product pages */
    body:has(.motf-home-master) .v4-header-inner{
        width:min(1500px,calc(100% - 64px)) !important;
        max-width:none !important;

        height:96px !important;

        padding-left:0 !important;
        padding-right:0 !important;

        grid-template-columns:
            195px
            1fr
            auto !important;

        gap:28px !important;
    }


    /* LOGO */

    body:has(.motf-home-master) .v4-logo{
        width:190px !important;
        height:66px !important;

        overflow:visible !important;
    }

    body:has(.motf-home-master) .v4-logo img{
        width:185px !important;
        height:63px !important;

        max-width:none !important;
        max-height:none !important;

        object-fit:contain !important;
    }


    /* NAVIGATION */

    body:has(.motf-home-master) .v4-nav{
        height:96px !important;

        gap:28px !important;
    }

    body:has(.motf-home-master) .v4-nav-item{
        height:86px !important;
    }

    body:has(.motf-home-master) .v4-nav-item > button,
    body:has(.motf-home-master) .v4-nav > a{
        font-size:15px !important;

        letter-spacing:.025em !important;
    }


    /* ACCOUNT / SIGN IN */

    body:has(.motf-home-master) .v4-account{
        gap:15px !important;
    }

    body:has(.motf-home-master) .v4-sign,
    body:has(.motf-home-master) .v4-create,
    body:has(.motf-home-master) .v4-lang{
        font-size:10.5px !important;
    }


    /* CREATE ACCOUNT */

    body:has(.motf-home-master) .v4-create{
        padding:11px 17px !important;

        border-radius:4px !important;
    }


    /* FLAGS */

    body:has(.motf-home-master) .v4-lang span{
        font-size:14px !important;
    }


    /* Separator */

    body:has(.motf-home-master) .v4-sep{
        height:30px !important;
    }
}

/* =========================================================
   MOTF HOME — STATISTICAL MODELS SHOWCASE REFINEMENT
   Keep section intro unchanged.
   Balance video / analytical panel and control video height.
   ========================================================= */

@media (min-width:1021px){

    .hm-stats-showcase{
        grid-template-columns:
            minmax(0,3fr)
            minmax(360px,2fr) !important;

        min-height:0 !important;

        height:clamp(430px,31vw,520px) !important;
    }


    /* VIDEO SIDE */

    .hm-stats-media{
        min-height:0 !important;
        height:100% !important;

        overflow:hidden !important;
    }

    .hm-stats-video{
        display:block !important;

        width:100% !important;
        height:100% !important;

        min-height:0 !important;

        /* Preserve the complete statistical dashboard */
        object-fit:contain !important;
        object-position:center !important;

        background:#020609 !important;
    }


    /* RIGHT ANALYTICAL PANEL */

    .hm-stats-panel{
        height:100% !important;

        padding:27px 30px !important;

        overflow:hidden !important;
    }

    .hm-stats-panel-kicker{
        margin-bottom:16px !important;
    }

    .hm-stat-row{
        padding:15px 0 !important;
    }
}

/* =========================================================
   MOTF HOME — STATISTICAL MODELS COMPOSITION
   Break the rigid left/right column repetition
   ========================================================= */

@media (min-width:1021px){

    /* Center the second-act introduction */
    .hm-stats-intro{
        grid-template-columns:1fr !important;

        max-width:1100px !important;

        margin:
            0 auto
            38px !important;

        gap:0 !important;

        text-align:center !important;

        align-items:start !important;
    }


    /* Kicker + title */

    .hm-stats-intro > div:first-child{
        width:100% !important;
    }

    .hm-stats h2{
        max-width:900px !important;

        margin:
            12px auto
            0 !important;
    }


    /* Supporting explanation */

    .hm-stats-copy{
        width:100% !important;
        max-width:960px !important;

        margin:
            24px auto
            0 !important;

        padding-left:0 !important;

        border-left:0 !important;
    }

    .hm-stats-copy p{
        max-width:900px !important;

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

    .hm-stats-copy .hm-distinction{
        margin-bottom:12px !important;
    }


    /* Center CTA beneath the complete showcase,
       rather than anchoring it to the video side */

    .hm-stats-action{
        display:flex !important;
        justify-content:center !important;

        margin-top:24px !important;
    }
}

/* =========================================================
   MOTF HOME — STATISTICAL MODELS FINAL COMPOSITION
   Video left / complete story right
   ========================================================= */

.hm-stats-stage{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(420px,.95fr);

    min-height:500px;

    overflow:hidden;

    border:1px solid #263946;
    border-radius:4px;

    background:#06131c;

    box-shadow:var(--hm-shadow);
}


/* ---------------------------------------------------------
   LEFT VIDEO
   --------------------------------------------------------- */

.hm-stats-stage-media{
    position:relative;

    min-width:0;
    min-height:500px;

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

    overflow:hidden;

    border-right:1px solid #263946;

    background:#020609;
}

.hm-stats-stage-video{
    display:block;

    width:100%;
    height:100%;

    min-height:500px;

    object-fit:contain;
    object-position:center;

    background:#020609;
}

.hm-stats-stage-caption{
    position:absolute;

    left:22px;
    bottom:18px;

    padding-left:12px;

    border-left:2px solid var(--hm-blue);

    font-family:var(--hm-display);
    font-size:9px;
    letter-spacing:.15em;

    color:var(--hm-blue-soft);
}


/* ---------------------------------------------------------
   RIGHT STORY
   --------------------------------------------------------- */

.hm-stats-stage-copy{
    min-width:0;

    display:flex;
    flex-direction:column;

    padding:38px 40px 34px;

    background:#06131c;
}

.hm-stats-stage-copy .hm-kicker{
    margin:0 0 12px;
}

.hm-stats-stage-copy h2{
    max-width:560px !important;

    margin:0 0 22px !important;

    font-size:clamp(31px,2.7vw,43px) !important;
    line-height:1.06 !important;

    text-align:left !important;
}

.hm-stats-stage-distinction{
    max-width:560px;

    margin:0 0 15px;

    font-family:var(--hm-display);
    font-size:11.5px;
    line-height:1.65;
    letter-spacing:.025em;

    color:#e5ebf0;
}

.hm-stats-stage-body{
    max-width:560px;

    margin:0;

    font-size:13.5px;
    line-height:1.68;

    color:#aebbc5;
}


/* ---------------------------------------------------------
   STATISTICAL QUESTIONS
   --------------------------------------------------------- */

.hm-stats-stage-facts{
    margin-top:26px;
}

.hm-stats-stage-facts-title{
    padding-bottom:13px;

    font-family:var(--hm-display);
    font-size:11px;
    letter-spacing:.08em;

    color:#f1f5f8;
}

.hm-stats-stage-fact{
    padding:12px 0;

    border-top:1px solid #20313c;
}

.hm-stats-stage-fact strong,
.hm-stats-stage-fact span{
    display:block;
}

.hm-stats-stage-fact strong{
    margin-bottom:4px;

    font-family:var(--hm-display);
    font-size:9px;
    font-weight:400;
    letter-spacing:.10em;

    color:var(--hm-blue-soft);
}

.hm-stats-stage-fact span{
    font-size:12px;
    line-height:1.5;

    color:#aebbc5;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.hm-stats-stage-action{
    margin-top:auto;
    padding-top:22px;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width:1020px){

    .hm-stats-stage{
        grid-template-columns:1fr;
    }

    .hm-stats-stage-copy{
        order:1;
        padding:30px 26px;
    }

    .hm-stats-stage-media{
        order:2;

        min-height:auto;

        border-right:0;
        border-top:1px solid #263946;
    }

    .hm-stats-stage-video{
        min-height:0;
        height:auto;

        aspect-ratio:16 / 9;
    }
}

/* =========================================================
   HOME SIGNATURE — BORDER REPAIR / 2026-09-21
   ORDER FLOW × STATISTICS × AUTOMATION
   Real border strokes, not 1px-high gradient backgrounds.
   Only this component is changed by this repair.
   ========================================================= */

.hm-signature{
    --motf-signature-build:"border-20260921-r1";
    width:100%;
    display:grid;
    grid-template-columns:minmax(80px,1fr) auto minmax(80px,1fr);
    align-items:center;
    column-gap:24px;
    padding:104px 14px;
    margin:0;
    box-sizing:border-box;
}

.hm-signature > .hm-signature-line{
    display:block;
    width:100%;
    min-width:0;
    height:0;
    min-height:0;
    margin:0;
    padding:0;
    background:none;
    border:0;
    border-top:1px solid #315a76;
}

/* The gradient is painted on the border, which stays visible
   at reduced page scale. It is not a background on a thin box. */
.hm-signature > .hm-signature-line-left{
    border-image:linear-gradient(90deg, transparent, #315a76) 1;
}

.hm-signature > .hm-signature-line-right{
    border-image:linear-gradient(90deg, #315a76, transparent) 1;
}

.hm-signature > strong{
    display:block;
    margin:0;
    padding:0;
    font-family:var(--hm-display);
    font-size:13px;
    font-weight:400;
    line-height:1.2;
    letter-spacing:.25em;
    color:var(--hm-blue);
    white-space:nowrap;
    text-align:center;
}

.hm-signature > strong > em{
    display:inline;
    margin:0 13px;
    padding:0;
    font-style:normal;
    color:#8fa1af;
}

@media (max-width:1020px){
    .hm-signature{
        grid-template-columns:minmax(50px,1fr) auto minmax(50px,1fr);
        column-gap:18px;
        padding:78px 0;
    }
    .hm-signature > strong{
        font-size:11px;
        letter-spacing:.21em;
    }
    .hm-signature > strong > em{
        margin:0 9px;
    }
}

@media (max-width:720px){
    .hm-signature{
        grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);
        column-gap:10px;
        padding:66px 0;
    }
    .hm-signature > strong{
        font-size:9px;
        letter-spacing:.15em;
    }
    .hm-signature > strong > em{
        margin:0 5px;
    }
}

/* Very narrow phones: keep the two side lines within the shell.
   Desktop and laptop-window typography remains unchanged. */
@media (max-width:480px){
    .hm-signature{
        grid-template-columns:minmax(16px,1fr) minmax(0,auto) minmax(16px,1fr);
        column-gap:8px;
    }
    .hm-signature > strong{
        min-width:0;
        font-size:8px;
        letter-spacing:.08em;
        white-space:normal;
        line-height:1.5;
    }
    .hm-signature > strong > em{
        margin:0 4px;
    }
}

/* =========================================================
   READ THE FLOW ONLY
   Keep the wider image without increasing card height
   ========================================================= */

@media (min-width:721px){

    .hm-pillars-grid > .hm-pillar-card:first-child > .hm-pillar-visual{
        position:relative;
        min-height:0;
        overflow:hidden;
    }

    .hm-pillars-grid > .hm-pillar-card:first-child > .hm-pillar-visual > img{
        position:absolute;
        inset:0;

        display:block;

        width:100%;
        height:100%;
        max-height:100%;

        object-fit:cover;
        object-position:center;
    }
}
/* =========================================================
   STATISTICAL MODEL — RIGHT PANEL FONT SIZE
   ========================================================= */

@media (min-width:1021px){

    /* "Indicators show what is happening..." */
    .hm-stats-stage-distinction{
        font-size:16px !important;
    }

    /* Main explanatory paragraph */
    .hm-stats-stage-body{
        font-size:18px !important;
    }

    /* "WHAT TENDS TO HAPPEN NEXT?" */
    .hm-stats-stage-facts-title{
        font-size:16px !important;
    }

    /* CURRENT STATE / FULL-PATH ODDS / etc. */
    .hm-stats-stage-fact strong{
        font-size:12px !important;
    }

    /* Current auction context / Historical path probabilities / etc. */
    .hm-stats-stage-fact span{
        font-size:14.5px !important;
    }
}

/* =========================================================
   BUILT FOR NINJATRADER + SOCIAL MEDIA
   ========================================================= */

.hm-ninjatrader .hm-nt-grid{
    grid-template-columns:1fr !important;
}

.hm-nt-inline-row{
    display:flex;
    align-items:center;

    gap:24px;

    margin-top:8px;
}

.hm-nt-inline-link{
    flex:0 0 auto;

    font-family:var(--hm-display);

    font-size:11px;
    letter-spacing:.04em;

    color:var(--hm-blue-soft);

    text-decoration:none;
    white-space:nowrap;
}

.hm-nt-socials{
    display:flex;
    align-items:center;

    gap:20px;

    padding-left:24px;

    border-left:1px solid #263946;
}

.hm-social-link{
    display:inline-flex;
    align-items:center;

    gap:7px;

    font-family:var(--hm-display);
    font-size:10px;
    letter-spacing:.06em;

    color:#aebbc5;

    text-decoration:none;
    white-space:nowrap;
}

.hm-social-link svg{
    width:18px;
    height:18px;

    fill:currentColor;
}

.hm-social-link:hover,
.hm-nt-inline-link:hover{
    color:#ffffff;
}


/* Narrow screens */

@media (max-width:720px){

    .hm-nt-inline-row{
        flex-wrap:wrap;
        gap:14px 20px;
    }

    .hm-nt-socials{
        width:100%;

        padding-left:0;
        padding-top:14px;

        border-left:0;
        border-top:1px solid #263946;
    }
}

/* FOLLOW US ON */
.hm-socials-label{
    font-family:var(--hm-display);
    font-size:14px;
    font-weight:400;
    letter-spacing:.10em;

    color:var(--hm-blue-soft);

    white-space:nowrap;

    margin-right:10px;
}

/* =========================================================
   NINJATRADER ROW — POSITION ONLY
   Do not change fonts or colors
   ========================================================= */

@media (min-width:721px){

    .hm-nt-inline-row{
        position:relative !important;

        display:grid !important;
        grid-template-columns:auto auto 1fr !important;

        align-items:center !important;
        gap:24px !important;

        width:100% !important;
    }

    .hm-nt-socials{
        justify-self:end !important;

        margin-left:0 !important;
        padding-left:0 !important;

        border-left:0 !important;
    }

    .hm-nt-inline-row::after{
        content:"" !important;

        position:absolute !important;

        left:50% !important;
        top:50% !important;

        transform:translateY(-50%) !important;

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

        background:#263946 !important;
    }
}

/* FOLLOW US ON — vertical position only */
.hm-socials-label{
    display:inline-block !important;
    transform:translateY(-30px) !important;
}
/* =========================================================
   SOCIAL MEDIA — TWO ROW ALIGNMENT
   Position only. No font/color changes.
   ========================================================= */

.hm-nt-socials{
    display:grid !important;

    grid-template-columns:auto auto !important;
    grid-template-areas:
        "label label"
        "youtube instagram" !important;

    justify-content:start !important;
    align-items:center !important;

    column-gap:20px !important;
    row-gap:8px !important;
}

.hm-socials-label{
    grid-area:label !important;

    transform:none !important;
    margin:0 !important;
}

.hm-nt-socials .hm-social-link:nth-of-type(1){
    grid-area:youtube !important;
    justify-self:start !important;
}

.hm-nt-socials .hm-social-link:nth-of-type(2){
    grid-area:instagram !important;
    justify-self:start !important;
}

.hm-nt-socials{
    transform:translateX(-84px) !important;
}