/*---------- PAGE RESET STYLES - START ----------*/
    /* Border Box */
    *, *::before, *::after {
        box-sizing: border-box;
    }
    /* Media Defaults */
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }
    /* Form Element Defaults */
    input, button, textarea, select {
        font: inherit;
    }

    /* Avoid text overflows */
    p, h1, h2, h3, h4, h5, h6 {
        overflow-wrap: break-word;
    }
    /* Improve line wrapping */
    p {
        text-wrap: pretty;
    }
    h1, h2, h3, h4, h5, h6 {
        text-wrap: balance;
    }
  
/*---------- PAGE RESET STYLES - END ----------*/

/*---------- TEMPLATE FIXES & TESTING - START ----------*/
    .lang-selector-container{
        display: flex;
        align-items: center;
    }

    .testing-container{
        color: #fff;
        background-color: #0079c1;
        display: grid;
        gap: 10px;
        overflow: hidden;
    }
/*---------- TEMPLATE FIXES & TESTING - END  ----------*/

/*---------- PAGE VARIABLES - START ----------*/
    :root{
        /* colors */
        --clr-white: #fff;
        --clr-blue: #0075BE;
        --clr-blue-ultramarine: #005587;
        --clr-blue-active:#D5EFFE; /* unlock options knowledge */
        --clr-blue-cerulean: #73C3EB;
        --clr-azure: #E6F9FE; /* tools cards */
        --clr-light-grey: #D9DCE1;
        --clr-black: #001928; /* dark text */
        /* gradients */
        --grad-bg-page: ;
        --bdr-rad-round: 24px; 
        --bdr-rad-pill: 50vw; 
    }
/*---------- PAGE VARIABLES - END ----------*/

/*---------- GLOBAL STYLES - START ----------*/
    /* Typography */
    h1,h2,h3,h4,h5,h6,p{
        font-weight: 400; /* add strong tag for bold */
        color: inherit;
    }
    h1{
        font-size:calc(44rem/16);
        font-size: clamp(2.5rem, 2.3698rem + 0.5208vw, 2.75rem);
    }
    p{
        line-height: 1.5;
        font-size:calc(16rem/16);
    }
    main{
        color: var(--clr-white);
    }
/*---------- GLOBAL STYLES - END ----------*/

/*---------- UTILITY CLASSES - START ----------*/
    .container{
        --_max-width: 900px;
        --_gutter-width: 40px; /* 1/2 of this value on left and right sides */
        width: min(calc(100% - var(--_gutter-width)), var(--_max-width));
        margin-inline: auto;
    }

    .container--lg{
        --_max-width: 1168px;
    }
    .container--sm{
        --_max-width: 500px;
    }
    .container--hero{
        --_max-width:876px;
    }
    .container--fb{
        --_col-count: 12;
        --_col-gap: 16px;
        width: auto;
        display: grid;
        grid-template-columns: 
            1fr 
            repeat(var(--_col-count), calc((min(100% - var(--_gutter-width), var(--_max-width)) - (var(--_col-count) - 1) * var(--_col-gap)) / var(--_col-count))) 
            1fr;
        gap: var(--_col-gap);
    }
    /* natural vertical rhythm for text elements based on em value*/
    .flow > * + * {
        --_flow-gap: 0.5em;
        margin-top: var(--_flow-gap);
    }

    .flow--lg > * + * {
        --_flow-gap: 1em;
    }

    /* standard padding per section */
    .block-padding{
        --_top-padding:72px;
        --_bottom-padding: 72px;
        padding-block: var(--_top-padding) var(--_bottom-padding);
    }

    .block-margin{
        --_top-margin:72px;
        --_bottom-margin: 72px;
        margin-block: var(--_top-margin) var(--_bottom-margin);
    }

    .stack{
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
        place-content: center;
        isolation: isolate;
    }

    .stack > *{
        grid-area: 1/1;
    }

    .line-break{
        display: block;
    }

    .hidden{
        display: none;
    }

    .desktop-hidden{ 
        display: none;        
    }
    .sr-only{
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding:0;
        white-space: nowrap;
        clip-path: inset(100%);
        clip: rect(0 0 0 0);
        overflow: hidden;
    }
    /* Device related utilities and utility adjustments */
    @media(max-width:768px){
        .desktop-hidden{
            display: block;
        }
    }
    @media(max-width:500px){
        .container--mobile-hidden{
        width: 100%;
        }
        .block-padding{
            --_top-padding:48px;
            --_bottom-padding: 48px;
        }
        .line-break--mobile-only{
            display: block;
        }
        .hidden--mobile-only{
            display: none;
        }
    }
