/* ===========================================================
   MOBILE SECTIONS & RAILS (Phone View)
   =========================================================== */

.m-rail-track{
    display:contents;
}

.m-rail-nav{
    display:none;
}

@media (max-width:768px){

    /* ---- the rail itself ---------------------------------- */

    .m-rail{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:stretch;
        /* Not inherited from the group's desktop rule. space-between (and
           centre) on a flex row that overflows pushes the first item off
           the start edge, into space no scroll can reach — the row opened
           on card two with the arrows insisting it was card one. */
        justify-content:flex-start;
        gap:14px;

        overflow-x:auto;
        overflow-y:hidden;
        /* Keeps a sideways swipe that runs off the end of the row
           from turning into a page-level back gesture on iOS. */
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;

        scroll-snap-type:x mandatory;
        scroll-padding-left:16px;

        /* The inline padding is what leaves the next card peeking in
           at the right edge — the cheapest possible hint that the row
           moves. The bottom padding is room for card shadows, which
           an overflow:auto box would otherwise cut off. */
        padding:4px 16px 14px;
        margin-inline:0;
        max-width:100%;

        /* The arrows and the peeking card are the affordance; a
           scrollbar on top of them is just noise. */
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .m-rail::-webkit-scrollbar{
        width:0;
        height:0;
        display:none;
    }

    .m-rail > *{
        flex:0 0 86%;
        max-width:86%;
        /* A flex item's default min-width is its unwrapped content
           width, which would let a long heading push the card wider
           than the 86% it was given. */
        min-width:0;
        scroll-snap-align:start;
    }

    /* Scroll reveals and the rail disagree: a card parked off to the
       right of the screen never intersects the viewport, so it would
       sit at opacity 0 until the reader swiped to it and then fade in
       under their thumb. Inside a rail the cards are simply visible.
       Same specificity as the rules being overridden, and this file
       is last, so source order carries it. */

    .m-rail > .reveal,
    .m-rail > [data-reveal],
    .m-rail[data-reveal-group] > *,
    .m-rail .roadmap-content,
    .m-rail .roadmap-image{
        opacity:1;
        transform:none;
    }


    /* ---- arrows + counter --------------------------------- */

    .m-rail-nav{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:16px;
        margin:0;
        padding:0 16px;
    }

    /* Nothing to scroll — one card, or a row that already fits —
       means a pair of arrows that move nothing, which is worse than
       no arrows. js/mobile-rails.js measures and sets this. */

    .m-rail-nav.is-idle{
        display:none;
    }

    .m-rail-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        /* 44px is the smallest comfortable thumb target. */
        width:44px;
        height:44px;
        padding:0;
        border:1px solid var(--primary-50,#ffe0cc);
        border-radius:50%;
        background:#fff;
        color:var(--primary,#ff6b00);
        font-size:15px;
        line-height:1;
        cursor:pointer;
        box-shadow:0 2px 10px rgba(255,107,0,.16);
        -webkit-tap-highlight-color:transparent;
        transition:opacity .2s ease, box-shadow .2s ease;
    }

    .m-rail-btn:disabled{
        opacity:.3;
        box-shadow:none;
        cursor:default;
    }

    .m-rail-count{
        min-width:52px;
        text-align:center;
        font-family:var(--font-sans,Inter,system-ui,sans-serif);
        font-size:13px;
        font-weight:600;
        letter-spacing:.02em;
        color:var(--ink-500,#6b6b6b);
    }


    /* ---- Features Rail ---- */
    .feature-section .cardsz.m-rail > .cardx{
        flex:0 0 85%;
        max-width:85%;
    }

    .feature-section .cardx-img{
        height:200px;
        margin-bottom:6px;
    }

    .feature-section .cardx-img img{
        width:100%;
        max-width:280px;
        max-height:200px;
    }

    .feature-section .cardx h3{
        font-size:19px;
        line-height:1.3;
    }

    .feature-section .cardx p{
        font-size:14.5px;
    }

    /* ---- Trust Badges ---- */
    .trust-badges-row.m-rail{
        grid-template-columns:none;
        max-width:none;
        margin-inline:0;
        padding-inline:16px;
    }

    .trust-badges-row.m-rail > .trust-badge{
        flex:0 0 85%;
        max-width:85%;
    }

    /* ---- Roadmap ---- */
    .roadmap-section .m-rail{
        padding-inline:14px;
    }

    .roadmap-section .m-rail > .roadmap-item{
        flex:0 0 100%;
        max-width:100%;
        gap:16px;
        margin-top:0 !important;
        margin-bottom:0 !important;
    }

    .roadmap-section .m-rail .roadmap-image-wrapper{
        max-width:260px;
        margin-inline:auto;
    }

    /* ---- Course Tabs ---- */
    .course_panel{
        padding:18px 16px;
        margin-top:22px;
        overflow:hidden;
    }

    .course_block{
        gap:.6rem;
    }

    .course_tabs{
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        overscroll-behavior-x:contain;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
        scroll-padding-inline:16px;
        scroll-behavior:smooth;
        gap:10px;
        padding:6px 12px 14px 12px;
        margin-inline:0;
        margin-bottom:1.2rem;
        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .course_tabs::-webkit-scrollbar{
        width:0;
        height:0;
        display:none;
    }

    .course_tab{
        flex:0 0 auto;
        white-space:nowrap;
        padding:11px 18px;
        font-size:13.5px;
        scroll-snap-align:center;
        box-shadow:none !important;
    }

    /* ---- Standout Table ---- */
    .standout-table-container{
        grid-template-columns:minmax(0,1.85fr) minmax(0,.6fr) minmax(0,.6fr);
        gap:6px;
        padding:10px;
    }

    .standout-col-header{
        font-size:13px;
        padding:11px 4px;
    }

    .standout-cell{
        height:auto;
        min-height:58px;
        padding:8px 6px;
        font-size:12.5px;
        line-height:1.25;
    }

    .standout-text-left{
        justify-content:flex-start;
        text-align:left;
        padding-left:10px;
    }

    .standout-icon{
        width:22px;
        height:22px;
        font-size:12px;
    }


    /* ---- Bootcamp: what you'll achieve ---- */
    #bc-section .bc-topics-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        width:100% !important;
        margin-bottom:20px !important;
    }

    #bc-section .bc-topic-badge,
    .bc-topic-badge{
        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:break-word !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        text-align:left !important;
        padding:10px 10px !important;
        font-size:11.5px !important;
        line-height:1.35 !important;
        font-weight:600 !important;
        min-height:46px !important;
        height:auto !important;
        border-radius:10px !important;
        background:#f7f9fa !important;
        border:1px solid #ededed !important;
        box-sizing:border-box !important;
    }

    /* Three short chips — "100+ Hours", "15+ Projects", "Job Guarantee" —
       that a width:100% rule was giving a line each. They fit across one
       line at 390px with room to spare. */

    #bc-section .bc-tags{
        justify-content:center;
        gap:8px;
    }

    #bc-section .bc-tag{
        width:auto;
        padding:8px 11px;
        font-size:.72rem;
    }


    /* ---- Course card: technologies you'll learn ----
       The 145px floor on each pill is 34px more than two of them can
       have inside the card at this width, so every pill took a line of
       its own. Without the floor they pack two and three to a row. */

    .course_tags{
        gap:8px;
    }

    .course_tag{
        min-width:0;
        gap:6px;
        padding:8px 10px;
        font-size:12px;
    }

    .course_tag i{
        font-size:13px;
    }


    /* ---- Course card: overview and syllabus side by side ----
       The two panes stacked ran about 2000px for one tab — five phone
       screens before the reader reached the next course. They sit in a
       swipeable pair now, so the section is the taller of the two rather
       than the sum, and the arrows say the second pane is there. */

    .course_panes.m-rail{
        /* A flex row is as tall as its tallest child either way, so
           letting the shorter pane keep its own height only moved the
           spare space outside the card, where it read as a gap in the
           panel. Stretched, it is card instead. */
        align-items:stretch;
        gap:12px;
        /* The panel this sits in already has 24px of padding, so the
           rail only needs enough to let the next pane peek. */
        padding:2px 8px 12px;
    }

    .course_panes.m-rail > *{
        flex:0 0 95%;
        max-width:95%;
    }

    /* 42px of card padding is a third of the width a phone has. */

    .course_left_card{
        padding:20px 16px;
    }

    .course_right_card{
        padding:18px 14px;
    }

    .course_desc{
        margin-bottom:18px;
    }

    /* course_pages.css already brings the overview pane down to size, but
       only below 480px. Inside a rail the pane is 93% of a padded panel at
       every phone width, so the same treatment has to start at 768. */

    .course_row_top{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .course_title{
        font-size:clamp(20px,6vw,26px);
    }

    .course_stats{
        gap:6px;
        margin-bottom:1rem;
    }

    .course_stat{
        padding:7px 3px 8px !important;
        border-radius:10px !important;
    }

    .course_stat_value{
        white-space:normal;
        flex-direction:column;
        gap:1px;
        font-size:clamp(13px,3.8vw,15px) !important;
        line-height:1.15;
    }

    .course_stat_value i{
        font-size:12px !important;
        margin-bottom:1px;
    }

    .course_stat_label{
        font-size:10.5px !important;
        line-height:1.2 !important;
        margin-top:2px !important;
    }

    .course_subtitle{
        font-size:15px;
        margin-bottom:8px;
    }


    /* ---- Courses: the second pass on height ----
       Measured at 390px after the panes became a rail: the section still
       ran 1259px, and because a flex row is as tall as its tallest child,
       only trimming BOTH panes shortens it. Every number below came off
       a measurement of the part it names. */

    /* The lead carries a <br> that splits it mid-sentence. On a laptop
       that balances two lines; at 390px the copy already wraps four
       times and the forced break only adds a fifth. */

    .course_wrapper .main-title{
        font-size:14px;
        line-height:1.5;
    }

    /* The space in front of the <br> in the markup is what keeps
       "role," and "your" apart once the break is gone. A trailing space
       before a line break collapses away, so the laptop is unaffected. */

    .course_wrapper .main-title br{
        display:none;
    }

    /* Overview pane: 154px of icon-above-title, 119 of description and
       115 of stat boxes were the three biggest blocks in it. */

    .course_icon{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:18px;
    }

    .course_row_top{
        gap:8px;
        margin-bottom:.6rem;
    }

    .course_title{
        font-size:clamp(19px,5.4vw,23px);
        line-height:1.2;
    }

    .course_desc{
        font-size:13px;
        line-height:1.55;
        margin-bottom:14px;
    }

    .course_stat{
        padding:7px 3px 8px !important;
        border-radius:10px !important;
    }

    .course_stat_label{
        font-size:10.5px !important;
        line-height:1.2 !important;
        margin-top:2px !important;
    }

    .course_tags{
        gap:6px;
    }

    .course_tag{
        padding:6px 9px;
        font-size:11.5px;
    }

    .course_explore_btn{
        padding:11px 18px;
        font-size:13px;
    }

    /* Syllabus pane: six module rows at 54px plus 6px of margin each were
       360 of its ~775, and the closing panel another 181. */

    .course_module_circle{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .course_right_card h3{
        font-size:17px;
    }

    .course_module_info{
        font-size:11.5px;
        margin-bottom:10px;
        gap:5px;
    }

    .course_module_item{
        padding:7px 10px;
        margin-bottom:5px;
        border-radius:10px;
    }

    .course_module_left{
        gap:9px;
    }

    .course_module_num{
        min-width:24px;
        height:24px;
        font-size:11px;
        border-radius:7px;
    }

    .course_module_name{
        font-size:12px;
        line-height:1.25;
    }

    .course_module_time{
        font-size:11.5px;
    }

    .course_cta{
        padding:11px 12px;
        gap:9px;
        margin-top:6px;
        border-radius:12px;
    }

    .course_cta_icon{
        width:30px;
        height:30px;
        font-size:12px;
    }

    .course_cta_title{
        font-size:12.5px;
        line-height:1.3;
    }

    .course_cta_desc{
        font-size:11px;
        line-height:1.35;
    }

    /* Six module rows are the bulk of the syllabus pane. Tighter rows,
       and the "6 modules | 26 hours | 8 Projects" line back under the
       heading instead of indented past a 44px circle that is no longer
       there to clear. */

    .course_module_item{
        padding:9px 12px;
        margin-bottom:6px;
    }

    .course_module_name{
        font-size:13px;
        line-height:1.3;
    }

    .course_module_num{
        min-width:28px;
        height:28px;
    }

    .course_module_info{
        margin-left:0;
        margin-bottom:14px;
        flex-wrap:wrap;
        gap:6px;
    }



    /* ===========================================================
       HERO MOBILE LAYOUT & ALL PILLS SINGLE-LINE SYSTEM
       =========================================================== */

    /* 1. Hero Mobile Layout (Clean, Crisp & Proportionate) */
    .hero-section{
        padding-top:20px !important;
        padding-bottom:28px !important;
        overflow:hidden;
    }

    .hero-wrapper{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:20px !important;
        padding-inline:16px !important;
    }

    .hero-left{
        width:100% !important;
        flex:none !important;
        max-width:100% !important;
        align-items:flex-start !important;
        text-align:left !important;
    }

    .hero-heading{
        font-size:clamp(22px, 6.2vw, 30px) !important;
        line-height:1.26 !important;
        margin-bottom:12px !important;
        letter-spacing:-.01em !important;
        color:var(--ink) !important;
    }

    .hero-line-3{
        display:inline-flex !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        white-space:nowrap !important;
        gap:0.3em !important;
    }

    .hero-heading-rotator{
        display:inline-block !important;
        white-space:nowrap !important;
    }

    .hero-para{
        font-size:14px !important;
        line-height:1.55 !important;
        margin-bottom:18px !important;
        text-align:left !important;
        color:var(--ink-500) !important;
    }

    /* Hero Buttons */
    .hero-btn-row{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
        margin-bottom:18px !important;
        width:100% !important;
    }

    @media (min-width:481px){
        .hero-btn-row{
            flex-direction:row !important;
            flex-wrap:wrap !important;
            align-items:center !important;
        }
    }

    .hero-btn-row .btn-primary,
    .hero-btn-row .btn-secondary{
        width:100% !important;
        min-width:0 !important;
        padding:12px 18px !important;
        font-size:14px !important;
        font-weight:700 !important;
        white-space:nowrap !important;
        justify-content:center !important;
        text-align:center !important;
        border-radius:8px !important;
        min-height:46px !important;
    }

    @media (min-width:481px){
        .hero-btn-row .btn-primary,
        .hero-btn-row .btn-secondary{
            flex:1 1 auto !important;
            width:auto !important;
        }
    }

    .hero-btn-row .btn-primary i,
    .hero-btn-row .btn-secondary i{
        font-size:13px !important;
    }

    /* Learners Row */
    .hero-learners-row{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        gap:12px !important;
        width:100% !important;
        margin-top:4px !important;
    }

    .learners-avatar-stack{
        flex-shrink:0 !important;
        display:inline-flex !important;
        align-items:center !important;
    }

    .learners-avatar-stack span{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:34px !important;
        height:34px !important;
        border-radius:50% !important;
        border:2px solid #fff !important;
        background:#fff !important;
        box-shadow:0 1px 4px rgba(0,0,0,0.1) !important;
        margin-left:-8px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .learners-avatar-stack span:first-child{
        margin-left:0 !important;
    }

    .learners-avatar-stack img,
    .learner-avatar,
    .learner-avatar-frame{
        width:34px !important;
        height:34px !important;
        border-radius:50% !important;
        border:none !important;
        background:transparent !important;
        object-fit:cover !important;
        display:block !important;
        padding:0 !important;
        margin:0 !important;
    }

    .learner-avatar--panel{
        width:100% !important;
        height:100% !important;
        border-radius:50% !important;
        transform:scale(1.25) !important;
        object-position:center 40% !important;
    }

    .learners-text{
        font-size:13px !important;
        line-height:1.4 !important;
        color:var(--ink-500, #4b5563) !important;
        white-space:normal !important;
        margin:0 !important;
    }

    .learners-count{
        font-weight:700 !important;
        color:var(--primary, #ff6600) !important;
    }

    /* Hero Artwork Right */
    .hero-right{
        width:100% !important;
        flex:none !important;
        max-width:100% !important;
        margin-inline:auto !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        padding-top:6px !important;
    }

    .hero-blob{
        width:100% !important;
        max-width:400px !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
    }

    .hero-student-img{
        width:100% !important;
        max-width:400px !important;
        height:auto !important;
        object-fit:contain !important;
        transform:none !important;
        display:block !important;
    }

    /* 2. Oval Badges, Tags, Pills & Buttons in 1 Line (Never wrap to 2-3 lines) */
    .hero-badge,
    .pill,
    .badge,
    .cr-pill,
    .cr-tag,
    .course_tab,
    .exp-tab,
    .tab-btn,
    .filter-chip,
    .category-btn,
    .trust-pill,
    .standout-pill,
    .roadmap-badge,
    .bc-tag,
    .mentor-tag,
    .feature-tag,
    .review-badge,
    .btn-swap-label,
    .btn-swap-hover{
        white-space:nowrap !important;
        display:inline-flex !important;
        align-items:center !important;
        flex-shrink:0 !important;
        word-break:keep-all !important;
    }

    /* 3. Balanced Cards on Mobile */
    .feature-grid-row{
        gap:10px !important;
    }

    .standout-row{
        gap:6px !important;
    }

    .testimonial-card,
    .mentor-card{
        border-radius:16px !important;
    }

    /* 4. Mock Interviews Steps Horizontal Rail */
    .mi-panel{
        padding:22px 16px 26px !important;
        overflow:hidden !important;
    }

    .mi-panel-head{
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:6px !important;
        margin-bottom:20px !important;
    }

    .mi-panel-title{
        font-size:18px !important;
        line-height:1.25 !important;
    }

    .mi-panel-sub{
        font-size:13px !important;
        line-height:1.45 !important;
    }

    .mi-steps{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scroll-snap-type:x proximity !important;
        scroll-padding-left:4px !important;
        gap:20px !important;
        padding:4px 6px 14px 4px !important;
        margin:0 !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
    }

    .mi-steps::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
        display:none !important;
    }

    .mi-step{
        flex:0 0 160px !important;
        width:160px !important;
        min-width:160px !important;
        max-width:160px !important;
        scroll-snap-align:start !important;
        padding:14px 12px 16px !important;
        border-radius:14px !important;
        text-align:left !important;
        display:flex !important;
        flex-direction:column !important;
        box-sizing:border-box !important;
        position:relative !important;
    }

    .mi-step-top{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:8px !important;
        margin-bottom:12px !important;
        width:100% !important;
    }

    .mi-step-no{
        width:20px !important;
        height:20px !important;
        font-size:10.5px !important;
        font-weight:700 !important;
        flex-shrink:0 !important;
    }

    .mi-step-icon{
        width:36px !important;
        height:36px !important;
        font-size:15px !important;
        border-radius:10px !important;
        flex-shrink:0 !important;
    }

    .mi-step-title{
        font-size:13.5px !important;
        font-weight:700 !important;
        line-height:1.25 !important;
        margin-bottom:4px !important;
    }

    .mi-step-text{
        font-size:11.5px !important;
        line-height:1.4 !important;
        margin-top:4px !important;
    }

    .mi-step:not(:last-child)::after{
        content:"" !important;
        position:absolute !important;
        top:50% !important;
        right:-13px !important;
        left:auto !important;
        width:6px !important;
        height:6px !important;
        border-top:2px solid var(--ink-400, #9ca3af) !important;
        border-right:2px solid var(--ink-400, #9ca3af) !important;
        transform:translateY(-50%) rotate(45deg) !important;
        pointer-events:none !important;
        z-index:2 !important;
    }

    /* 5. Real Projects Horizontal Rail */
    .experience-tabs .rp-rail,
    .rp-rail{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        justify-content:flex-start !important;
        align-items:stretch !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scroll-snap-type:x mandatory !important;
        scroll-padding-left:16px !important;
        gap:14px !important;
        padding:6px 16px 18px 16px !important;
        margin-inline:-16px !important;
        max-width:calc(100% + 32px) !important;
        width:calc(100% + 32px) !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
    }

    .experience-tabs .rp-rail::-webkit-scrollbar,
    .rp-rail::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
        display:none !important;
    }

    .experience-tabs .rp-card,
    .rp-card{
        flex:0 0 270px !important;
        width:270px !important;
        min-width:270px !important;
        max-width:270px !important;
        scroll-snap-align:start !important;
        border-radius:14px !important;
        display:flex !important;
        flex-direction:column !important;
        box-sizing:border-box !important;
        background:rgba(22, 27, 32, 0.95) !important;
        border:1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow:0 10px 30px rgba(0,0,0,0.35) !important;
    }

    .rp-card-header{
        padding:8px 12px !important;
    }

    .rp-card-tag{
        font-size:10px !important;
        padding:3px 7px !important;
    }

    .rp-card-media{
        aspect-ratio:16 / 9.5 !important;
    }

    .rp-card-body{
        padding:14px 12px 16px !important;
        display:flex !important;
        flex-direction:column !important;
        flex:1 1 auto !important;
    }

    .rp-card-title{
        font-size:15px !important;
        font-weight:700 !important;
        line-height:1.25 !important;
        margin-bottom:6px !important;
    }

    .rp-card-text{
        font-size:12px !important;
        line-height:1.45 !important;
        margin-bottom:12px !important;
        color:var(--ink-500) !important;
        flex:1 1 auto !important;
    }

    .rp-card-tech{
        gap:5px !important;
        margin-top:auto !important;
    }

    .rp-card-tech li{
        font-size:10.5px !important;
        padding:3px 7px !important;
    }

    /* 6. Experience Journey Tabs (Auto Sync + Balanced Margins) */
    .experience-tabs{
        padding:54px 0 10px !important;
        overflow:hidden !important;
    }

    .experience-tabs__heading{
        width:calc(100% - 32px) !important;
        max-width:100% !important;
        margin:0 auto 18px !important;
        padding:0 !important;
    }

    .experience-tabs__heading h2{
        font-size:clamp(24px, 6.5vw, 32px) !important;
        line-height:1.15 !important;
    }

    .experience-tabs__nav{
        width:calc(100% - 32px) !important;
        max-width:100% !important;
        margin:0 auto 20px !important;
        padding:5px 6px !important;
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        gap:6px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scroll-snap-type:x proximity !important;
        scroll-padding-inline:10px !important;
        border-radius:14px !important;
        border:1px solid rgba(255,255,255,.16) !important;
        background:rgba(255,255,255,.07) !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
    }

    .experience-tabs__nav::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
        display:none !important;
    }

    .experience-tabs__nav button{
        flex:0 0 auto !important;
        padding:10px 14px !important;
        font-size:12px !important;
        white-space:nowrap !important;
        border-radius:9px !important;
        scroll-snap-align:center !important;
    }

    .experience-tabs__nav button.is-active{
        background:#ff6900 !important;
        color:#fff !important;
        box-shadow:0 4px 16px rgba(255,105,0,.35) !important;
    }

    .experience-tabs .rp-inner,
    .experience-tabs .lc-inner,
    .experience-tabs .cm-inner,
    .experience-tabs .rb-inner,
    .experience-tabs .mi-inner,
    .experience-tabs .cc-inner,
    .experience-tabs .pl-inner{
        padding-inline:16px !important;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .experience-tabs .rp-hero,
    .rp-hero{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .experience-tabs .rp-art,
    .rp-art{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 auto !important;
        padding:0 !important;
        box-sizing:border-box !important;
    }

    .experience-tabs .rp-window,
    .rp-window{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:260px !important;
        box-sizing:border-box !important;
        border-radius:14px !important;
        overflow:hidden !important;
        box-shadow:0 12px 32px rgba(0,0,0,0.35) !important;
    }

    .experience-tabs .rp-code,
    .rp-code{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:auto !important;
        box-sizing:border-box !important;
        font-size:clamp(10px, 3.1vw, 12.5px) !important;
        line-height:1.7 !important;
        padding:14px 14px 18px !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
        white-space:pre !important;
    }

    /* 7. FAQ 1-Column Vertical Stack on Mobile (Full Text Visibility & Clean Accordion) */
    .got-questions-container{
        padding:32px 16px !important;
    }

    .got-questions-media{
        max-width:180px !important;
        margin:0 auto 16px !important;
    }

    .got-questions-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
        width:100% !important;
        max-width:680px !important;
        margin-inline:auto !important;
    }

    .got-questions-card{
        display:block !important;
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        border-radius:12px !important;
        box-shadow:0 0 3px 1px rgba(238,126,72,0.6), 0 3px 8px rgba(238,126,72,0.2) !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .got-questions-btn{
        width:100% !important;
        padding:14px 16px !important;
        font-size:13.5px !important;
        line-height:1.4 !important;
        font-weight:600 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;
        height:auto !important;
        min-height:0 !important;
        box-sizing:border-box !important;
        text-align:left !important;
    }

    .got-questions-btn span:first-child{
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    .got-questions-icon-wrapper{
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
        margin-left:6px !important;
        flex-shrink:0 !important;
    }

    .got-questions-icon{
        font-size:12px !important;
        top:0 !important;
    }

    .got-questions-icon i{
        font-size:12px !important;
    }

    .got-questions-answer{
        max-height:0 !important;
        overflow:hidden !important;
        padding:0 16px !important;
        transition:max-height 0.35s ease, padding 0.35s ease !important;
    }

    .got-questions-card.active .got-questions-answer{
        max-height:600px !important;
        padding:10px 16px 16px !important;
    }

    .got-questions-answer p{
        font-size:13px !important;
        line-height:1.55 !important;
        color:#332C28 !important;
        margin:0 !important;
    }

    /* 8. Navbar Logo Visibility on Mobile */
    nav .logo{
        display:flex !important;
        align-items:center !important;
        height:100% !important;
        overflow:visible !important;
    }

    nav .logo img{
        height:54px !important;
        max-height:56px !important;
        width:auto !important;
        object-fit:contain !important;
        display:block !important;
    }

    /* 9. CTA Section (Your Next Step Starts Here - Mobile Stacked matching Reference) */
    .cta-hero{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        padding:clamp(28px, 6vw, 40px) 16px 24px !important;
        gap:16px !important;
        border-radius:36px 36px 0 0 / 22px 22px 0 0 !important;
        box-sizing:border-box !important;
        width:100% !important;
        overflow:hidden !important;
    }

    .cta-hero::before{
        height:50px !important;
    }

    .cta-left{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:8px !important;
        padding-bottom:0 !important;
        box-sizing:border-box !important;
    }

    .cta-logo{
        width:120px !important;
        max-width:100% !important;
        margin:-12px 0 -10px !important;
        display:block !important;
    }

    .cta-description{
        font-size:clamp(13px, 3.4vw, 14.5px) !important;
        line-height:1.55 !important;
        color:var(--ink-700, #444) !important;
        margin:0 0 2px 0 !important;
        max-width:100% !important;
        text-wrap:pretty !important;
    }

    .cta-callback{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:8px !important;
        margin-top:14px !important;
        padding-top:14px !important;
        border-top:1px solid rgba(255,102,0,0.18) !important;
    }

    .cta-callback h2{
        font-size:clamp(20px, 5.5vw, 25px) !important;
        line-height:1.22 !important;
        letter-spacing:-0.02em !important;
        font-weight:800 !important;
        color:var(--ink, #111) !important;
        margin:0 !important;
        text-wrap:balance !important;
    }

    .cta-callback p{
        font-size:clamp(13px, 3.4vw, 14.5px) !important;
        line-height:1.5 !important;
        color:var(--ink-700, #555) !important;
        margin:0 0 4px 0 !important;
        text-wrap:pretty !important;
    }

    .cta-form{
        display:flex !important;
        flex-direction:row !important;
        align-items:stretch !important;
        width:100% !important;
        max-width:380px !important;
        height:42px !important;
        min-height:42px !important;
        border:1.5px solid rgba(0,0,0,0.25) !important;
        border-radius:6px !important;
        background:#ffffff !important;
        overflow:hidden !important;
        margin:8px 0 0 0 !important;
        box-sizing:border-box !important;
    }

    .cta-select{
        width:auto !important;
        min-width:58px !important;
        height:100% !important;
        min-height:100% !important;
        font-size:13px !important;
        font-weight:600 !important;
        padding:0 18px 0 8px !important;
        border:none !important;
        border-right:1px solid rgba(0,0,0,0.18) !important;
        border-radius:0 !important;
        background-color:#ffffff !important;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat:no-repeat !important;
        background-position:right 6px center !important;
        background-size:10px !important;
        -webkit-appearance:none !important;
        appearance:none !important;
        color:#222 !important;
        box-sizing:border-box !important;
        cursor:pointer !important;
    }

    .cta-input{
        flex:1 1 auto !important;
        min-width:0 !important;
        width:auto !important;
        height:100% !important;
        min-height:100% !important;
        font-size:13.5px !important;
        padding:0 10px !important;
        border:none !important;
        border-radius:0 !important;
        background:transparent !important;
        color:#222 !important;
        outline:none !important;
        box-sizing:border-box !important;
    }

    .cta-input::placeholder{
        color:#888 !important;
        font-size:13px !important;
    }

    .cta-button{
        width:auto !important;
        min-width:auto !important;
        height:100% !important;
        min-height:100% !important;
        font-size:13px !important;
        font-weight:700 !important;
        letter-spacing:.01em !important;
        white-space:nowrap !important;
        padding:0 14px !important;
        border:none !important;
        border-radius:0 !important;
        background:#ff6600 !important;
        color:#ffffff !important;
        cursor:pointer !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-sizing:border-box !important;
        transition:background-color .2s ease !important;
    }

    .cta-button:active{
        background:#e65c00 !important;
    }

    .cta-form-status{
        margin-top:8px !important;
        font-size:12.5px !important;
    }

    .cta-right{
        width:100% !important;
        max-width:100% !important;
        flex:none !important;
        display:flex !important;
        justify-content:center !important;
        align-items:center !important;
        margin-top:24px !important;
        padding-bottom:6px !important;
        box-sizing:border-box !important;
    }

    .cta-phone-wrap{
        position:relative !important;
        width:200px !important;
        height:280px !important;
        min-height:280px !important;
        aspect-ratio:auto !important;
        display:block !important;
        margin:0 auto !important;
    }

    .cta-phone{
        position:absolute !important;
        width:auto !important;
    }

    .cta-phone-back{
        top:0 !important;
        bottom:auto !important;
        left:8px !important;
        right:auto !important;
        height:100% !important;
        width:auto !important;
        border-radius:24px !important;
        box-shadow:0 12px 28px rgba(0,0,0,0.14) !important;
    }

    .cta-phone-front{
        bottom:0 !important;
        top:auto !important;
        right:8px !important;
        left:auto !important;
        height:76% !important;
        width:auto !important;
        border-radius:20px !important;
        box-shadow:0 12px 28px rgba(0,0,0,0.14) !important;
    }

    /* 10. Recognised by Leading Institutions & Industries (Mobile Single Row & Clean Padding) */
    .recognized-section{
        padding:40px 16px 36px !important;
        width:100% !important;
        box-sizing:border-box !important;
    }

    .recognized-section .containz{
        width:100% !important;
        max-width:100% !important;
        gap:12px !important;
        padding:0 !important;
        box-sizing:border-box !important;
    }

    .recognized{
        margin-left:0 !important;
        margin-right:0 !important;
        text-align:center !important;
        width:100% !important;
        box-sizing:border-box !important;
    }

    .recognized h2{
        font-size:clamp(19px, 5.2vw, 24px) !important;
        line-height:1.22 !important;
        letter-spacing:-0.02em !important;
        margin:0 0 8px 0 !important;
    }

    .recognized p{
        font-size:12px !important;
        line-height:1.5 !important;
        color:var(--ink-500, #555) !important;
        margin:0 auto !important;
        max-width:100% !important;
    }

    .accred-row{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        gap:clamp(12px, 3.5vw, 22px) !important;
        margin:20px auto 0 !important;
        padding:0 !important;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }

    .accred-row li{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex:1 1 0 !important;
        max-width:110px !important;
    }

    .accred-row img{
        height:auto !important;
        max-height:46px !important;
        width:100% !important;
        max-width:92px !important;
        object-fit:contain !important;
        display:block !important;
        margin:0 auto !important;
    }

    /* 11. Career Community: Inside Our Community 4 Cards (Horizontal Scroll Rail) */
    .cc-cards,
    .experience-tabs .cc-cards{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        overscroll-behavior-x:contain !important;
        -webkit-overflow-scrolling:touch !important;
        scroll-snap-type:x mandatory !important;
        scroll-padding-left:16px !important;
        gap:14px !important;
        padding:6px 16px 16px 16px !important;
        margin-inline:-16px !important;
        max-width:calc(100% + 32px) !important;
        width:calc(100% + 32px) !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
        list-style:none !important;
        box-sizing:border-box !important;
    }

    .cc-cards::-webkit-scrollbar,
    .experience-tabs .cc-cards::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
        display:none !important;
    }

    .cc-card,
    .experience-tabs .cc-card{
        flex:0 0 220px !important;
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
        scroll-snap-align:start !important;
        border-radius:14px !important;
        display:flex !important;
        flex-direction:column !important;
        box-sizing:border-box !important;
        background:#161a1e !important;
        border:1px solid rgba(255, 255, 255, 0.12) !important;
        overflow:hidden !important;
        box-shadow:0 8px 24px rgba(0, 0, 0, 0.25) !important;
    }

    .cc-card-media,
    .experience-tabs .cc-card-media{
        position:relative !important;
        width:100% !important;
        height:125px !important;
        padding-bottom:0 !important;
        overflow:hidden !important;
        background:#111 !important;
    }

    .cc-card-media img,
    .experience-tabs .cc-card-media img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        display:block !important;
    }

    .cc-card-body,
    .experience-tabs .cc-card-body{
        padding:12px 14px 14px !important;
        display:flex !important;
        flex-direction:column !important;
        flex:1 1 auto !important;
    }

    .cc-card-title,
    .experience-tabs .cc-card-title{
        font-size:13.5px !important;
        font-weight:700 !important;
        color:#ffffff !important;
        margin:0 0 4px 0 !important;
        line-height:1.25 !important;
    }

    .cc-card-text,
    .experience-tabs .cc-card-text{
        font-size:11px !important;
        color:var(--experience-muted, #b7c0c4) !important;
        margin:0 !important;
        line-height:1.4 !important;
    }

}