/* BAOIAM Outcomes section — left copy/stats-bullets column, right video + counters column. */

.outcomes-section{
    /* Shorter on top: the testimonial wrapper above ends in dead space, so a
       full --space-section here pushed this header far down the fold. */
    padding:var(--space-section-sm) 20px var(--space-section);
}

.outcomes-inner{
    display:flex;
    flex-direction:column;
    gap:clamp(32px,4vw,44px);
    max-width:1180px;
    margin-inline:auto;
    padding:clamp(28px,4vw,48px);
    background:#faf8f5 url('/assets/images/outcomes-video-backdrop.webp') no-repeat right center;
    background-size:cover;
    border:1px solid #f0e6dc;
    border-radius:28px;
    box-shadow:0 24px 60px rgba(15,23,42,.06), 0 10px 30px -10px rgba(255,102,0,0.08);
    position:relative;
    overflow:hidden;
}

.outcomes-main{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
    gap:clamp(32px,4vw,60px);
    align-items:center;
}

/* ---------- section header ---------- */

/* The heading used to be the first thing inside the left copy column, so a
   line that names the whole section sat at copy width beside the video and
   read as that column's title rather than the section's. Above the card it
   addresses both columns, and it lines up with the centred headers the
   testimonials and FAQ sections carry on either side of it. */

.outcomes-header{
    max-width:860px;
    margin:0 auto var(--space-block);
    text-align:center;
}

/* On the shared ladder now -- the old in-column heading ran to 34px, above
   --fs-section, because it was competing with the video beside it. */

.outcomes-header h2{
    font-size:var(--fs-section);
    font-weight:800;
    line-height:1.15;
    color:var(--ink);
    /* Two sentences now, so the lines need evening out rather than being left
       to break wherever they land. */
    text-wrap:balance;
}

.outcomes-header .bao-section-lead{
    margin-top:var(--space-tight);
}

/* ---------- left: copy ---------- */

/* Intro between the heading and the bullet list. It was carrying utility
   classes that set a top margin but no bottom one, so it sat flush against
   the first bullet. */

.outcomes-lead{
    margin-bottom:22px;
    /* A step down from 15px so it settles into two lines in this column.
       Plain wrapping so the block tapers. */
    font-size:14px;
    line-height:1.65;
    /* 500, not 400: it is the one paragraph carrying the section's argument,
       and at this size a plain weight let it disappear under the heading. */
    font-weight:500;
    color:var(--ink-600);
    text-wrap:normal;
}

.outcomes-points{
    list-style:none;
    margin:0 0 32px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.outcomes-point{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

.outcomes-point-icon{
    flex:none;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e9f0ff;
    color:#2f6fed;
    font-size:15px;
}

.outcomes-point p{
    margin:0;
    font-family:var(--font-sans);
    font-size:15.5px;
    line-height:1.6;
    color:#3a3a3a;
}

.btn-dark-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--black);
    color:#fff;
    font-family:var(--font-sans);
    font-weight:700;
    font-size:15px;
    text-decoration:none;
    padding:16px 26px;
    border-radius:10px;
    transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}

.btn-dark-cta i{
    font-size:13px;
}

.btn-dark-cta:hover{
    background:var(--primary);
    transform:translateY(-2px);
}

/* Pill badge on left copy */
.outcomes-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:6px 14px;
    background:rgba(255,102,0,.08);
    border:1px solid rgba(255,102,0,.2);
    border-radius:20px;
    font-family:var(--font-sans);
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.08em;
    color:var(--primary);
    margin-bottom:16px;
}

.outcomes-pill i{
    font-size:11px;
}

.outcomes-action{
    margin-top:6px;
}

/* ---------- right: simple reel video box (9:16) ---------- */
 
.outcomes-media{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

.outcomes-reel-box{
    position:relative;
    width:100%;
    max-width:260px;
    aspect-ratio:9 / 16;
    border-radius:38px;
    overflow:hidden;
    background:#05070f;
    cursor:pointer;
    user-select:none;
    -webkit-user-select:none;

    /* iPhone Ultra-slim Black Bezel + Light Orange Ambient Glow */
    border:3.5px solid #09090b;
    box-shadow:
        0 0 0 1.5px rgba(255, 120, 40, 0.45),
        0 0 26px -2px rgba(255, 102, 0, 0.35),
        0 20px 48px -10px rgba(0, 0, 0, 0.52);
    transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease;
}

.outcomes-reel-box:hover{
    transform:translateY(-3px);
    box-shadow:
        0 0 0 2px rgba(255, 130, 50, 0.7),
        0 0 36px 3px rgba(255, 102, 0, 0.5),
        0 26px 56px -10px rgba(0, 0, 0, 0.6);
}

.outcomes-reel-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:#000;
    border-radius:34px;
}

