/* FX page mobile — match shared vorto.io HTML */

/* Kill glass footer labels */
body.page-fx .glass-box-section .glass::before,
body.page-fx .container.glass-box-section .glass::before {
    content: none !important;
    display: none !important;
}

body.page-fx .glass-box-section .guten-inner-wrap {
    display: flex !important;
    justify-content: center;
}

/* CTA left-align helpers */
body.page-fx .guten-YilZdf .guten-inner-wrap,
body.page-fx .guten-YilZdf > .guten-column-wrapper {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
}

@media screen and (max-width: 1024px) {
    body.page-fx .guten-6tXU41 {
        width: calc(100% - 24px) !important;
        max-width: 100% !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
}

@media screen and (max-width: 767px) {
    body.page-fx,
    body.page-fx .wp-site-blocks,
    body.page-fx .entry-content,
    body.page-fx .guten-post-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ---- Hero ---- */
    body.page-fx .guten-7Hqida.guten-element,
    body.page-fx .guten-element.guten-7Hqida {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.page-fx .guten-0FlZgF.guten-element,
    body.page-fx .guten-element.guten-0FlZgF {
        padding-top: 36px !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
    }

    body.page-fx .guten-rQNxal > .guten-container,
    body.page-fx .guten-kNgJrG > .guten-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.page-fx .guten-DnpCSM,
    body.page-fx .guten-r8bZQQ,
    body.page-fx .guten-RH3Irn {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body.page-fx .guten-r8bZQQ > .guten-column-wrapper,
    body.page-fx .guten-r8bZQQ > .sticky-wrapper > .guten-column-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-items: flex-start !important;
    }

    body.page-fx .guten-Jm0Bdq,
    body.page-fx h2.guten-Jm0Bdq {
        width: 100% !important;
        font-size: clamp(30px, 9vw, 40px) !important;
        line-height: 1.15 !important;
        text-align: left !important;
    }

    body.page-fx .guten-pEf8bw,
    body.page-fx .guten-pEf8bw .text-content-inner,
    body.page-fx .guten-pEf8bw p {
        text-align: left !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    /* ---- Stats strip (DXCujP) — full width, no clip ---- */
    body.page-fx .guten-0M9U9f.guten-element,
    body.page-fx .guten-element.guten-0M9U9f {
        padding-top: 8px !important;
        padding-right: 16px !important;
        padding-bottom: 20px !important;
        padding-left: 16px !important;
        border-bottom-left-radius: 28px !important;
        border-bottom-right-radius: 28px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-0M9U9f > .guten-container,
    body.page-fx .guten-zNHZuF,
    body.page-fx .guten-zNHZuF.guten-element,
    body.page-fx .guten-zNHZuF > .guten-container,
    body.page-fx .guten-v5AUCw,
    body.page-fx .guten-01IT4y,
    body.page-fx .guten-vQgag5,
    body.page-fx .section-wrapper[data-id="0M9U9f"],
    body.page-fx .section-wrapper[data-id="zNHZuF"],
    body.page-fx .section-wrapper[data-id="zwvr5R"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-zNHZuF.guten-element,
    body.page-fx .guten-element.guten-zNHZuF {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-fx .guten-zwvr5R.guten-element,
    body.page-fx .guten-element.guten-zwvr5R {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 24px !important;
        padding-left: 0 !important;
        border-bottom-left-radius: 28px !important;
        border-bottom-right-radius: 28px !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-zwvr5R > .guten-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-fx .guten-DXCujP.guten-element,
    body.page-fx .guten-element.guten-DXCujP,
    body.page-fx .section-wrapper[data-id="DXCujP"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-top: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-top: 36px !important;
        padding-bottom: 36px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-DXCujP > .guten-container {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    body.page-fx .guten-aq5r32,
    body.page-fx .guten-Q4A3mt,
    body.page-fx .guten-Moeew0,
    body.page-fx .guten-eb4xPc {
        width: 100% !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }

    body.page-fx .guten-aq5r32 > .guten-column-wrapper,
    body.page-fx .guten-Q4A3mt > .guten-column-wrapper,
    body.page-fx .guten-Moeew0 > .guten-column-wrapper,
    body.page-fx .guten-eb4xPc > .guten-column-wrapper {
        width: 100% !important;
        padding-bottom: 12px !important;
        overflow: visible !important;
    }

    body.page-fx .guten-DXCujP .guten-fun-fact,
    body.page-fx .guten-DXCujP .fun-fact-inner,
    body.page-fx .guten-DXCujP .content {
        width: 100% !important;
        text-align: center !important;
    }

    body.page-fx .guten-DXCujP .number-wrapper {
        justify-content: center !important;
        margin-bottom: 8px !important;
    }

    /* ---- Complete FX Toolkit heading ---- */
    body.page-fx .guten-l4nNsh > .guten-container,
    body.page-fx .guten-InFM0d > .guten-container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.page-fx .guten-t8Zs3f,
    body.page-fx .guten-ETZKpN,
    body.page-fx .guten-FQS2jd,
    body.page-fx .guten-P7Vi7L {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body.page-fx .guten-nYmYfP,
    body.page-fx .guten-PhtB1y {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-fx .guten-PhtB1y p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* ---- Glass toolkit cards ---- */
    /* Match homepage mobile behavior: full width container, centered, with desktop-like zig-zag rotation */
    body.page-fx .section-wrapper[data-id="Yy5pai"],
    body.page-fx .guten-Yy5pai,
    body.page-fx .guten-ZrRjPd,
    body.page-fx .guten-ZrRjPd > .guten-column-wrapper {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-fx .container.glass-box-section,
    body.page-fx .glass-box-section.container {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 28px 16px 36px !important;
        overflow: visible !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    body.page-fx .container.glass-box-section .glass,
    body.page-fx .glass-box-section .glass {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 380px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        /* Keep desktop zig-zag tilt on mobile like homepage */
        transform: rotate(calc(var(--r) * 1deg)) !important;
        transform-origin: center center !important;
        transition: transform 0.5s ease, margin 0.5s ease !important;
    }

    /* Hover or tap → all cards straighten & align */
    body.page-fx .container.glass-box-section:hover .glass,
    body.page-fx .glass-box-section:hover .glass,
    body.page-fx .container.glass-box-section.is-straight .glass,
    body.page-fx .glass-box-section.is-straight .glass {
        transform: rotate(0deg) !important;
        margin: 0 !important;
    }

    body.page-fx .glass-box-section .guten-icon-box .icon-box.icon-box-body .title {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
    }

    body.page-fx .glass-box-section .text-content-inner {
        max-width: 100% !important;
    }

    body.page-fx .container .glass .guten-inner-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    body.page-fx .glass-box-section .guten-icon-list .guten-icon-list-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-fx .guten-element.guten-HJEIGq,
    body.page-fx .guten-element.guten-kAUbSO,
    body.page-fx .guten-element.guten-ptj40k,
    body.page-fx .guten-element.guten-wW7Nwx {
        margin-top: 0 !important;
    }

    /* ---- Advanced Order Types ---- */
    body.page-fx .guten-qg1HcO.guten-element,
    body.page-fx .guten-element.guten-qg1HcO {
        padding-top: 30px !important;
        padding-right: 16px !important;
        padding-bottom: 8px !important;
        padding-left: 16px !important;
    }

    body.page-fx .guten-YM94Yn > .guten-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    body.page-fx .guten-feWsFC,
    body.page-fx .guten-V70Maa,
    body.page-fx .guten-E30LM9 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body.page-fx .guten-zm3yYU.guten-element,
    body.page-fx .guten-piDfc8.guten-element {
        height: auto !important;
        min-height: 0 !important;
    }

    body.page-fx .guten-LbupnR {
        text-align: center !important;
        font-size: clamp(26px, 7vw, 34px) !important;
    }

    body.page-fx .guten-lLtamI {
        text-align: center !important;
    }

    /* ---- Ready to Get Started CTA ---- */
    body.page-fx .guten-4ZnRfG > .guten-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.page-fx .guten-rhREk1,
    body.page-fx .guten-84v9Wg {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    body.page-fx .guten-P8rdBF,
    body.page-fx .guten-rhREk1 {
        text-align: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.page-fx .guten-5HusLl > .guten-container,
    body.page-fx .guten-N5Et52 > .guten-column-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
    }

    body.page-fx .guten-5HusLl .guten-button-wrapper,
    body.page-fx .guten-5HusLl .guten-button {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    body.page-fx .guten-hqKPN6 .guten-cxFgPz .guten-icon-box-wrapper,
    body.page-fx .guten-hqKPN6 .guten-PXkQ5b .guten-icon-box-wrapper {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    /* No inner scrollbars on FX columns */
    body.page-fx .guten-DXCujP,
    body.page-fx .guten-zwvr5R,
    body.page-fx .guten-0M9U9f {
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body.page-fx .guten-DXCujP::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

@media screen and (max-width: 480px) {
    body.page-fx .container.glass-box-section .glass,
    body.page-fx .glass-box-section .glass {
        width: min(340px, calc(100vw - 28px)) !important;
        min-height: 500px !important;
    }

    body.page-fx .guten-Jm0Bdq,
    body.page-fx h2.guten-Jm0Bdq {
        font-size: 28px !important;
    }
}

/* ==========================================================================
   FX PAGE — TABLET RESPONSIVE SUITE (768px – 1024px)
   Scoped to body.page-fx to prevent collisions with about.php, team.php etc.
   that share identical Gutenverse element IDs (guten-qg1HcO, guten-LbupnR,
   guten-4ZnRfG, guten-P8rdBF …)
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {

    /* ------------------------------------------------------------------
       0. GLOBAL PAGE OVERFLOW GUARD
       ------------------------------------------------------------------ */
    body.page-fx,
    body.page-fx .wp-site-blocks,
    body.page-fx .entry-content,
    body.page-fx .guten-post-content {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ------------------------------------------------------------------
       1. HERO SECTION  (Professional FX Tools)
       Container: guten-rQNxal (boxed), inner: guten-kNgJrG (fullwidth)
       Goal: heading left ~50%, description right ~50%
       ------------------------------------------------------------------ */
    body.page-fx .guten-0FlZgF.guten-element,
    body.page-fx .guten-element.guten-0FlZgF {
        padding-top: 56px !important;
        padding-bottom: 20px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-fx .guten-rQNxal > .guten-container {
        max-width: 1140px !important;
        margin: 0 auto !important;
        padding: 0 32px !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-kNgJrG > .guten-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 32px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-DnpCSM {
        width: 44% !important;
        flex: 0 0 44% !important;
        max-width: 44% !important;
    }

    body.page-fx .guten-r8bZQQ {
        width: 52% !important;
        flex: 0 0 52% !important;
        max-width: 52% !important;
    }

    body.page-fx .guten-Jm0Bdq,
    body.page-fx h2.guten-Jm0Bdq {
        font-size: clamp(32px, 4.5vw, 48px) !important;
        line-height: 1.15 !important;
        text-align: left !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    body.page-fx .guten-pEf8bw,
    body.page-fx .guten-pEf8bw .text-content-inner,
    body.page-fx .guten-pEf8bw p {
        text-align: left !important;
        font-size: clamp(15px, 1.8vw, 17px) !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ------------------------------------------------------------------
       2. STATS STRIP  (150+ / $3bn+ / 24/7 / 24 Months)
       Container: guten-DXCujP inside guten-zwvr5R
       Goal: 2×2 grid on narrow tablet, 4-in-a-row on landscape
       ------------------------------------------------------------------ */
    body.page-fx .guten-0M9U9f.guten-element,
    body.page-fx .guten-element.guten-0M9U9f {
        padding-top: 12px !important;
        padding-bottom: 32px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-DXCujP.guten-element,
    body.page-fx .guten-element.guten-DXCujP {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-DXCujP > .guten-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 2 per row on portrait tablet, 4 in a row on landscape */
    body.page-fx .guten-aq5r32,
    body.page-fx .guten-Q4A3mt,
    body.page-fx .guten-Moeew0,
    body.page-fx .guten-eb4xPc {
        flex: 1 1 calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
        width: auto !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-DXCujP .guten-fun-fact,
    body.page-fx .guten-DXCujP .fun-fact-inner,
    body.page-fx .guten-DXCujP .content {
        text-align: center !important;
        width: 100% !important;
    }

    body.page-fx .guten-DXCujP .number-wrapper {
        justify-content: center !important;
        font-size: clamp(28px, 4vw, 40px) !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        display: flex !important;
        align-items: baseline !important;
    }

    body.page-fx .guten-DXCujP .fun-fact-inner .title {
        font-size: 14px !important;
        margin-top: 6px !important;
        text-align: center !important;
        display: block !important;
    }

    /* ------------------------------------------------------------------
       3. HIDE-TABLET SECTION  (guten-l4nNsh "Complete FX Toolkit")
       This section already has class hide-tablet on it — the dynamic CSS
       sets display:none !important at 1024px. We verify the hidden state
       is truly inert (no phantom tap-target), but we must NOT override
       the display:none as that would re-show the section incorrectly.
       No action needed here; confirmed safe.
       ------------------------------------------------------------------ */

    /* ------------------------------------------------------------------
       4. GLASS CARDS  (Channel Partners / Strategic / Referral / Corporate)
       Container: .container.glass-box-section inside guten-Yy5pai
       Goal: 2×2 grid so cards don't collide. Desktop has 4 rotated cards
       with negative margin; tablet stacks them in a clean 2×2.
       ------------------------------------------------------------------ */
    body.page-fx .section-wrapper[data-id="Yy5pai"],
    body.page-fx .guten-Yy5pai,
    body.page-fx .guten-ZrRjPd,
    body.page-fx .guten-ZrRjPd > .guten-column-wrapper {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.page-fx .container.glass-box-section,
    body.page-fx .glass-box-section.container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 32px 24px 40px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        /* Kill the negative-margin desktop hover trick */
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    /* Cards: full width of their grid cell, straightened (no rotation), no negative margin */
    body.page-fx .container.glass-box-section .glass,
    body.page-fx .glass-box-section .glass {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 400px !important;
        margin: 0 !important;
        /* Remove the desktop rotation and negative margin */
        transform: none !important;
        transition: box-shadow 0.3s ease !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        border-radius: 24px !important;
    }

    /* Remove hover-rotation effect on tablet (it causes layout shift) */
    body.page-fx .container.glass-box-section:hover .glass,
    body.page-fx .glass-box-section:hover .glass {
        transform: none !important;
        margin: 0 !important;
    }

    /* Subtle hover lift instead of rotation */
    body.page-fx .container.glass-box-section .glass:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
        transform: translateY(-4px) !important;
    }

    body.page-fx .glass-box-section .guten-icon-box .icon-box.icon-box-body .title {
        font-size: clamp(14px, 1.6vw, 17px) !important;
        width: auto !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    body.page-fx .glass-box-section .text-content-inner {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    body.page-fx .glass-box-section .text-content-inner p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    body.page-fx .container .glass .guten-inner-wrap {
        padding: 24px 16px 20px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    body.page-fx .glass-box-section .guten-icon-list .guten-icon-list-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    body.page-fx .glass-box-section .list-text {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Inner column widths inside each glass card */
    body.page-fx .guten-im2aX0,
    body.page-fx .guten-kJLWxj,
    body.page-fx .guten-cMY6FP,
    body.page-fx .guten-Lgdxhu {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ------------------------------------------------------------------
       5. ADVANCED ORDER TYPES  (guten-qg1HcO)
       NOTE: guten-qg1HcO and guten-LbupnR are also used on about.php
       and are styled in responsive-custom.css tablet block without a
       page-fx scope. We re-scope here with body.page-fx to win specificity.
       Goal: heading + subtitle centered, Limit Orders and Stop Loss
       Orders side-by-side in a row (they are already half-width each
       in the dynamic CSS at tablet — just ensure no overflow or clip).
       ------------------------------------------------------------------ */
    body.page-fx .guten-qg1HcO.guten-element,
    body.page-fx .guten-element.guten-qg1HcO {
        padding-top: 48px !important;
        padding-right: 32px !important;
        padding-bottom: 32px !important;
        padding-left: 32px !important;
        box-sizing: border-box !important;
    }

    /* Override the about.php tablet rule for LbupnR, scoped to page-fx */
    body.page-fx .guten-LbupnR {
        font-size: clamp(28px, 4vw, 38px) !important;
        text-align: left !important;
        margin-bottom: 12px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    body.page-fx .guten-lLtamI,
    body.page-fx .guten-lLtamI .text-content-inner,
    body.page-fx .guten-lLtamI p {
        text-align: left !important;
        font-size: clamp(15px, 1.8vw, 17px) !important;
        margin-bottom: 24px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ---- Order Types outer container: side-by-side on landscape ---- */
    /* ---- Order Types outer container: side-by-side on tablet ---- */
    body.page-fx .guten-YM94Yn > .guten-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Each column: equal half, hard min-width:0 so flex won't expand past parent */
    body.page-fx .guten-feWsFC,
    body.page-fx .guten-V70Maa {
        flex: 1 1 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        min-width: 0 !important;
        display: flex !important;
        box-sizing: border-box !important;
    }

    /* Column wrapper inside each column */
    body.page-fx .guten-feWsFC > .guten-column-wrapper,
    body.page-fx .guten-V70Maa > .guten-column-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* Outer card container: clean single white card */
    body.page-fx .guten-zm3yYU.guten-element,
    body.page-fx .guten-piDfc8.guten-element,
    body.page-fx .guten-zm3yYU,
    body.page-fx .guten-piDfc8 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: clamp(28px, 3.5vw, 40px) clamp(20px, 2.5vw, 32px) !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        border: none !important;
        border-radius: 24px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
        box-sizing: border-box !important;
    }

    /* Inner wrap: transparent content container with no nested bg or double padding */
    body.page-fx .guten-zm3yYU .guten-inner-wrap,
    body.page-fx .guten-piDfc8 .guten-inner-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Icon: centered at top */
    body.page-fx .guten-zm3yYU .guten-icon,
    body.page-fx .guten-piDfc8 .guten-icon {
        flex-shrink: 0 !important;
        align-self: center !important;
        margin: 0 auto 20px auto !important;
    }

    body.page-fx .guten-zm3yYU .guten-icon-wrapper.circle.framed,
    body.page-fx .guten-piDfc8 .guten-icon-wrapper.circle.framed {
        width: 70px !important;
        height: 70px !important;
        border-radius: 50% !important;
        border: 2px solid #578cc8 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        margin: 0 auto !important;
    }

    body.page-fx .guten-zm3yYU .guten-icon-wrapper i,
    body.page-fx .guten-piDfc8 .guten-icon-wrapper i {
        font-size: 28px !important;
        color: #578cc8 !important;
    }

    /* Advanced heading */
    body.page-fx .guten-EBqzl4,
    body.page-fx .guten-CiIVKx {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    body.page-fx .guten-EBqzl4 .heading-section,
    body.page-fx .guten-CiIVKx .heading-section {
        justify-content: center !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    body.page-fx .guten-EBqzl4 h5.heading-title,
    body.page-fx .guten-CiIVKx h5.heading-title,
    body.page-fx .guten-EBqzl4 .heading-title span,
    body.page-fx .guten-CiIVKx .heading-title span {
        font-size: clamp(18px, 2.2vw, 22px) !important;
        font-weight: 700 !important;
        color: #043145 !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        text-align: center !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Subtitle */
    body.page-fx .guten-EBqzl4 span.heading-subtitle,
    body.page-fx .guten-CiIVKx span.heading-subtitle {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(13px, 1.6vw, 15px) !important;
        line-height: 1.6 !important;
        color: #4b5563 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    body.page-fx .guten-E30LM9 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ------------------------------------------------------------------
       6. WHY CHOOSE VORTO FX?  (render_steps_accordion)
       The steps-accordion already has its own tablet CSS inside the
       <style id="steps-accordion-home-css"> inline block. It handles
       the ULrheG section layout correctly at 768–1024px (accordion
       left ~40%, image right ~58%). No additional rules needed here.
       ------------------------------------------------------------------ */


}

/* ==========================================================================
   FX PAGE — TABLET PORTRAIT SPECIFIC (768px – 899px)
   At narrow portrait widths the glass cards become too cramped in 2-col.
   Also, the 4-stats row should go 2×2 not 4-in-a-row.
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 899px) {

    /* Stats: ensure 2×2 layout at narrow tablet (flex-wrap already allows it
       but we enforce the 50% calc to keep them exactly 2 per row) */
    body.page-fx .guten-aq5r32,
    body.page-fx .guten-Q4A3mt,
    body.page-fx .guten-Moeew0,
    body.page-fx .guten-eb4xPc {
        flex: 0 0 calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
    }

    /* Glass cards: 2×2 maintained — just shrink padding slightly */
    body.page-fx .container.glass-box-section,
    body.page-fx .glass-box-section.container {
        padding: 24px 16px 32px !important;
        gap: 16px !important;
    }

    body.page-fx .container.glass-box-section .glass,
    body.page-fx .glass-box-section .glass {
        min-height: 420px !important;
    }



    /* Hero: stack heading + text vertically at narrow portrait */
    body.page-fx .guten-kNgJrG > .guten-container {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    body.page-fx .guten-DnpCSM,
    body.page-fx .guten-r8bZQQ {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   FX PAGE — TABLET LANDSCAPE (900px – 1024px)
   At wider tablet landscape, we can afford 4-in-a-row for stats.
   ========================================================================== */
@media screen and (min-width: 900px) and (max-width: 1024px) {

    /* Stats: 4-in-a-row */
    body.page-fx .guten-aq5r32,
    body.page-fx .guten-Q4A3mt,
    body.page-fx .guten-Moeew0,
    body.page-fx .guten-eb4xPc {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}