/* Shared homepage layout: loaded after the full and deferred mobile queues. */
:root {
    --itx-homepage-shell-max: 1440px;
    --itx-homepage-shell-padding: 24px;
    --itx-homepage-gutter: 24px;
}

body:has(.left_part.new-layout) {
    margin: 0;
}

.fx_wrapper.itx-homepage-shell,
.left_part.new-layout {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

#content .left_part.new-layout {
    flex: 1 1 100% !important;
    min-width: 0;
    padding-inline: 0 !important;
}

.fx_wrapper.itx-homepage-shell .fx_container {
    width: 100%;
    padding-inline: 0 !important;
    box-sizing: border-box;
}

.left_part.new-layout > .ft-main-content {
    min-width: 0;
}

.itx-market-brief,
.top-two-column,
.left_part.new-layout > .ft-main-content > .full-width-content > * {
    width: min(calc(100% - (2 * var(--itx-homepage-gutter))), var(--itx-homepage-shell-max)) !important;
    max-width: var(--itx-homepage-shell-max) !important;
    box-sizing: border-box;
    margin-inline: auto !important;
}

/* Owner 22.10.2026: no visible page title; the h1 stays for search engines and screen readers. */
.left_part.new-layout .ft-homepage-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.itx-market-brief {
    margin-top: 18px;
    margin-bottom: 32px;
}

.top-two-column {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 336px);
    gap: 32px;
    padding-inline: 0 !important;
    margin-bottom: 40px;
}

.top-two-column .content-column,
.top-two-column .banner-column {
    min-width: 0;
}

.left_part.new-layout > .ft-main-content > .full-width-content {
    width: 100%;
    min-width: 0;
    margin-top: 20px;
}

.left_part.new-layout > .ft-main-content > .full-width-content > * {
    margin-top: 44px;
    margin-bottom: 0;
}

.left_part.new-layout > .ft-main-content > .full-width-content > *:first-child {
    margin-top: 0;
}

.left_part.new-layout > .ft-main-content > .full-width-content > .turn_box,
.left_part.new-layout > .ft-main-content > .full-width-content > .economic-calendar {
    padding-inline: 0 !important;
    box-sizing: border-box;
}

/* Keep inner legacy containers on the same visual axis as the homepage shell. */
.left_part.new-layout > .ft-main-content > .full-width-content .market-insights-container,
.left_part.new-layout > .ft-main-content > .full-width-content .itx-press-slider-container,
.left_part.new-layout > .ft-main-content > .full-width-content .itx-banks-section .container {
    max-width: none;
    padding-inline: 0 !important;
    box-sizing: border-box;
}

/* Shared section cards must be allowed to shrink inside a narrow viewport. */
.itx-indicators-modern-section,
.itx-trading-strategies-modern-section,
.itx-beginner-section,
.itx-indicators-content,
.itx-trading-strategies-content,
.itx-indicators-main,
.itx-trading-strategies-main,
.itx-indicators-cards-grid,
.itx-trading-strategies-cards-grid,
.itx-beginner-grid {
    min-width: 0;
    box-sizing: border-box;
}

.itx-beginner-section {
    padding: 16px;
}

.itx-beginner-hero-title,
.itx-beginner-post-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.itx-beginner-hero-title {
    -webkit-line-clamp: 2;
}