/* iPhone Dynamic Island at Top Center */
.iphone-dynamic-island{
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    width:76px;
    height:18px;
    background:#000000;
    border-radius:999px;
    z-index:7;
    pointer-events:none;
    box-shadow:0 1px 3px rgba(0,0,0,0.6), inset 0 0 0 0.5px rgba(255,255,255,0.08);
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding-right:9px;
}

.iphone-camera-lens{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#080e1a;
    box-shadow:inset 0 0 2px #38bdf8, 0 0 1px rgba(255,255,255,0.3);
    display:inline-block;
}

/* iPhone Home Indicator at Bottom Center */
.iphone-home-indicator{
    position:absolute;
    bottom:6px;
    left:50%;
    transform:translateX(-50%);
    width:82px;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,0.75);
    z-index:7;
    pointer-events:none;
    box-shadow:0 1px 2px rgba(0,0,0,0.5);
}

/* Top bar: Mute button only (No text) */
.reel-top-bar{
    position:absolute;
    top:0;
    left:0;
    right:0;
    padding:12px 12px 0;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    z-index:4;
    pointer-events:none;
}

.reel-mute-btn{
    pointer-events:auto;
    width:32px;
    height:32px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(15,23,42,.65);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .2s ease,background .2s ease,color .2s ease;
}

.reel-mute-btn:hover{
    transform:scale(1.1);
    background:rgba(255,102,0,.9);
    border-color:transparent;
}

/* Center play/pause action */
.reel-center-action{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:5;
    pointer-events:none;
    transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1);
}

.reel-play-btn{
    pointer-events:auto;
    width:58px;
    height:58px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.5);
    background:rgba(255,102,0,.92);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    color:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(255,61,0,.45);
    transition:transform .2s ease,background .2s ease;
}

.reel-play-btn i{
    margin-left:3px;
}

.reel-play-btn:hover{
    transform:scale(1.1);
    background:#ff5500;
}

/* Hide center button when playing, show subtly on hover */
.outcomes-reel-box.is-playing .reel-center-action{
    opacity:0;
    transform:translate(-50%,-50%) scale(.85);
    pointer-events:none;
}

.outcomes-reel-box.is-playing:hover .reel-center-action{
    opacity:.85;
    pointer-events:auto;
    transform:translate(-50%,-50%) scale(1);
}

.outcomes-reel-box.is-playing .reel-play-btn i{
    margin-left:0;
}

/* Bottom bar: Clean live progress bar sitting right above iPhone home indicator */
.reel-bottom-bar{
    position:absolute;
    bottom:14px;
    left:0;
    right:0;
    padding:6px 14px 2px;
    background:linear-gradient(180deg,transparent 0%,rgba(8,13,30,.45) 100%);
    z-index:6;
    pointer-events:none;
}

.reel-progress-wrap{
    width:100%;
    height:3px;
    background:rgba(255,255,255,.25);
    border-radius:2px;
    overflow:hidden;
}

.reel-progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#ff8533,#ff3d00);
    border-radius:2px;
    transition:width .1s linear;
}

/* ---------- Full-Width Horizontal Stats Strip ---------- */

.outcomes-stats-strip{
    display:flex;
    align-items:center;
    justify-content:space-around;
    padding:20px 24px;
    background:rgba(255, 255, 255, 0.75);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255, 255, 255, 0.85);
    border-radius:20px;
    gap:16px;
    box-shadow:0 6px 20px -4px rgba(15, 23, 42, 0.04);
}

.outcomes-stat-card{
    flex:1;
    text-align:center;
    padding:8px 12px;
}

.outcomes-stat-number{
    margin:0;
    font-family:var(--font-sans);
    font-size:clamp(26px,3.2vw,36px);
    font-weight:900;
    color:var(--black);
    letter-spacing:-.02em;
}

.outcomes-stat-label{
    margin:6px 0 0;
    font-family:var(--font-sans);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#737373;
}

.outcomes-stat-sep{
    width:1px;
    height:42px;
    background:#e2e8f0;
    flex-shrink:0;
}

@media (max-width:900px){

    .outcomes-main{
        grid-template-columns:1fr;
        gap:36px;
    }

    .outcomes-copy{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .outcomes-points{
        text-align:left;
    }

    .outcomes-stats-strip{
        gap:12px;
    }

}

@media (max-width:600px){

    .outcomes-media{
        padding:22px 14px;
        border-radius:22px;
    }

    .outcomes-reel-box{
        max-width:230px;
        border-radius:32px;
        border-width:3px;
    }

    .iphone-dynamic-island{
        top:8px;
        width:66px;
        height:16px;
    }

    .iphone-home-indicator{
        bottom:5px;
        width:70px;
        height:3.5px;
    }

    .reel-bottom-bar{
        bottom:12px;
    }

    .outcomes-stats-strip{
        flex-direction:column;
        gap:20px;
        padding-top:24px;
    }

    .outcomes-stat-sep{
        width:60px;
        height:1px;
    }

    .outcomes-stat-number{
        font-size:28px;
    }

}