/*---------- UTILITY CLASSES - END ----------*/

/*---------- GLOBAL COMPONENTS - START ----------*/
    /* standard text links */
    .link--text{
        --_link-color: var(--clr-blue);
        font-weight: 700;
        color: var(--_link-color);
        transition: color 200ms ease;
    }
    .link--text:hover,.link--text:focus-visible{
        --_link-color: var(--clr-blue-ultramarine);
        text-decoration: underline;
    }
    /* buttons: links and interactivity */
    .button{
        --_btn-bg:transparent;
        --_btn-border: 0;
        --_btn-color:#001928;
        display: inline-block;
        justify-self: auto; /* prevent  stretching in grid containers */
        padding: 1em 2.29em; /* responsive 16px / 32px */
        background-color: var(--_btn-bg);
        font-size: calc(16rem/ 16);
        color: var(--_btn-color);
        font-weight: 600;
        text-transform: uppercase;
        border: var(--_btn-border);
        border-radius: var(--bdr-rad-pill);
        transition:
        opacity 200ms ease-in-out,
        background-color 200ms ease-in-out, 
        border 200ms ease-in-out,
        color 200ms ease-in-out;
    }
    /* primary: white button + bluetext */
    .button--primary{
        --_btn-bg: var(--clr-white);
        --_btn-border:1.7px solid var(--clr-white);
        --_btn-color: var(--clr-blue);
        letter-spacing: 2px;
    }
    .button--primary:hover, 
    .button--primary:focus-visible{
        --_btn-bg:#d9dadb;
        --_btn-border:1.7px solid #d9dadb;
    }
    /* secondary: blue button + whitetext */
    .button--secondary{
        --_btn-bg: var(--clr-blue);
        --_btn-border:1.7px solid var(--clr-blue);
        --_btn-color:var(--clr-white);
    }
    .button--secondary:hover, 
    .button--secondary:focus-visible{
        --_btn-bg:var(--clr-blue-ultramarine);
        --_btn-border:1.7px solid var(--clr-blue-ultramarine);
    }
/*---------- GLOBAL COMPONENTS - END ----------*/

/*---------- PAGE PARALLAX - START ----------*/
    /* background */
    body{
        --_background:linear-gradient(to bottom,rgb(0, 117, 190) 0%,rgb(0, 85, 135) 35.2%,rgb(0, 85, 135) 61.3%,rgb(0, 117, 190) 100%);
        background-image: var(--_background);
        background-repeat: repeat-y;
        background-size: 100% 150vh;
        background-size: 100% 150dvh;
        background-attachment: fixed;
    }

    /* parallax wrapper: wraps around all body content, takes over scroll and initiates perspective  */
    .parallax{
        height: 100vh;
        height: 100dvh;
        overflow-x: hidden;
        perspective: 1px;
        perspective-origin: center;
        scroll-behavior: smooth;
        overscroll-behavior: none;
    }

    /* parallax container: wraps around regular content and parallax elements, passing 3d perspective */
    .parallax__container{
        position: relative;
        z-index: 1;
        transform-style: preserve-3d;
    }

    /* content: ensures web content is always above parallax layers */
    .parallax__content{
        position: relative;
        transform-style: preserve-3d;
        z-index: 2;
        isolation: isolate;
    }

    /* applied on all parallax items */
    .parallax__element{
        position: absolute;
        pointer-events: none;
    }


    /* container for smaller images that cuts off in tablet/mobile views */
    .parallax__layer{
        width: 100%;
        min-width: 1400px;
        object-fit: cover;
        object-position:center;
        left: 50%;
        translate: -50% 0;
        transform: translateZ(-0.2px) scale(1.2); /* standard parallax */
        display: grid;
    }

    .parallax__layer--left{
        justify-items: start;
    }
    .parallax__layer--right{
        justify-items: end;
    }

    /* Global Parallax Element styles */

    .parallax__line{
        transform: translateZ(-0.4px) scale(1.4);
    }

    .parallax__moon{
        --_animation-duration: 6s;
        animation: moon var(--_animation-duration) ease-in-out infinite;
    }
    .parallax__satellite{
        --_animation-duration: 12s;
        animation: satellite var(--_animation-duration) ease-in-out infinite;
    }

    /* Welcome Parallax */
    .parallax__welcome-line {
        top: -280px;
        top: -780px; /* TEMP: for sticky nav */
    }

    .parallax__welcome-satellite{
        /* bottom: 10px */
        /* temp: uncomment above to revert */
        top: -280px;
    }
    .parallax__welcome-satellite > *{
        position: relative;
        right: 60px;
    }

    /* Card 1 Parallax */
    .parallax__card1-line {
        bottom: -250px;
    }
    .parallax__card1-moon{
        top: 60px;
    }
    .parallax__card1-moon > *{
        --_animation-duration: 8s;
        position: relative;
        left: 40px;
    }

    .parallax__card1-satellite{
        bottom: 20%;
    }
    .parallax__card1-satellite > *{
        --_animation-duration: 10s;
        position: relative;
        left: 170px;
        scale: -1 1;
    }

    /* Card 2 Parallax */
    .parallax__card2-line-top{
        top: -400px;
        scale: -1 1;
    }

    .parallax__card2-line-bottom{
        bottom:-200px;
    }
    .parallax__card2-satellite{
        top: 0;
    }
    .parallax__card2-satellite > * {
        position: relative;
        right: 60px;
    }
    /* parallax animations */
    @keyframes moon {
        0% { translate: 0 0; }
        50% { translate: 0 -14px; }
        100% { translate: 0 0; }
    }

    @keyframes satellite {
        0% { 
            translate: 0 0; 
            rotate: 0deg;
        }
        25% { 
            translate: 5px 14px; 
            rotate: 1deg;
        }
        50% { 
            translate: 9px 0px; 
            rotate: 4deg;
        }
        75% { 
            translate: 5px -8px; 
            rotate: -1deg;
        }
        100% { 
            translate: 0 0;
            rotate: 0deg;
        }
    }

    @media(max-width:600px){
        /* background */
        body{
            --_background: var(--clr-blue-ultramarine);
            background-color: var(--_background);
        }

        /* all parallax elements */
        .parallax__element{
            display: none;
        }
        .parallax{
            perspective: none;
        }
    }
