/* ============================ Shared animations ============================ */
@keyframes lxThTitleShimmer {
    0%   { background-position: 150% center; }
    100% { background-position: -150% center; }
}

@keyframes lxThOrbA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(60px, 40px) scale(1.12); }
}

@keyframes lxThOrbB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-70px, -40px) scale(1.15); }
}

@keyframes lxThFadeInUp {
    from { opacity: 0; transform: translateY(38px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Entry animations — fade-and-rise used by the hero on load and by .lx-reveal
   targets when JS marks them as in-view. expo-out curve [0.16, 1, 0.3, 1]
   gives a fast start and graceful settle (the "Stripe / Apple" feel). */
@keyframes lxThEntryUp {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes lxThEntryFade {
    from { opacity: 0; transform: scale(0.985); }
    to   { opacity: 1; transform: scale(1); }
}


/* START Desktop view */
@media (min-width: 1201px) {

    .lx-th-mobile { display: none; }

    /* ============================ Banner ============================ */
    .lx-banner-trading-hours {
        position: relative;
        min-height: 25rem;
        --th-spill: 0rem;
        z-index: 3;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 5rem 0 var(--th-spill);
        isolation: isolate;
    }


    .lx-th-decor {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: var(--th-spill);
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        border-bottom-right-radius: 2rem;
        border-bottom-left-radius: 2rem;
        background-blend-mode: overlay;
        background-color: #157f8b;
        background-image:
            radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
            radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
    }

    .lx-th-decor::before,
    .lx-th-decor::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-th-decor::before {
        top: -120px;
        left: -80px;
        width: 340px;
        height: 340px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxThOrbA 22s ease-in-out infinite;
        will-change: transform;
    }

    .lx-th-decor::after {
        bottom: -140px;
        right: -100px;
        width: 380px;
        height: 380px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxThOrbB 28s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title {
        position: relative;
        z-index: 1;
        margin-top: 2rem;
        text-align: left;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: left;
        margin: 4rem 0 0;
        font-size: 3rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
        background: linear-gradient(
            110deg,
            #ffffff 0%,
            #eaf9fb 30%,
            #ffffff 42%,
            #d5f6fa 50%,
            #ffffff 58%,
            #eaf9fb 70%,
            #ffffff 100%
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxThTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: left;
        color: #f0f6f8;
        font-size: 1.1rem;
        font-weight: 400;
        margin: 1rem 0 0;
        max-width: 620px;
        letter-spacing: 0.01em;
        line-height: 1.5;
        opacity: 0.95;
    }

    /* Lajur gambar rapat ke bawah baris — gambar duduk atas garis teal */
    .lx-banner-trading-hours .lx-banner-trading-hours-image {
        position: relative;
        z-index: 1;
        align-self: flex-end;
        margin: 2rem 0 0 0;
    }

    /* Avada ships .container{overflow:hidden} site-wide, and that is what
       clips the banner image where it leaves the column. Scoped override —
       two classes beat the bare .container. */
    .lx-banner-trading-hours .container {
        overflow: visible;
    }

    /* Grows to the left, not to the right. margin-left:auto computes to 0 once
       the image is wider than its column, so the old rule pushed the extra 20%
       past the container's right edge — outside anything this file controls,
       where the theme clips it. Pulling it left instead keeps the right edge
       flush with the column and the whole image inside the container.

       The 20% lands in the slack between the subtitle's 620px cap and the
       title column: 76px of growth against 140px of slack at the narrowest
       desktop container, so it never reaches the text. */
    .lx-banner-trading-hours .lx-banner-trading-hours-image {
        z-index: 2;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-image img {
        display: block;
        width: 120%;
        max-width: none;
        height: auto;
        margin-left: -20%;
    }

    /* ============================ Schedule section ============================ */
    .lx-trading-hours-second-section {
        margin: 5rem auto 0;
        max-width: 1200px;
        padding: 0 1rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-trading-hours-second-section .lx-trading-hours-second-section-title h3 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 0 0 0.85rem;
        text-align: center;
    }

    .lx-trading-hours-second-section .lx-trading-hours-second-section-description p {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.05rem;
        font-weight: 400;
        line-height: 1.7;
        color: #5d5c5c;
        max-width: 880px;
        margin: 0 auto;
        text-align: center;
    }

    /* ============================ Tabs / accordion ============================ */
    .lx-trading-hours-third-section {
        margin: 3rem auto 0;
        max-width: 1200px;
        padding: 0 1rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /* ============================ Get Started ribbon ============================ */
    /* Full-width thin teal ribbon — background is on the section so it bleeds
       edge-to-edge; the inner container is capped at 1200px so the text and
       button align with the rest of the page's content track. */
    .lx-trading-hours-four-section {
        margin: 5rem 0 0;
        background-color: #1aa9b7;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1.4rem 1rem;
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content {
        margin-left: 0;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content h4 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.3;
        color: #ffffff;
        margin: 0 0 0.25rem;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content p {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.92);
        margin: 0;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container-button .btn-lx-open-account {
        display: inline-block;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        color: #199caa;
        border-radius: 2rem;
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
        padding: 0.5rem 1.75rem;
        text-align: center;
        white-space: nowrap;
    }
}
/* END Desktop view */


/* START Tablet view */
@media (min-width: 768px) and (max-width: 1200px) {
    /* Tablet still uses the table tree; hide the accordion. */
    .lx-th-mobile { display: none; }

    /* Banner */
    .lx-banner-trading-hours {
        position: relative;
        min-height: 20rem;
        --th-spill: 0rem;          /* lihat blok desktop */
        z-index: 3;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 3rem 1rem var(--th-spill);
        isolation: isolate;
    }

    .lx-th-decor {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: var(--th-spill);
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        border-bottom-right-radius: 2rem;
        border-bottom-left-radius: 2rem;
        background-blend-mode: overlay;
        background-color: #157f8b;
        background-image:
            radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
            radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
    }

    .lx-th-decor::before,
    .lx-th-decor::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(50px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-th-decor::before {
        top: -100px;
        left: -60px;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxThOrbA 22s ease-in-out infinite;
        will-change: transform;
    }

    .lx-th-decor::after {
        bottom: -120px;
        right: -80px;
        width: 320px;
        height: 320px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxThOrbB 28s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title {
        position: relative;
        z-index: 1;
        margin-top: 1rem;
        text-align: center;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: center;
        margin: 1rem 0 0;
        font-size: 2.2rem;
        letter-spacing: -0.02em;
        line-height: 1.1;
        background: linear-gradient(
            110deg,
            #ffffff 0%,
            #eaf9fb 30%,
            #ffffff 42%,
            #d5f6fa 50%,
            #ffffff 58%,
            #eaf9fb 70%,
            #ffffff 100%
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxThTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
        color: #f0f6f8;
        font-size: 1rem;
        font-weight: 400;
        margin: 0.85rem auto 0;
        max-width: 600px;
        letter-spacing: 0.01em;
        line-height: 1.6;
        opacity: 0.95;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-image {
        position: relative;
        z-index: 1;
        align-self: flex-end;
        margin: 1.5rem 0 0;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-image img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    /* Schedule section */
    .lx-trading-hours-second-section {
        margin: 4rem auto 0;
        padding: 0 1.25rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-trading-hours-second-section .lx-trading-hours-second-section-title h3 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.75rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 0 0 0.85rem;
        text-align: center;
    }

    .lx-trading-hours-second-section .lx-trading-hours-second-section-description p {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.65;
        color: #5d5c5c;
        margin: 0 auto;
        text-align: center;
        max-width: 720px;
    }

    /* Tabs */
    .lx-trading-hours-third-section {
        margin: 2.5rem auto 0;
        padding: 0 1.25rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /* Get Started ribbon — bg on section for edge-to-edge bleed, content
       capped to match the page's content track. */
    .lx-trading-hours-four-section {
        margin: 4rem 0 0;
        background-color: #1aa9b7;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1.25rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content {
        margin-left: 0;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content h4 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
        color: #ffffff;
        margin: 0 0 0.25rem;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content p {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.92);
        margin: 0;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container-button .btn-lx-open-account {
        display: inline-block;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        color: #199caa;
        border-radius: 2rem;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        padding: 0.5rem 1.5rem;
        text-align: center;
        white-space: nowrap;
    }

    /* Trading-hours table — the inline <style> in trading-hours-tab.php sets
       min-width:900px on the table, which overflows the viewport on tablet.
       Drop the min-width and tighten the cells so all date columns fit. */
    .th-wrapper .th-table-wrapper {
        width: 100%;
        overflow-x: auto;
    }

    .th-wrapper table.trading-hours {
        min-width: 0;
        width: 100%;
        font-size: 0.8rem;
        table-layout: fixed;
    }

    .th-wrapper table.trading-hours th,
    .th-wrapper table.trading-hours td,
    .th-wrapper .th-panel td {
        padding: 0.85rem 0.25rem;
        word-break: break-word;
    }

    .th-wrapper table.trading-hours td.symbol,
    .th-wrapper table.trading-hours th.symbol {
        width: 90px;
    }

    .th-wrapper .th-btn {
        font-size: 0.9rem;
        padding: 0.65rem 0.5rem;
    }

    .th-wrapper .th-btn.active {
        font-size: 1.1rem;
    }
}
/* END Tablet view */


/* START Mobile view */
@media (max-width: 767px) {
    /* Mobile uses the accordion tree; hide the table. */
    .lx-th-desktop { display: none; }

    /* Banner — title and image stack; centered text reads better at narrow widths */
    .lx-banner-trading-hours {
        position: relative;
        min-height: 26rem;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        overflow: hidden;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        padding: 3rem 1rem 0;
        isolation: isolate;
    }

    /* Mobile: tiada julur — teal tutup penuh kotak banner */
    .lx-th-decor {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        background-blend-mode: overlay;
        background-color: #157f8b;
        background-image:
            radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 35%),
            radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
            radial-gradient(circle at center center, #1eb1c2 0%, #157f8b 70%, #0f6470 100%);
    }

    .lx-th-decor::before,
    .lx-th-decor::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(50px);
        pointer-events: none;
        z-index: 0;
    }

    .lx-th-decor::before {
        top: -80px;
        left: -50px;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
        animation: lxThOrbA 22s ease-in-out infinite;
        will-change: transform;
    }

    .lx-th-decor::after {
        bottom: -90px;
        right: -60px;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(30, 177, 194, 0.45), transparent 70%);
        animation: lxThOrbB 28s ease-in-out infinite;
        will-change: transform;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title {
        position: relative;
        z-index: 1;
        margin-top: 1rem;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-title {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-weight: 800;
        text-align: center;
        margin: 1.5rem 0 0;
        font-size: 1.85rem;
        letter-spacing: -0.02em;
        line-height: 1.15;
        background: linear-gradient(
            110deg,
            #ffffff 0%,
            #eaf9fb 30%,
            #ffffff 42%,
            #d5f6fa 50%,
            #ffffff 58%,
            #eaf9fb 70%,
            #ffffff 100%
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: lxThTitleShimmer 11s ease-in-out infinite;
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-subtitle {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        text-align: center;
        color: #f0f6f8;
        font-size: 0.95rem;
        font-weight: 400;
        margin: 0.85rem auto 0;
        max-width: 480px;
        padding: 0 0.5rem;
        letter-spacing: 0.01em;
        line-height: 1.6;
        opacity: 0.95;
    }

    .lx-banner-trading-hours .lx-banner-trading-hours-image {
        position: relative;
        z-index: 1;
        margin: 1.25rem 0 0;
    }

    /* Schedule section */
    .lx-trading-hours-second-section {
        margin: 3rem auto 0;
        padding: 0 1rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-trading-hours-second-section .lx-trading-hours-second-section-title h3 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        line-height: 1.3;
        color: #1a1a1a;
        margin: 0 0 0.75rem;
        text-align: center;
    }

    .lx-trading-hours-second-section .lx-trading-hours-second-section-description p {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.95rem;
        font-weight: 400;
        line-height: 1.65;
        color: #5d5c5c;
        margin: 0 auto;
        text-align: center;
        padding: 0 0.5rem;
    }

    /* Tabs / accordion */
    .lx-trading-hours-third-section {
        margin: 2rem 0 0;
        padding: 0 1rem;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    /* Get Started ribbon — stacked on narrow screens, still edge-to-edge teal band */
    .lx-trading-hours-four-section {
        margin: 3rem 0 0;
        background-color: #1aa9b7;
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1.25rem 1rem;
        text-align: center;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content {
        margin: 0 0 0.85rem;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content h4 {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
        color: #ffffff;
        margin: 0 0 0.25rem;
        text-align: center;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container .lx-trading-hours-four-container-content p {
        font-family: 'Roboto', Arial, Helvetica, sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        line-height: 1.5;
        color: rgba(255, 255, 255, 0.92);
        margin: 0;
        text-align: center;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container-button {
        display: flex;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .lx-trading-hours-four-section .lx-trading-hours-four-container-button .btn-lx-open-account {
        display: inline-block;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        color: #199caa;
        border-radius: 2rem;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        padding: 0.5rem 1.75rem;
        text-align: center;
        white-space: nowrap;
    }
}
/* END Mobile view */


/* ============================ Page enhancements ============================ */
/* Standardized polish — mirrors the account-types / islamic-account pattern so
   all three pages feel consistent. Brand colors preserved (#199caa / #1eb1c2). */

/* Hero entry — title keeps its shimmer (multi-animation shorthand) and adds a
   fade-and-rise on load. Subtitle and image stagger in after for a layered
   reveal. Selectors match the breakpoint specificity (3 classes) so this rule
   wins on cascade order across all viewports. */
.lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-title {
    animation:
        lxThTitleShimmer 11s ease-in-out infinite,
        lxThEntryUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-subtitle {
    animation: lxThEntryUp 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}

.lx-banner-trading-hours .lx-banner-trading-hours-image {
    animation: lxThEntryFade 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* Scroll-reveal — JS adds .is-visible when the target enters the viewport.
   Sections below the fold (schedule heading/description, tabs, ribbon) wear
   .lx-reveal so they fade and rise as the user scrolls down. */
.lx-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.99);
    transition:
        opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.lx-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* CTA button polish — pointer cursor, branded focus ring, weighted hover lift.
   !important on the transition because each breakpoint defines its own short
   transition that would otherwise win the cascade. */
.btn-lx-open-account {
    cursor: pointer;
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease !important;
}

@media (hover: hover) {
    .btn-lx-open-account:hover {
        background-color: #f3fafb;
        border-color: #f3fafb;
        color: #148094;
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
    }
}

.btn-lx-open-account:focus {
    outline: none;
}

.btn-lx-open-account:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

/* Reduced-motion — kill all the new motion layers */
@media (prefers-reduced-motion: reduce) {
    .lx-th-decor::before,
    .lx-th-decor::after,
    .lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-title,
    .lx-banner-trading-hours .lx-banner-trading-hours-title .trading-hours-subtitle,
    .lx-banner-trading-hours .lx-banner-trading-hours-image {
        animation: none !important;
    }
    .lx-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .btn-lx-open-account {
        transition: none !important;
    }
}