.itx-beginner-hero h4.itx-beginner-hero-title {
    display: -webkit-box !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 12px !important;
    padding: 0 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.itx-beginner-post-title {
    -webkit-line-clamp: 3;
}

.itx-beginner-hero-meta,
.itx-beginner-post-meta {
    white-space: nowrap;
}

.itx-indicators-modern-section,
.itx-trading-strategies-modern-section {
    max-width: var(--itx-homepage-shell-max);
    padding-inline: 0;
    margin-inline: auto;
}

.itx-indicators-content,
.itx-trading-strategies-content {
    gap: 20px;
}

.itx-indicators-sidebar,
.itx-trading-strategies-sidebar {
    flex: 0 0 220px;
    min-width: 0;
}

.itx-indicators-main,
.itx-trading-strategies-main {
    flex: 1 1 auto;
}

.itx-indicators-cards-grid,
.itx-trading-strategies-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.itx-indicator-card,
.itx-indicator-card-content {
    min-width: 0;
}

.itx-indicator-card-title,
.itx-indicator-card-description {
    overflow: hidden;
}

.itx-indicator-card-title {
    display: -webkit-box !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0 0 12px !important;
    padding: 0 !important;
    line-height: 1.25 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.itx-indicator-card-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

@media (max-width: 1024px) {
    :root { --itx-homepage-gutter: 20px; }

    .top-two-column {
        grid-template-columns: minmax(0, 1fr) 280px !important;
        gap: 20px !important;
    }

    .itx-indicators-cards-grid,
    .itx-trading-strategies-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    :root {
        --itx-homepage-shell-padding: 0;
        --itx-homepage-gutter: 12px;
    }

    .top-two-column {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 0;
        margin-bottom: 24px;
    }

    .itx-latest-articles-section {
        min-height: 0;
        margin: 0;
    }

    .modern-tabs-content,
    .modern-tab-panel {
        min-height: 0;
    }

    .modern-tab {
        min-height: 44px;
        padding: 11px 8px;
        font-size: 14px;
    }

    .articles-list .article-item {
        min-height: 0;
        margin-top: 0;
        padding: 12px;
    }

    .article-title {
        font-size: 14px;
        line-height: 1.35;
    }

    .left_part.new-layout > .ft-main-content > .full-width-content {
        margin-top: 0;
    }

    .left_part.new-layout > .ft-main-content > .full-width-content > * {
        margin-top: 28px;
    }

    .itx-market-brief {
        margin-top: 14px;
        margin-bottom: 16px;
    }

    .itx-beginner-section,
    .itx-indicators-modern-section,
    .itx-trading-strategies-modern-section {
        width: min(calc(100% - 24px), var(--itx-homepage-shell-max));
        padding: 0;
        margin-inline: auto;
        scroll-margin-top: 72px;
    }

    .itx-beginner-section {
        padding: 12px;
    }

    .itx-beginner-title {
        font-size: 22px;
        line-height: 1.15;
    }

    .itx-beginner-hero h4.itx-beginner-hero-title {
        display: block !important;
        max-width: 100%;
        max-height: calc(2 * 1.18em);
        padding: 0 !important;
        font-size: 18px !important;
        line-height: 1.18 !important;
        color: #17202a !important;
        text-shadow: none !important;
    }

    .itx-beginner-post-title {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    .itx-beginner-hero-meta,
    .itx-beginner-post-meta {
        font-size: 10px !important;
    }

    /* Keep the featured beginner headline readable below the image. The old
       overlay inherited a 32px desktop title and could clip long translations. */
    .itx-beginner-hero-link {
        display: flex;
        flex-direction: column;
    }

    .itx-beginner-hero-image,
    .itx-beginner-hero img {
        aspect-ratio: 16 / 9;
        height: auto;
        min-height: 0;
    }

    .itx-beginner-hero-overlay { display: none; }

    .itx-beginner-hero-content {
        position: static;
        padding: 11px 12px 12px;
        background: #fff;
    }

    .itx-beginner-hero-meta {
        color: #64748b !important;
        text-shadow: none !important;
    }

    .itx-beginner-hero-meta * { color: #64748b !important; }

    .itx-beginner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .itx-beginner-hero-content,
    .itx-beginner-post-content {
        padding: 10px;
    }

    .itx-indicators-title,
    .itx-trading-strategies-title {
        font-size: 23px !important;
        line-height: 1.15 !important;
    }

    .itx-indicators-content,
    .itx-trading-strategies-content {
        display: block;
    }

    .itx-indicators-sidebar,
    .itx-trading-strategies-sidebar {
        width: 100%;
        margin-bottom: 12px;
    }

    .itx-indicators-categories-box,
    .itx-trading-strategies-categories-box {
        padding: 10px !important;
        overflow: hidden;
    }

    .itx-indicators-categories-title,
    .itx-trading-strategies-categories-title {
        margin-bottom: 8px !important;
        font-size: 11px !important;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .itx-indicators-categories-list,
    .itx-trading-strategies-categories-list {
        display: flex;
        width: 100%;
        max-width: 100%;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }

    .itx-indicators-categories-list::-webkit-scrollbar,
    .itx-trading-strategies-categories-list::-webkit-scrollbar { display: none; }

    .itx-indicators-category-item,
    .itx-trading-strategies-category-item {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    .itx-indicators-category-link,
    .itx-trading-strategies-category-link {
        padding: 7px 10px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }

    .itx-indicators-cards-grid,
    .itx-trading-strategies-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .itx-indicator-card-image {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .itx-indicator-card-content {
        padding: 10px;
    }

    .itx-indicator-card-title {
        display: -webkit-box !important;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0 0 12px !important;
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .itx-indicator-card-description {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .itx-indicator-card-btn,
    .itx-trading-strategies-card-btn {
        padding: 8px 10px;
        font-size: 12px !important;
    }

    /* Remove nested shell padding from full-width section interiors. */
    .left_part.new-layout > .ft-main-content > .full-width-content .market-insights-container,
    .left_part.new-layout > .ft-main-content > .full-width-content .itx-press-slider-container,
    .left_part.new-layout > .ft-main-content > .full-width-content .itx-banks-section .container {
        padding-inline: 0 !important;
    }
}

@media (max-width: 420px) {
    .itx-beginner-grid,
    .itx-indicators-cards-grid,
    .itx-trading-strategies-cards-grid { gap: 8px; }

    .itx-beginner-post-title { font-size: 14px !important; }
    .itx-indicator-card-title { font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .itx-beginner-section *,
    .itx-indicator-card { transition: none !important; animation: none !important; }
}

/* Editor geometry belongs to the homepage content rail, not global h3/h4. */
.fx_wrapper.itx-homepage-shell .itx-editor-recommends-section-new {
    width: 100%;
    min-width: 0;
    margin: 0 0 32px;
    padding: 0;
}
.fx_wrapper.itx-homepage-shell .itx-editor-recommends-header-new {
    margin-bottom: 20px;
    gap: 16px;
}
.fx_wrapper.itx-homepage-shell .itx-editor-recommends-header-new h3 {
    margin: 0;
    padding: 0;
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.15;
}
.fx_wrapper.itx-homepage-shell .itx-editor-recommends-grid-new {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.fx_wrapper.itx-homepage-shell .itx-editor-recommends-card-new h4 {
    display: block;
    width: auto;
    margin: 0 0 12px;
    padding: 0;
    font-size: 16px;
    line-height: 1.4;
}
@media (min-width: 1360px) {
    .fx_wrapper.itx-homepage-shell .itx-editor-recommends-grid-new {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 769px) {
    .fx_wrapper.itx-homepage-shell .itx-beginner-hero h4.itx-beginner-hero-title {
        max-width: 100%;
        display: -webkit-box !important;
        overflow: hidden;
        font-size: clamp(22px, 2vw, 28px) !important;
        line-height: 1.2 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .fx_wrapper.itx-homepage-shell .itx-beginner-hero-meta,
    .fx_wrapper.itx-homepage-shell .itx-beginner-post-meta {
        font-size: 13px;
    }
}
@media (min-width: 769px) and (max-width: 900px) {
    .top-two-column {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 20px !important;
    }
    .top-two-column > .banner-column {
        justify-self: center;
    }

    /* below 830px the featured column kept min-width:400px and ran past its section */
    .fx_wrapper.itx-homepage-shell :is(.itx-professional-featured-col, .itx-binary-options-featured-col, .itx-cryptocurrencies-featured-col) {
        min-width: 0 !important;
    }
}
@media (max-width: 768px) {
    .fx_wrapper.itx-homepage-shell .itx-editor-recommends-grid-new {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}

/* RTL: the section heading icon is pinned to the right edge, exactly where an Arabic title starts. */
[dir="rtl"] .fx_wrapper.itx-homepage-shell :is(h2, h3, h4) > :is(.icon, .fa) {
    right: auto;
    left: 0;
}

/* === ITX mobile swipe rails: start ===
 * Card containers marked [data-itx-rail] become native scroll-snap rails at <=768px:
 * the first (newest) card sits at the inline start, the next one peeks, one swipe = one card.
 * Markup is shared by the desktop and mobile HTML variants, so everything is gated by width only.
 * A section wrapper carries [data-itx-rail-section] (fortraders_home_rail_section_attr()) so the
 * "Show more" buttons, dots, dead arrows and list columns are hidden only there. Mobile-only markup
 * (extra cards, calendar cards) carries .itx-rail-only. The "All articles" link under a rail comes
 * from fortraders_render_home_rail_nav(); js/components/itx-home-rail.js only helps keyboard/lazy images. */
.itx-rail-nav {
    display: none;
}

@media (min-width: 769px) {
    .fx_wrapper.itx-homepage-shell .itx-rail-only {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .fx_wrapper.itx-homepage-shell {
        --itx-rail-card: 85%;
        --itx-rail-gap: 12px;
    }

    /* covers are 2:3, a full-width slide would be ~500px tall */
    .fx_wrapper.itx-homepage-shell .compact_media_section {
        --itx-rail-card: 62%;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        /* .flex_row_video (PAMM, video) is space-between: two cards would drift apart at 600-768px */
        justify-content: flex-start !important;
        gap: var(--itx-rail-gap) !important;
        grid-template-columns: none !important;
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
        /* inset and scroll-padding must match, otherwise the first snap drops the gutter */
        padding-inline: var(--itx-rail-inset, 0px) !important;
        /* room for card shadows and focus rings: overflow-x:auto also clips vertically */
        padding-block: 6px 14px !important;
        scroll-padding-inline: var(--itx-rail-inset, 0px);
        box-sizing: border-box !important;
        list-style: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* legacy press slider translateX / transitions must not move the track */
        transform: none !important;
        transition: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] > * {
        flex: 0 0 var(--itx-rail-card) !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        box-sizing: border-box;
        /* legacy one-card-at-a-time scripts write inline opacity/transform */
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] > :only-child {
        flex-basis: 100% !important;
    }

    /* Cards the legacy CSS/JS hides on phones are regular slides inside a rail. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .itx-banks-card:nth-child(n) {
        display: block !important;
    }

    /* height:100% from the section CSS stops stretching, leaving empty space under shorter cards */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] > :is(.itx-banks-card, .turn_box-card, .itx-dictionary-card, .itx-book-card, .itx-pamm-card, .itx-indicator-card, .itx-beginner-post) {
        height: auto !important;
        align-self: stretch !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] .itx-pamm-card-link {
        height: auto !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .itx-video-card:nth-child(n),
    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .itx-advisers-card:nth-child(n) {
        display: flex !important;
        visibility: visible !important;
        height: auto !important;
        overflow: hidden !important;
    }

    /* Media covers: the section CSS hides covers 2 and 3 on phones, in a rail they are slides. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .cover:nth-child(n) {
        display: block !important;
    }

    /* Authors: the legacy clearfix div would become a slide. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .clear {
        display: none !important;
    }

    /* Keep slide heights close: long texts are clamped inside rails only. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] :is(.itx-editor-recommends-title-new, .turn_box-card-title, .itx-advisers-card-title, .itx-dictionary-card-title, .itx-video-card-title, .itx-banks-card .post-title, .itx-pamm-card-title, .itx-indicator-card-title, .itx-beginner-post-title, .itx-book-card-title, .itx-professional-featured-title, .itx-binary-options-featured-title, .itx-cryptocurrencies-featured-title) {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        /* a clamped 4th line would show through the bottom padding */
        padding-bottom: 0 !important;
        margin-bottom: 10px !important;
    }

    /* the anchor is inline-block for a desktop hover shift, which makes the clamp see one line */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] .itx-banks-card .post-title a {
        display: inline !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] :is(.turn_box-card-description, .itx-advisers-card-description, .itx-dictionary-card-description, .itx-indicator-card-description, .itx-professional-featured-excerpt, .itx-binary-options-featured-excerpt, .itx-cryptocurrencies-featured-excerpt) {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        /* in stretched cards a growing description would show lines 4+ under the ellipsis */
        flex-grow: 0 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] :is(.turn_box-card-date, .itx-advisers-card-date, .itx-dictionary-card-date) {
        margin-top: auto;
    }

    /* Latest / Popular: each headline is a card. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] .modern-tabs-content {
        padding-inline: 0 !important;
        min-height: 0 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .article-item {
        display: flex !important;
        align-items: flex-start !important;
        min-height: 128px !important;
        padding: 14px 16px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px;
        background: #fff;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .article-item .article-title {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        min-height: 0 !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    /* itx-latest-articles.css makes the link inline-block, which turns the 4-line clamp into a single line box */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .article-item .article-title a {
        display: inline !important;
        transform: none !important;
    }

    /* Press releases: the desktop rows are frameless, in a rail each headline is a card like Latest / Popular. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .itx-press-slider-card > div {
        padding: 10px 14px 12px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        box-sizing: border-box;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .itx-press-slider-card .itx-press-slider-card-header {
        margin-bottom: 6px;
    }

    /* Professional / binary options / cryptocurrencies: the featured column is the rail, every post is a card. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-professional-content, .itx-binary-options-content, .itx-cryptocurrencies-content) {
        display: block !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] > :is(.itx-professional-featured-card, .itx-binary-options-featured-card, .itx-cryptocurrencies-featured-card) {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: hidden;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] :is(.itx-professional-featured-image, .itx-binary-options-featured-image, .itx-cryptocurrencies-featured-image) {
        height: auto !important;
        aspect-ratio: 650 / 300;
        overflow: hidden;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] :is(.itx-professional-featured-image, .itx-binary-options-featured-image, .itx-cryptocurrencies-featured-image) img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] :is(.itx-professional-featured-content, .itx-binary-options-featured-content, .itx-cryptocurrencies-featured-content) {
        display: flex !important;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] :is(.itx-professional-featured-btn, .itx-binary-options-featured-btn, .itx-cryptocurrencies-featured-btn) {
        margin-top: auto;
        align-self: flex-start;
    }

    /* Economic calendar: one card per event (the plugin CSS loads late on phones and styles its table rows). */
    .fx_wrapper.itx-homepage-shell [data-itx-rail] > .itx-ec-compact-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        padding: 14px !important;
        border: 1px solid #eaecef !important;
        border-radius: 10px;
        background: #fff;
        box-sizing: border-box;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-card__time {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        color: #1e2329;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-card .itx-ec-compact-event {
        display: flex !important;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 0 !important;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-card .itx-ec-compact-event-link {
        display: -webkit-box;
        flex: 1 1 auto;
        min-width: 0;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-card .itx-ec-compact-countdown {
        display: block !important;
        margin-top: auto;
        padding: 0 !important;
        text-align: start !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail] a:focus-visible {
        outline-offset: -2px;
    }

    @media (pointer: coarse) {
        .fx_wrapper.itx-homepage-shell [data-itx-rail] {
            scrollbar-width: none;
        }

        .fx_wrapper.itx-homepage-shell [data-itx-rail]::-webkit-scrollbar {
            display: none;
        }
    }

    @media (pointer: fine) {
        .fx_wrapper.itx-homepage-shell [data-itx-rail] {
            scrollbar-width: thin;
        }
    }

    /* Row under the rail: only the "All articles" link. */
    .fx_wrapper.itx-homepage-shell .itx-rail-nav {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 44px;
        margin: 4px 0 0;
        /* at least 4px so the focus ring is not cut by overflow:hidden sections */
        padding-inline: max(var(--itx-rail-inset, 0px), 4px);
        box-sizing: border-box;
        color: var(--itx-rail-fg, #0f172a);
        font-size: 14px;
        line-height: 1.2;
    }

    .fx_wrapper.itx-homepage-shell .itx-rail-nav__all {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: inherit !important;
        font-weight: 600;
        text-decoration: none !important;
    }

    /* the second declaration gives the arrow an empty alternative text where supported */
    .fx_wrapper.itx-homepage-shell .itx-rail-nav__all::after {
        content: "\2192";
        content: "\2192" / "";
        margin-inline-start: 6px;
    }

    [dir="rtl"] .fx_wrapper.itx-homepage-shell .itx-rail-nav__all::after {
        content: "\2190";
        content: "\2190" / "";
    }

    .fx_wrapper.itx-homepage-shell .market-insights-section {
        --itx-rail-fg: #fff;
    }

    /* Inside a rail section the rail replaces "Show more", pagination dots, dead arrows,
     * the desktop hero / list columns and the calendar table. Scoped by the marker so the same
     * class names in other sections stay untouched. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-beginner-load-more, .itx-pamm-load-more, .itx-video-load-more, .pagination-container, .nav_buttons, .itx-press-slider-nav, .itx-beginner-hero, .itx-beginner-nav, .itx-books-swipe-indicator, .load-more-authors, .itx-professional-list-col, .itx-professional-nav, .itx-binary-options-list-col, .itx-binary-options-nav, .itx-cryptocurrencies-list-col, .itx-cryptocurrencies-nav, .itx-ec-compact-table-wrapper) {
        display: none !important;
    }
}

@media (min-width: 600px) and (max-width: 768px) {
    .fx_wrapper.itx-homepage-shell {
        --itx-rail-card: calc(50% - 30px);
    }
}

@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .fx_wrapper.itx-homepage-shell [data-itx-rail] {
        scroll-behavior: smooth;
    }
}
/* === ITX mobile swipe rails: end === */

/* === ITX mobile section frame: start ===
 * One frame for every homepage rail section on phones (<=768px): the same gap between sections, the same
 * heading, one inline gutter (heading, first card and the "All articles" link start on one line), the same
 * card frame, image ratio, title, text and meta. The only accent is the dark "Market insights" band.
 * Desktop is untouched. Scoped by [data-itx-rail-section] / [data-itx-rail]; !important is required because
 * the section stylesheets load after this file on the phone HTML variant. */
@media (max-width: 768px) {
    .fx_wrapper.itx-homepage-shell {
        --itx-frame-gutter: 12px;
        --itx-frame-gap: 36px;
        --itx-frame-head-gap: 14px;
        --itx-frame-pad: 16px;
        --itx-frame-radius: 12px;
        --itx-frame-border: #e5e7eb;
        --itx-frame-text: #1a1a1a;
        --itx-frame-body: #4b5563;
        --itx-frame-muted: #6b7280;
        --itx-frame-font: Arial, sans-serif;
    }

    /* Section box: flat, no own padding, one gap above. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] {
        margin-block: var(--itx-frame-gap) 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section]:not(.market-insights-section) {
        background: none !important;
        overflow: visible !important;
    }

    /* The page title is hidden, so the market brief opens the page under the header (20px, as the contest card). */
    .fx_wrapper.itx-homepage-shell .itx-market-brief[data-itx-rail-section] {
        margin-block: 20px 0 !important;
    }

    /* The press wrapper takes the gap from its outer section. */
    .fx_wrapper.itx-homepage-shell .itx-editor-recommends-section-new[data-itx-rail-section],
    .fx_wrapper.itx-homepage-shell .itx-press-slider-wrapper[data-itx-rail-section] {
        margin-block: 0 !important;
    }

    .fx_wrapper.itx-homepage-shell .itx-market-brief ~ .top-two-column .itx-editor-recommends-section-new[data-itx-rail-section] {
        margin-block-start: var(--itx-frame-gap) !important;
    }

    .fx_wrapper.itx-homepage-shell .top-two-column {
        margin-bottom: 0 !important;
    }

    .fx_wrapper.itx-homepage-shell .top-two-column > .content-column {
        overflow: visible !important;
    }

    .fx_wrapper.itx-homepage-shell .itx-press-releases-slider {
        margin-block: var(--itx-frame-gap) 0 !important;
        padding: 0 !important;
    }

    .fx_wrapper.itx-homepage-shell :is(.itx-press-releases-slider, .itx-press-slider-container) {
        overflow: visible !important;
    }

    .fx_wrapper.itx-homepage-shell .full-width-content > hr {
        display: none !important;
    }

    /* The accent band runs edge to edge, its content keeps the page gutter. */
    .fx_wrapper.itx-homepage-shell .market-insights-section[data-itx-rail-section] {
        width: auto !important;
        max-width: none !important;
        margin-inline: 0 !important;
        padding: 28px var(--itx-frame-gutter) !important;
    }

    .fx_wrapper.itx-homepage-shell .market-insights-section[data-itx-rail-section]::before,
    .fx_wrapper.itx-homepage-shell .market-insights-section[data-itx-rail-section]::after {
        border-radius: 0 !important;
    }

    /* decorative bars and fades of the old section boxes */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section]:not(.market-insights-section)::before,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section]:not(.market-insights-section)::after,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-professional-featured-excerpt, .itx-binary-options-featured-excerpt, .itx-cryptocurrencies-featured-excerpt)::after,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.turn_box-card-date, .itx-advisers-card-date, .itx-dictionary-card-date)::before,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-beginner-post-date svg {
        display: none !important;
    }

    /* Section heading. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(h2, h3):not([data-itx-rail] *) {
        display: block !important;
        float: none !important;
        width: auto !important;
        margin: 0 0 var(--itx-frame-head-gap) !important;
        padding: 0 !important;
        border: 0 !important;
        color: var(--itx-frame-text) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.01em !important;
        text-align: start !important;
        text-transform: none !important;
        text-wrap: balance;
        overflow-wrap: break-word;
        hyphens: manual;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(h2, h3):not([data-itx-rail] *) a {
        color: inherit !important;
        font: inherit !important;
        letter-spacing: inherit !important;
        text-decoration: none !important;
    }

    .fx_wrapper.itx-homepage-shell .market-insights-section[data-itx-rail-section] :is(h2, h3):not([data-itx-rail] *) {
        color: #fff !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(h2, h3):not([data-itx-rail] *)::before,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(h2, h3):not([data-itx-rail] *)::after,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(h2, h3) > :is(.icon, .fa),
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] hr,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-nav-wrapper, .itx-trading-strategies-nav-wrapper, .itx-cryptocurrencies-nav-wrapper, .itx-indicators-categories-title, .itx-trading-strategies-categories-title, .itx-book-card-arrow) {
        display: none !important;
    }

    /* Wrappers between the heading and the rail carry no spacing of their own. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-editor-recommends-header-new, .itx-editor-recommends-title-group-new, .itx-press-slider-header, .itx-ec-compact-header, .itx-beginner-header, .itx-professional-header, .itx-binary-options-header, .itx-indicators-header, .itx-trading-strategies-header, .itx-cryptocurrencies-header, .clearfix.position-relative, .modern-tabs-content, .market-insights-container, .container, .itx-beginner-posts-container, .itx-books-scroll-wrapper, .itx-professional-content, .itx-binary-options-content, .itx-cryptocurrencies-content, .itx-indicators-content, .itx-trading-strategies-content, .itx-indicators-main, .itx-trading-strategies-main, .media_section) {
        display: block !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail],
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-categories-list, .itx-trading-strategies-categories-list) {
        --itx-rail-inset: var(--itx-frame-gutter);
        width: auto !important;
        max-width: none !important;
        margin-block: 0 !important;
        margin-inline: calc(-1 * var(--itx-frame-gutter)) !important;
        padding-block: 0 !important;
        padding-inline: var(--itx-frame-gutter) !important;
        scroll-padding-inline: var(--itx-frame-gutter);
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-sidebar, .itx-trading-strategies-sidebar, .itx-indicators-categories-box, .itx-trading-strategies-categories-box, .modern-tabs-content, .modern-tab-panel, .itx-books-scroll-wrapper) {
        overflow: visible !important;
    }

    .fx_wrapper.itx-homepage-shell .compact_media_section[data-itx-rail-section] .media_section + .media_section {
        margin-top: var(--itx-frame-gap) !important;
    }

    /* Latest / Popular tabs and the category chips share one control style. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] .modern-tabs {
        margin: 0 0 var(--itx-frame-head-gap) !important;
        padding: 0 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] .modern-tab {
        border-radius: 8px !important;
        box-shadow: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] .modern-tab::after {
        display: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-sidebar, .itx-trading-strategies-sidebar) {
        margin: 0 0 var(--itx-frame-head-gap) !important;
        padding: 0 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-categories-box, .itx-trading-strategies-categories-box) {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-categories-list, .itx-trading-strategies-categories-list) {
        gap: 8px !important;
        scrollbar-width: none;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-categories-list, .itx-trading-strategies-categories-list)::-webkit-scrollbar {
        display: none;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-category-link, .itx-trading-strategies-category-link) {
        display: inline-flex !important;
        align-items: center;
        min-height: 36px;
        padding: 0 14px !important;
        border: 1px solid var(--itx-frame-border) !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow: none !important;
        color: var(--itx-frame-text) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-indicators-category-item, .itx-trading-strategies-category-item).active > a {
        border-color: #333 !important;
        background: #333 !important;
        color: #fff !important;
        font-weight: 600 !important;
    }

    /* Card frame. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :not(.itx-press-slider-card),
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > .itx-press-slider-card > div {
        position: relative !important;
        border: 1px solid var(--itx-frame-border) !important;
        border-radius: var(--itx-frame-radius) !important;
        background-color: #fff !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .fx_wrapper.itx-homepage-shell .market-insights-section[data-itx-rail-section] [data-itx-rail] > * {
        border-color: rgba(255, 255, 255, 0.15) !important;
        background-color: transparent !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :is(.itx-editor-recommends-card-new, .turn_box-card, .itx-banks-card, .itx-video-card, .itx-book-card, .itx-indicator-card, .itx-advisers-card, .itx-pamm-card, .itx-dictionary-card, .itx-professional-featured-card, .itx-binary-options-featured-card, .itx-cryptocurrencies-featured-card),
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-video-card-link, .itx-pamm-card-link) {
        display: flex !important;
        flex-direction: column !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-video-card-link, .itx-pamm-card-link) {
        flex: 1 1 auto !important;
        height: auto !important;
    }

    /* One inner rhythm: 16px padding, 8px between the visible parts, meta pinned to the bottom. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :is(.article-item, .itx-ec-compact-card),
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > .itx-press-slider-card > div,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-editor-recommends-content-new, .turn_box-card-content, .post-card-content, .itx-video-card-content, .itx-book-card-content, .itx-indicator-card-content, .itx-advisers-card-content, .itx-pamm-card-content, .itx-dictionary-card-content, .itx-professional-featured-content, .itx-binary-options-featured-content, .itx-cryptocurrencies-featured-content) {
        gap: 8px !important;
        padding: var(--itx-frame-pad) !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-editor-recommends-content-new, .turn_box-card-content, .post-card-content, .itx-video-card-content, .itx-book-card-content, .itx-indicator-card-content, .itx-advisers-card-content, .itx-pamm-card-content, .itx-dictionary-card-content, .itx-professional-featured-content, .itx-binary-options-featured-content, .itx-cryptocurrencies-featured-content) {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }

    /* Headline cards (Latest / Popular, press releases) share one height; the bookmark sits in the corner. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > .article-item,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > .itx-press-slider-card > div {
        min-height: 97px !important;
        justify-content: flex-start !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > .article-item .article-title {
        -webkit-line-clamp: 3 !important;
    }

    /* the bookmark has neither a handler nor a backend on phones, so the card stays a plain link */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-press-slider-card-header {
        display: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-press-slider-card-title a em {
        -webkit-line-clamp: 3 !important;
    }

    /* always empty in the template, it would only add a flex gap */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-press-slider-card-footer {
        display: none !important;
    }

    /* Card image: one ratio. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-editor-recommends-image-new, .turn_box-card-image, .post-card-image, .itx-video-card-image, .itx-indicator-card-image, .itx-advisers-card-image, .itx-pamm-card-image, .itx-dictionary-card-image, .itx-professional-featured-image, .itx-binary-options-featured-image, .itx-cryptocurrencies-featured-image) {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 0 !important;
        object-fit: cover;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.turn_box-card-image, .post-card-image, .itx-video-card-image, .itx-indicator-card-image, .itx-advisers-card-image, .itx-pamm-card-image, .itx-dictionary-card-image, .itx-professional-featured-image, .itx-binary-options-featured-image, .itx-cryptocurrencies-featured-image) img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-book-card-cover {
        flex: 0 0 auto !important;
        height: 200px !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-book-card-cover a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100% !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-book-card-cover img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Card title. position:static lets the stretched link below cover the whole card. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-editor-recommends-title-new, .turn_box-card-title, .post-title, .itx-video-card-title, .itx-book-card-title, .itx-indicator-card-title, .itx-advisers-card-title, .itx-pamm-card-title, .itx-dictionary-card-title, .itx-professional-featured-title, .itx-binary-options-featured-title, .itx-cryptocurrencies-featured-title) {
        position: static !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--itx-frame-text) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        overflow-wrap: break-word;
        hyphens: manual;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.article-title, .itx-press-slider-card-title a em) {
        position: static !important;
        margin: 0 !important;
        color: var(--itx-frame-text) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        overflow-wrap: break-word;
        hyphens: manual;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :is(.itx-beginner-post, .news-card) {
        height: auto !important;
        /* 16:9 of a 320px phone is too low for three title lines */
        min-height: 168px !important;
        aspect-ratio: 16 / 9 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :is(.itx-beginner-post, .news-card) :is(.overlay, .itx-beginner-post-overlay) {
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.9) 100%) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-beginner-post-title, .news-card h3, .itx-beginner-post-meta, .news-card time) {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :is(.itx-beginner-post, .news-card) :is(.content, .itx-beginner-post-content) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        inset: auto 0 0 0 !important;
        width: auto !important;
        height: auto !important;
        padding: var(--itx-frame-pad) !important;
        background: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :is(.itx-beginner-post, .news-card) img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        filter: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-beginner-post-link {
        height: 100% !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-beginner-post-meta, .news-card time) {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-beginner-post-meta * {
        color: inherit !important;
        font-size: inherit !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-beginner-post-title, .news-card h3) {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3 !important;
        overflow: hidden;
        margin: 0 !important;
        padding: 0 !important;
        overflow-wrap: break-word !important;
        hyphens: manual !important;
        color: #fff !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(h3, h4, h5, .itx-press-slider-card-title) a {
        color: inherit !important;
        font: inherit !important;
        text-decoration: none !important;
    }

    /* Card text, meta and category line. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.turn_box-card-description, .itx-advisers-card-description, .itx-dictionary-card-description, .itx-indicator-card-description, .itx-professional-featured-excerpt, .itx-binary-options-featured-excerpt, .itx-cryptocurrencies-featured-excerpt) {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--itx-frame-body) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-editor-recommends-meta-new, .turn_box-card-date, .itx-advisers-card-date, .itx-dictionary-card-date, .itx-video-card-meta, .itx-pamm-card-meta, .itx-book-card-author, .itx-professional-featured-meta, .itx-binary-options-featured-meta, .itx-cryptocurrencies-featured-meta) {
        margin: auto 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        color: var(--itx-frame-muted) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-editor-recommends-meta-new, .itx-video-card-meta, .itx-pamm-card-meta, .itx-book-card-author, .itx-professional-featured-meta, .itx-binary-options-featured-meta, .itx-cryptocurrencies-featured-meta) * {
        color: inherit !important;
        font-size: inherit !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-editor-recommends-category-new, .post-category) {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--itx-frame-muted) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .post-category a {
        position: relative;
        z-index: 2;
        display: inline-block;
        margin-block: -6px;
        padding-block: 6px;
        color: inherit !important;
        font: inherit !important;
    }

    /* The whole card is the link, so cards need no button of their own. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.itx-professional-featured-btn, .itx-binary-options-featured-btn, .itx-cryptocurrencies-featured-btn, .itx-indicator-card-btn, .itx-trading-strategies-card-btn) {
        display: none !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] :is(.turn_box-card-title, .post-title, .itx-book-card-title, .itx-indicator-card-title, .itx-advisers-card-title, .itx-dictionary-card-title, .itx-professional-featured-title, .itx-binary-options-featured-title, .itx-cryptocurrencies-featured-title, .article-title, .itx-press-slider-card-title) a::after,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > .news-card > a::after,
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-ec-compact-event-link::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > .news-card > a::after {
        z-index: 3;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-book-card-content {
        position: static !important;
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] .itx-ec-compact-event-link {
        color: var(--itx-frame-text) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }

    /* Economic calendar: the date line is the subtitle, the footer link matches "All articles". */
    .fx_wrapper.itx-homepage-shell .itx-ec-compact-widget[data-itx-rail-section] .itx-ec-compact-title {
        margin-bottom: 6px !important;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-widget[data-itx-rail-section] .itx-ec-compact-datetime {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        gap: 4px 8px !important;
        margin: 0 0 var(--itx-frame-head-gap) !important;
        color: var(--itx-frame-muted) !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-widget[data-itx-rail-section] .itx-ec-compact-date {
        color: inherit !important;
        font-size: inherit !important;
        font-weight: 400 !important;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-widget[data-itx-rail-section] .itx-ec-compact-footer {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        margin: 4px 0 -14px !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: start !important;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-widget[data-itx-rail-section] .itx-ec-compact-link {
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: auto !important;
        min-height: 44px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        color: #0f172a !important;
        font-family: var(--itx-frame-font) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        transform: none !important;
    }

    .fx_wrapper.itx-homepage-shell .itx-ec-compact-widget[data-itx-rail-section] .itx-ec-compact-link::after {
        content: "\2192";
        content: "\2192" / "";
        margin-inline-start: 6px;
    }

    [dir="rtl"] .fx_wrapper.itx-homepage-shell .itx-ec-compact-widget[data-itx-rail-section] .itx-ec-compact-link::after {
        content: "\2190";
        content: "\2190" / "";
    }

    /* "All articles" starts on the gutter line like the heading and the first card. */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] .itx-rail-nav {
        /* the 44px touch row holds 14px of air under the text: it must not add to the section gap */
        margin: 4px 0 -14px !important;
        padding-inline: 0 !important;
        font-family: var(--itx-frame-font);
    }

    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] :is(.itx-rail-nav__all, .itx-ec-compact-link):focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -2px;
    }
}

@media (min-width: 600px) and (max-width: 768px) {
    .fx_wrapper.itx-homepage-shell .compact_media_section[data-itx-rail-section] {
        --itx-rail-card: calc(33.333% - 20px);
    }

    /* two cards have nothing to peek at: they share the row */
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :first-child:nth-last-child(2),
    .fx_wrapper.itx-homepage-shell [data-itx-rail-section] [data-itx-rail] > :first-child:nth-last-child(2) ~ * {
        flex-basis: calc(50% - var(--itx-rail-gap) / 2) !important;
    }
}
/* === ITX mobile section frame: end === */