/*---------- PAGE PARALLAX - END ----------*/

/*---------- HERO VIDEO - START ----------*/
   .hero{
        --_bottom-padding:42px;
        position: relative;
        display: grid;
        gap: 36px;
        background-color: var(--clr-white);
    }

    .hero::before{
        --_hero-gradient: linear-gradient(to top, #E6F9FE, transparent);
        content: " ";
        position: absolute;
        background: var(--_hero-gradient);
        bottom: 0;
        width: 100%;
        height: 30vh;
        height: 30dvh;
        z-index: 1;
        pointer-events: none;
    }

    .hero__title{
        font-size: calc(36rem/16); 
        font-weight: 400;
        color: #0075BE;
        text-align: center;
    }
    /* Video Hero */
    .hero__video-container{
        position: relative;
    }
    .hero__video{
        aspect-ratio: 876/367;
        width: 100%;
        z-index: -2;
    }
    /* backup static image */
    .hero__video--static{
        z-index: -3;
        width: 100%;
    }
    .hero__video--static img{
        width: 100%;
    }

    .hero__video-menu{
        position: absolute;
        left: 4px; 
        bottom: 4px;
    }

    .button--video-menu{
        --_size: 30px;
        --_opacity: 0;
        border-radius: 50vw;
        width: var(--_size);
        height: var(--_size);
        padding: 4px;
        display: grid;
        place-content: center;
        opacity: var(--_opacity);
        transition: opacity 200ms ease-in-out    ;
    }

    .hero__video--pause{
        padding-left: 2px;
        letter-spacing: 2px;
    }

    .hero__video--play{
        padding-left: 3px;
    }

    /* revealed visually when mouse hovers over video container or focuses onto button itself */
    .hero__video-container:hover .button--video-menu,.button--video-menu:focus-visible{
        --_opacity: 1;
    }

    .hero__text{
        z-index: 1;
    }
    .hero__text > *{
        color: #005587;
        text-align: center;
        font-size: calc(20rem / 16);
    }

    .hero__subtitle{
        font-size: calc(22rem / 16);
    }

    @media (max-width: 500px){
        .hero__title{
            font-size: calc(28rem / 16);
        }
        .hero__text{
            margin-block-start:10px;
        }
        .hero__text > * {
            font-size: calc(18rem / 16);
        }
    }

/*---------- HERO VIDEO - END ----------*/

/*---------- WELCOME - START ----------*/
    .welcome{
        --_top-padding: 120px;
        --_bottom-padding:0;
    }

    .welcome__content{
        --_bottom-margin: 10px;
        display: grid;
        justify-items: center;
        gap: 62px;
        text-align: center;   
    }
    .welcome__badge{
        position: relative;
        background-color: var(--clr-blue-active);
        border-radius: var(--bdr-rad-round);
        padding-block: 60px 20px;
        padding-inline: 20px;
        border: 6px solid var(--clr-blue-cerulean);
        color: var(--clr-blue-ultramarine);     
        width: fit-content;
    }
    .welcome__img{
        position: absolute;
        inset: -50% 0 0 50%;
        top: -50%;
        bottom: 0;
        right: 0;
        left: 50%;
        transform: translate(-50%, 0);
        aspect-ratio: 1/1;
        filter: drop-shadow(3.14px 3.14px 4.72px #00000040);
        transition:top 400ms ease,
        left 400ms ease,
        right 400ms ease,
        bottom 400ms ease;;
    }
    .welcome__title{
        font-size:calc(32rem/16);
    }
    /* mobile styles */
    @media(max-width: 601px){

        .welcome__content{
            gap: 40px;
        }
        .welcome__title{
            font-size:calc(24rem/16);
        }
    }

    /* temp: Sticky welcome */
    .welcome__sticky-container{
        will-change: transform, opacity;
        position: sticky;
        top: -40px;
        z-index: 10;
        padding-block: 120px 0;
        transition: opacity 300ms ease,
        transform 300ms ease,
        translate 300ms ease;
        transform: translateY(0);
        opacity: 1;
    }
    .sticky-container--active{
        translate: 0 -50px;
    }
    .sticky-container--active .welcome__badge{
        scale: 0.75;
        translate: 0 -80px;
        padding-block: 20px;
        padding-inline: 38px;
        margin-block: 60px 0;
    }
    .sticky-container--active .welcome__img{
        top: -25%;
        bottom: 0;
        right: 0;
        left:-8%;
    }
    [data-language="FR"] .sticky-container--active .welcome__img{
        left:-6%;
    }
    .sticky-container--hidden{
        transform: translateY(-20%);
        opacity: 0;
    }
    /* temp: sticky header animation classes */
    .welcome__badge{
        will-change: transform;
        margin-inline: auto;
        transition: margin-block 300ms ease;
        transition: scale 300ms ease,
        transform 300ms ease,
        translate 300ms ease,
        padding-block 300ms ease, 
        padding-inline 300ms ease,
        margin-block 300ms ease;
    }

    .welcome__title{
        margin-block-start: 62px;
    }
    @media(max-width: 601px){
        .welcome__title{
            margin-block-start: 40px;
        }
        .sticky-container--active .welcome__badge{
            translate: 20px -80px;
        }
    }

    @media(max-width: 401px){
        [data-language="FR"][data-version="intermediate"] .sticky-container--active .welcome__img{
            top:-5%;
        }
    }

/*---------- WELCOME - END ----------*/

/*---------- FULLBLEED CARDS - START ----------*/
    /* component styles: affects all cards (cards 1/cards2) */
    .container--card{
        --_bg-color: var(--clr-white);
        --_text-color: var(--clr-black); 
        margin-block: 80px;
    }

    /* position modifiers */
    .container--card-left{
        --_card-position: 2/13;
        --_card-bg-position: 1/3;
        --_card-pad-left: 0;
        --_card-pad-inline: 0 60px;
        --_card-img-left: auto;
        --_card-img-right: -210px;
        --_bdr-radius: 0  var(--bdr-rad-round) var(--bdr-rad-round) 0;
    }
    .container--card-right{
        --_card-position: -2/-13;
        --_card-bg-position: -1/-3;
        --_card-pad-inline: 60px 0px;
        --_card-img-left: 24px;
        --_card-img-right: auto;
        --_bdr-radius:  var(--bdr-rad-round) 0 0 var(--bdr-rad-round);
        --_card-text-offset: clamp(160px, -400px + 70vw, 230px); /* 230px -> 160px from 900px -> 800px */
    }


    /* card bg */
    .container--card::before{
        content: " ";
        grid-column: var(--_card-bg-position);
        grid-row: 1;
        background-color: var(--_bg-color);
    }

    /* card styles */
    .card{
        position: relative;
        grid-column: var(--_card-position);
        grid-row: 1;
        display: grid;
        justify-items: start;
        background-color: var(--_bg-color);
        color: var(--_text-color);
        border-radius: var(--_bdr-radius);
        padding-block: 70px;
        padding-inline: var(--_card-pad-inline) ;
    }

    .card__content{
        justify-self: stretch;
        display: flex;
        gap: 40px;
        justify-content: space-between;
        align-items: center;
    }
    .card__title{
        font-size:calc(36rem/16);
        max-width: clamp(320px, -211.5942px + 81.1594vw, 600px); /*  clamp between viewport 1000px -> 655px*/
    }

    .card__text{
        max-width: clamp(310px, 129.403px + 29.8507vw, 410px); /* clamp between viewport: 940px -> 605px */
        font-weight: 600;
    }
    .card__button{
        --_flow-gap: 1.6em;
    }

    .card__img{
        min-width: 100px;
    }


    @media(max-width: 601px){
        /* fb to standard mobile wrapper, reset col */
        .container--card{
            width: calc(100% - var(--_gutter-width));
            grid-template-columns: 1fr;
            margin-block: 72px;
        }
        .container--card-left,
        .container--card-right{
            --_card-position: auto;
            --_card-bg-position: auto;
            --_bdr-radius:  var(--bdr-rad-round);
            --_card-img-left: 50%;
            --_card-img-right: 0;
        }
        /* disable fb bg */
        .container--card::before{
            content: none;
        }
        .card__text{
            max-width: 320px;
        }
        .card{
            padding-block: 80px 40px;
            padding-inline: 40px;
            justify-items: center;
            text-align: center;
        }

        .card__content{
            flex-direction: column-reverse;
            align-items: center;
        }

        .card__content .flow{
            display: grid;
            justify-items: center;
        }            
        /* move img */
        .card__img{
            max-width: 150px;
        }

        .container--card-left .card__title,.card__title{
            font-size:calc(30rem/16);
            max-width: none;
        }
        /* ed-video */
        .ed-video .container--card{
            margin-block: 60px;
        }

        /* gradient backgrounds */

        .ed-video,.trading-skills{
            position: relative;
        }
    }
/*---------- FULLBLEED CARDS - END ----------*/

/*---------- PLATFORM TOOLS - START ----------*/
    .platform{
        --_top-margin: 144px; /* adjusting block-margin class */
        --_bg-color-opaque: #348DC4;
        --_bg-color-translucent: #53a8ddaa;
        --_border: 4px solid var(--clr-white);
        position: relative;
        border: 4px solid var(--clr-white);
        border-radius: var(--bdr-rad-round);
        padding: 40px;
        z-index: 5;
        background: linear-gradient(to bottom,
        var(--_bg-color-opaque),
        var(--_bg-color-translucent) 70%
        ) ;
    }

    .platform__badge{
        --_size: 164px;
        /* position badge */
        position: absolute;
        top: -41px;
        left: 50%;
        transform: translate(-50%, -50%);
        /* border styles */
        width: var(--_size);
        height: calc(var(--_size) / 2);
        border-top-left-radius: var(--_size);
        border-top-right-radius: var(--_size);
        border: var(--_border);
        background-color: var(--_bg-color-opaque);
        border-bottom-color: var(--_bg-color-opaque);
        display: grid;
        justify-items: center;
        padding-block-start: 24px;
        z-index: 2;

    }

    .platform__badge::before{
        content: "";
        position: absolute;
        width: var(--_size);
        height: 3px;
        background-color: var(--_bg-color-opaque);
        bottom: -6px;
        z-index: -2;
    }
    .platform__title{
        text-align: center;
    }

    .platform__grid{
        --_min-card-size: 400px;
        --_max-card-size: 520px;
        --_grid-gap: 40px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(calc(var(--_min-card-size) - var(--_grid-gap)), 1fr));
        gap: var(--_grid-gap);
        padding-block-start: 24px;
    }

    /* for odd number of children, last child centered */


    .platform__grid--odd .tool:last-child{
        grid-column: 1 / span 2;
        justify-self: center;
        width: 520px;
    }

    @media(max-width: 951px){
        .platform__grid--odd{
            grid-template-columns: 1fr;
            column-gap: 0;
        }
        .platform__grid--odd .tool{
            grid-column: span 2;
        }
        .platform__grid--odd .tool:last-child{
            width: 100%;
        }
    }
    @media(max-width: 600px){
        .platform{
            padding: 20px 20px 24px;
        }
        .platform__title {
            margin-block-start: 32px;
        }    
    }
    @media(max-width: 500px){
        .platform{
            padding: 20px 14px 20px;
        }
        .platform__grid{
            grid-template-columns: 1fr;
        }
        .platform__badge{
            --_size: 124px;
            top: -31px;
        }
        .platform__badge img{
            width: 60px;
        }
    }

    @media(max-width: 400px){
        .platform{
            --_gutter-width:10px;
        }
    }
/*---------- PLATFORM TOOLS - END ----------*/

/*---------- TOOL CARD - START ----------*/

    .tool{
        background-color: var(--clr-white);
        color: var(--clr-black);
        text-align: center;
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        grid-gap: 0; /* prevents inheriting parent grid's gap. */
    }
    /* row 1: description */
    .tool__description{
        background-color: var(--clr-azure);
        padding: 24px 24px 0;
    }
    .tool__title{
        font-size:calc(24rem/16);
    }

    .tool__title--sm{
        font-size:calc(18rem/16);
        font-weight: 400;
    }

    .tool__text{
        min-height: 80px;
        padding-block-end: 20px;
    }
    /* row2: link cta */
    .tool__cta{
        z-index: 1;
    }
    .tool__img, .tool__img img{
        aspect-ratio: 343/257;
        justify-self: center;
    }
    .tool__play-button{
        opacity: 0.6;
        justify-self: center;
        align-self: center;
        z-index: 0;
        transition: 200ms ease-in-out;
    }

    .tool__cta:hover .tool__play-button, .tool__cta:focus-visible .tool__play-button{
        opacity: 1;
    } 

    .tool__nav{
        padding: 10px 8px;
        display: inline-flex;
        gap: 20px;
    }
    .tool__instruction{
        width: 100%;
        padding-block: 10px 20px;
        border: 6px solid #F5F6F7;
        border-top: 0;
        display: grid;
        grid-template-rows: 257px auto;
        justify-content: center;
    }

    .tool__instruction p, .tool__instruction ol{
        margin-inline: auto;
    }
    .tool__instruction__start{
        margin-block-start: 12px;
    }
    .tool__instruction__start, .tool__instruction__end{
        max-width: 90%;
    }

    /* all children but last get right arrow */
    .tool__nav > * + *::before {
        content: " ";
        position: absolute;
        width: 12px;
        height: 12px;
        height: 100%;
        background: url("https://image.e-news.bmo.com/lib/fe9615737c62057e77/m/1/5469380e-f776-4819-a857-e0738342e788.svg");
        background-repeat: no-repeat;
        background-position: center;
        left: -16px;
        top: 25%;
        top: 0;
    }

    .tool__badge{
        position: relative;
        text-transform: uppercase;
        background-color: var(--clr-light-grey);
        font-size:calc(14rem/16);
        font-size:clamp(calc(12rem/16), 5.4483px + 0.6897vw, calc(14rem/16));        ;
        font-weight: 600;
        padding: .2em .5em;
        display: grid;
        align-items: center;
    }

    @media(max-width:600px ){
        .tool__instruction__start, .tool__instruction__end,.tool__nav{
            max-width: calc(100% - 16px);
        }
    }

    @media(max-width:450px){
        .tool__img, .tool__img img{
            aspect-ratio: initial;
            max-height: 200px;
            object-fit: cover;
        }
        .tool__instruction {
            grid-template-rows: 200px auto;
        }

        .tool__badge{
            font-size:calc(12rem/16);
        }
        .tool__nav{
            padding-inline: 0px;
        }
    }


/*---------- TOOL CARD - END ----------*/

/*---------- PATH NAVIGATION - START ----------*/
    .path{
        background-color: var(--clr-blue-active);
        color: var(--clr-blue-ultramarine);
        border-top:2px solid var(--clr-white);
        border-bottom:2px solid var(--clr-white);
        text-align: center;
    }

    .path__title{
        text-transform: uppercase;
        font-size:calc(24rem/16);
        font-weight: 600;
        letter-spacing: 1px;
    }

    .path__nav{
        --_bg-color: rgba(255, 255, 255, 0.6); /* mimic opacity without passing to children */
        margin-block: 40px;
        border:6px solid var(--_bg-color) ;
        border-radius: var(--bdr-rad-pill);
        background-color: var(--_bg-color);
        display: flex;
        justify-content: space-between;
    }

    /* Path arrows */
    .path__arrows{
        --_chevron-width: 30px;
        --_chevron-height: 30px;
        --_chevron-left-rotate: 0deg;
        --_chevron-right-rotate: 0deg;
    }
    .path__arrows::before, 
    .path__arrows::after{
        content: " ";
        position: absolute;
        width: var(--_chevron-width);
        height:var(--_chevron-height);
        background: url(https://image.e-news.bmo.com/lib/fe9615737c62057e77/m/1/d37347ba-4498-4af5-af2a-eb2c30869941.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 1;
        transform: translate(-50%, -50%);
        transform-origin: center center;
        top: 50%;
        transition: transform 400ms ease-in-out;
    }
    .path__arrows::before{
        transform: translate(-50%, -50%) rotate(var(--_chevron-left-rotate, 0deg));
        left: -50%;
    }

    .path__arrows::after{
        transform: translate(-50%, -50%) rotate(var(--_chevron-right-rotate, 0deg));
        left: 150%;
    }
    /* Arrow Modifier classes */

    /* beginner */
    .path__arrows--beginner{
        --_chevron-left-rotate: 0;
        --_chevron-right-rotate: 0;
    }

    /* intermediate */
    .path__arrows--intermediate{
        --_chevron-left-rotate: 180deg;
        --_chevron-right-rotate: 0;
    }
    /* advanced */
    .path__arrows--advanced{
        --_chevron-left-rotate: 180deg;
        --_chevron-right-rotate: 180deg;
    }


    /* PATH CTA ITEMS */
    .path__item{
        /* animated properties for .path__icon-container */
        --_scale: 1;
        --_bdr-color: var(--clr-blue-active);
        --_bg-color: var(--clr-blue-active);
        --_cta-opacity: .6;
        --_cta-text-opacity: 0;
        --_box-shadow-opacity: 0;
        position: relative;
    }

    .path__cta-text{
        position: absolute; 
        /* bottom: -70%; */
        transform: translate(-50%, -50%);
        bottom: -100%;
        left: 50%;
        width: 180px;
        opacity: 0;
        transition: opacity 200ms ease-in-out;
        pointer-events: none;
    }

    .path__cta{
        display: grid;
        justify-items: center;
        opacity: var(--_cta-opacity);
        transition: opacity 200ms ease-in-out;
    }

    .path__icon-container{
        position: relative;
        border: 4px solid var(--_bdr-color);
        background-color: var(--_bg-color);
        scale: var(--_scale);
        border-radius: var(--bdr-rad-pill);
        padding: 6px;
        transition: border 200ms ease-in-out,
        background-color 200ms ease-in-out,
        scale 200ms ease-in-out;
    }

    .path__icon{
        pointer-events: none;
    }

    /* performant box shadow (on pseudo element with opacity at 0): activated when when path_cta is applied */
    .path__icon-container::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 105%;
        height: 105%;
        transform: translate(-50%, -50%);
        padding: inherit;
        border: inherit;
        border-radius: var(--bdr-rad-pill);
        box-shadow: 4px 4px 8px #00000040;
        pointer-events: none;
        z-index: -1;
        opacity: var(--_box-shadow-opacity);
        transition: opacity 200ms ease-in-out;
    }

    /* Using js: remove action selectors */

    .path__cta:active,.path__cta--active{
        --_scale: 1.28;
        --_bg-color: var(--clr-white);
        --_box-shadow-opacity: 1;
        --_cta-opacity: 1;
    }
    .path__cta--active .path__cta-text{
        opacity: 1;
        pointer-events: all;
    }

    @media(max-width:600px){
        /*  */
        .path__nav{
            max-width: 80%;
            min-width: 316px;
            margin-inline: auto;
        }
        /* icon adjustment */
        .path__icon{
            width: 50px;
        }
        .path__cta-text {
            bottom: -120%;
        }
        /* arrow adjustment */
        .path__arrows{
            --_chevron-width: 20px;
            --_chevron-height: 20px;
        }

    }
    @media(max-width: 500px){
        .path__arrows::before{
            left: -40%;
        }

        .path__arrows::after{
            left: 140%;
        }

        .path__cta-text{
            font-size: 14px;
        }
    }

    @media(max-width: 400px){
        .path__cta-text{
            width: 150px;
        }
    }

/*---------- PATH NAVIGATION - END ----------*/