/*
 * Shared responsive layer for the redesigned feature showcases.
 * Desktop art direction remains in each page stylesheet; this file keeps the
 * mobile reading order, touch targets and device mockups consistent.
 */

.wx-feature-responsive-showcase [data-ms-preview],
.wx-feature-responsive-showcase [data-iss-preview],
.wx-feature-responsive-showcase [data-crm-preview],
.wx-feature-responsive-showcase [data-om-preview],
.wx-feature-responsive-showcase [data-pm-preview],
.wx-feature-responsive-showcase [data-mw-preview],
.wx-feature-responsive-showcase [data-tr-preview],
.wx-feature-responsive-showcase [data-sp-preview],
.wx-feature-responsive-showcase [data-jm-preview],
.wx-feature-responsive-showcase [data-fw-preview],
.wx-feature-responsive-showcase [data-sc-preview],
.wx-feature-responsive-showcase [data-pda-preview] {
    -webkit-tap-highlight-color: transparent;
}

.wx-feature-responsive-showcase [data-ms-preview]:focus-visible,
.wx-feature-responsive-showcase [data-iss-preview]:focus-visible,
.wx-feature-responsive-showcase [data-crm-preview]:focus-visible,
.wx-feature-responsive-showcase [data-om-preview]:focus-visible,
.wx-feature-responsive-showcase [data-pm-preview]:focus-visible,
.wx-feature-responsive-showcase [data-mw-preview]:focus-visible,
.wx-feature-responsive-showcase [data-tr-preview]:focus-visible,
.wx-feature-responsive-showcase [data-sp-preview]:focus-visible,
.wx-feature-responsive-showcase [data-jm-preview]:focus-visible,
.wx-feature-responsive-showcase [data-fw-preview]:focus-visible,
.wx-feature-responsive-showcase [data-sc-preview]:focus-visible,
.wx-feature-responsive-showcase [data-pda-preview]:focus-visible {
    outline: 3px solid rgba(71, 159, 255, .72);
    outline-offset: 4px;
}

@media (max-width: 980px) {
    .wx-feature-responsive-showcase #nav.fd-menu-open .pull-right {
        max-height: calc(100dvh - var(--wx-nav-height, 72px));
        overscroll-behavior: contain;
    }

    .wx-feature-responsive-showcase .fd-hero-grid {
        gap: 28px;
    }

    .wx-feature-responsive-showcase .fd-hero-copy {
        max-width: 760px;
    }

    .wx-feature-responsive-showcase .fd-hero-copy > p {
        max-width: 700px;
    }

    .wx-feature-responsive-showcase .ms-section-nav,
    .wx-feature-responsive-showcase .iss-section-nav,
    .wx-feature-responsive-showcase .crm-section-nav,
    .wx-feature-responsive-showcase .om-local-nav,
    .wx-feature-responsive-showcase .pm-local-nav,
    .wx-feature-responsive-showcase .mw-local-nav,
    .wx-feature-responsive-showcase .tr-local-nav,
    .wx-feature-responsive-showcase .sp-local-nav,
    .wx-feature-responsive-showcase .jm-local-nav,
    .wx-feature-responsive-showcase .fw-local-nav,
    .wx-feature-responsive-showcase .sc-local-nav,
    .wx-feature-responsive-showcase .pda-local-nav {
        top: calc(var(--wx-nav-height, 72px) + 8px);
    }
}

@media (max-width: 760px) {
    .wx-feature-responsive-showcase {
        --fd-mobile-gutter: 14px;
    }

    .wx-feature-responsive-showcase .fd-container {
        width: calc(100% - (var(--fd-mobile-gutter) * 2));
    }

    .wx-feature-responsive-showcase .fd-hero-grid {
        gap: 12px;
        padding-top: 32px;
    }

    .wx-feature-responsive-showcase .fd-breadcrumb {
        margin-bottom: 20px;
        font-size: 12px;
    }

    .wx-feature-responsive-showcase .fd-kicker {
        gap: 9px;
        font-size: 11px;
        letter-spacing: .09em;
    }

    .wx-feature-responsive-showcase .fd-kicker::before {
        width: 25px;
    }

    .wx-feature-responsive-showcase .fd-hero h1 {
        max-width: 12em;
        margin: 15px 0 16px;
        font-size: clamp(36px, 10vw, 40px);
        line-height: 1.18;
        text-wrap: balance;
    }

    .wx-feature-responsive-showcase .fd-hero-copy > p {
        font-size: 15px;
        line-height: 1.75;
    }

    .wx-feature-responsive-showcase .fd-actions,
    .wx-feature-responsive-showcase .fd-cta nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 24px;
    }

    .wx-feature-responsive-showcase .fd-button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        height: auto;
        padding: 12px 10px;
        font-size: 14px;
        line-height: 1.35;
        text-align: center;
    }

    .wx-feature-responsive-showcase .fd-section {
        padding: 70px 0 74px;
    }

    .wx-feature-responsive-showcase .fd-siblings {
        padding: 72px 0;
    }

    .wx-feature-responsive-showcase .fd-siblings header {
        margin-bottom: 30px;
    }

    .wx-feature-responsive-showcase .fd-sibling-grid {
        gap: 12px;
    }

    .wx-feature-responsive-showcase .fd-sibling-grid a {
        min-height: 0;
        padding: 23px;
    }

    .wx-feature-responsive-showcase .fd-sibling-grid strong {
        margin-top: 15px;
    }

    .wx-feature-responsive-showcase .fd-sibling-grid b {
        margin-top: 15px;
    }

    .wx-feature-responsive-showcase .fd-cta {
        padding: 65px 0 calc(65px + env(safe-area-inset-bottom));
    }

    .wx-feature-responsive-showcase .fd-cta > .fd-container {
        gap: 24px;
    }

    .wx-feature-responsive-showcase .fd-cta h2 {
        font-size: 28px;
        line-height: 1.4;
    }

    .wx-feature-responsive-showcase .fd-cta nav {
        margin-top: 0;
    }

    .wx-feature-responsive-showcase .fd-back-top {
        right: 13px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }

    /* Compact two-by-two value summary instead of four full-width mobile rows. */
    .wx-feature-responsive-showcase .om-summary,
    .wx-feature-responsive-showcase .pm-metrics,
    .wx-feature-responsive-showcase .mw-status,
    .wx-feature-responsive-showcase .tr-trust-strip,
    .wx-feature-responsive-showcase .sp-snapshot,
    .wx-feature-responsive-showcase .jm-snapshot,
    .wx-feature-responsive-showcase .fw-snapshot,
    .wx-feature-responsive-showcase .sc-snapshot,
    .wx-feature-responsive-showcase .pda-proof-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        transform: translateY(-25px);
    }

    .wx-feature-responsive-showcase .om-summary article,
    .wx-feature-responsive-showcase .pm-metrics article,
    .wx-feature-responsive-showcase .mw-status article,
    .wx-feature-responsive-showcase .tr-trust-strip article,
    .wx-feature-responsive-showcase .sp-snapshot article,
    .wx-feature-responsive-showcase .jm-snapshot article,
    .wx-feature-responsive-showcase .fw-snapshot article,
    .wx-feature-responsive-showcase .sc-snapshot article,
    .wx-feature-responsive-showcase .pda-proof-strip article {
        display: block;
        min-height: 150px;
        padding: 18px 16px;
    }

    .wx-feature-responsive-showcase .om-summary article > span,
    .wx-feature-responsive-showcase .mw-status article > span,
    .wx-feature-responsive-showcase .tr-trust-strip article > b,
    .wx-feature-responsive-showcase .sp-snapshot article > span,
    .wx-feature-responsive-showcase .jm-snapshot article > span,
    .wx-feature-responsive-showcase .fw-snapshot article > span,
    .wx-feature-responsive-showcase .sc-snapshot article > span {
        width: 36px;
        height: 36px;
        margin-bottom: 12px;
    }

    .wx-feature-responsive-showcase .om-summary strong,
    .wx-feature-responsive-showcase .pm-metrics strong,
    .wx-feature-responsive-showcase .mw-status strong,
    .wx-feature-responsive-showcase .tr-trust-strip strong,
    .wx-feature-responsive-showcase .sp-snapshot strong,
    .wx-feature-responsive-showcase .jm-snapshot strong,
    .wx-feature-responsive-showcase .fw-snapshot strong,
    .wx-feature-responsive-showcase .sc-snapshot strong,
    .wx-feature-responsive-showcase .pda-proof-strip strong {
        font-size: 15px;
        line-height: 1.45;
    }

    .wx-feature-responsive-showcase .om-summary p,
    .wx-feature-responsive-showcase .pm-metrics p,
    .wx-feature-responsive-showcase .mw-status p,
    .wx-feature-responsive-showcase .tr-trust-strip p,
    .wx-feature-responsive-showcase .sp-snapshot p,
    .wx-feature-responsive-showcase .jm-snapshot p,
    .wx-feature-responsive-showcase .fw-snapshot p,
    .wx-feature-responsive-showcase .sc-snapshot p,
    .wx-feature-responsive-showcase .pda-proof-strip span {
        margin-top: 6px;
        font-size: 12px;
        line-height: 1.55;
    }

    .wx-feature-responsive-showcase .pm-metrics article,
    .wx-feature-responsive-showcase .mw-status article,
    .wx-feature-responsive-showcase .tr-trust-strip article,
    .wx-feature-responsive-showcase .sp-snapshot article,
    .wx-feature-responsive-showcase .jm-snapshot article,
    .wx-feature-responsive-showcase .fw-snapshot article,
    .wx-feature-responsive-showcase .sc-snapshot article,
    .wx-feature-responsive-showcase .pda-proof-strip article {
        border-right: 0;
        border-bottom: 0;
    }

    .wx-feature-responsive-showcase .pm-metrics article:nth-child(odd),
    .wx-feature-responsive-showcase .mw-status article:nth-child(odd),
    .wx-feature-responsive-showcase .tr-trust-strip article:nth-child(odd),
    .wx-feature-responsive-showcase .sp-snapshot article:nth-child(odd),
    .wx-feature-responsive-showcase .jm-snapshot article:nth-child(odd),
    .wx-feature-responsive-showcase .fw-snapshot article:nth-child(odd),
    .wx-feature-responsive-showcase .sc-snapshot article:nth-child(odd),
    .wx-feature-responsive-showcase .pda-proof-strip article:nth-child(odd) {
        border-right: 1px solid #e3ebf3;
    }

    .wx-feature-responsive-showcase .pm-metrics article:nth-child(-n + 2),
    .wx-feature-responsive-showcase .mw-status article:nth-child(-n + 2),
    .wx-feature-responsive-showcase .tr-trust-strip article:nth-child(-n + 2),
    .wx-feature-responsive-showcase .sp-snapshot article:nth-child(-n + 2),
    .wx-feature-responsive-showcase .jm-snapshot article:nth-child(-n + 2),
    .wx-feature-responsive-showcase .fw-snapshot article:nth-child(-n + 2),
    .wx-feature-responsive-showcase .sc-snapshot article:nth-child(-n + 2),
    .wx-feature-responsive-showcase .pda-proof-strip article:nth-child(-n + 2) {
        border-bottom: 1px solid #e3ebf3;
    }

    /* Sticky page navigation remains usable as a touch-scrollable tab rail. */
    .wx-feature-responsive-showcase .ms-section-nav,
    .wx-feature-responsive-showcase .iss-section-nav,
    .wx-feature-responsive-showcase .crm-section-nav,
    .wx-feature-responsive-showcase .om-local-nav,
    .wx-feature-responsive-showcase .pm-local-nav,
    .wx-feature-responsive-showcase .mw-local-nav,
    .wx-feature-responsive-showcase .tr-local-nav,
    .wx-feature-responsive-showcase .sp-local-nav,
    .wx-feature-responsive-showcase .jm-local-nav,
    .wx-feature-responsive-showcase .fw-local-nav,
    .wx-feature-responsive-showcase .sc-local-nav,
    .wx-feature-responsive-showcase .pda-local-nav {
        top: calc(var(--wx-nav-height, 72px) + 7px);
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        gap: 5px;
        margin-top: -2px;
        margin-bottom: 58px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 6px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .wx-feature-responsive-showcase .ms-section-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .iss-section-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .crm-section-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .om-local-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .pm-local-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .mw-local-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .tr-local-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .sp-local-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .jm-local-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .fw-local-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .sc-local-nav::-webkit-scrollbar,
    .wx-feature-responsive-showcase .pda-local-nav::-webkit-scrollbar {
        display: none;
    }

    .wx-feature-responsive-showcase .ms-section-nav a,
    .wx-feature-responsive-showcase .iss-section-nav a,
    .wx-feature-responsive-showcase .crm-section-nav a,
    .wx-feature-responsive-showcase .om-local-nav a,
    .wx-feature-responsive-showcase .pm-local-nav a,
    .wx-feature-responsive-showcase .mw-local-nav a,
    .wx-feature-responsive-showcase .tr-local-nav a,
    .wx-feature-responsive-showcase .sp-local-nav a,
    .wx-feature-responsive-showcase .jm-local-nav a,
    .wx-feature-responsive-showcase .fw-local-nav a,
    .wx-feature-responsive-showcase .sc-local-nav a,
    .wx-feature-responsive-showcase .pda-local-nav a {
        display: inline-flex;
        min-width: 96px;
        min-height: 44px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 9px 12px;
        font-size: 13px;
        line-height: 1.25;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .wx-feature-responsive-showcase .ms-section,
    .wx-feature-responsive-showcase .iss-section,
    .wx-feature-responsive-showcase .crm-section,
    .wx-feature-responsive-showcase [id^="om-"],
    .wx-feature-responsive-showcase [id^="pm-"],
    .wx-feature-responsive-showcase [id^="mw-"],
    .wx-feature-responsive-showcase [id^="tr-"],
    .wx-feature-responsive-showcase [id^="sp-"],
    .wx-feature-responsive-showcase [id^="jm-"],
    .wx-feature-responsive-showcase [id^="fw-"],
    .wx-feature-responsive-showcase [id^="sc-"],
    .wx-feature-responsive-showcase [id^="pda-"] {
        scroll-margin-top: 138px;
    }

    .wx-feature-responsive-showcase .ms-section-head h2,
    .wx-feature-responsive-showcase .iss-section-head h2,
    .wx-feature-responsive-showcase .crm-section-head h2,
    .wx-feature-responsive-showcase .om-section-head h2,
    .wx-feature-responsive-showcase .om-story-copy h2,
    .wx-feature-responsive-showcase .pm-section-head h2,
    .wx-feature-responsive-showcase .pm-flow h2,
    .wx-feature-responsive-showcase .pm-story h2,
    .wx-feature-responsive-showcase .pm-close-copy h2,
    .wx-feature-responsive-showcase .mw-section-head h2,
    .wx-feature-responsive-showcase .mw-loop h2,
    .wx-feature-responsive-showcase .mw-location h2,
    .wx-feature-responsive-showcase .mw-intelligence h2,
    .wx-feature-responsive-showcase .tr-section-head h2,
    .wx-feature-responsive-showcase .tr-chain h2,
    .wx-feature-responsive-showcase .tr-consumer h2,
    .wx-feature-responsive-showcase .tr-code-section h2,
    .wx-feature-responsive-showcase .sp-section-head h2,
    .wx-feature-responsive-showcase .sp-loop h2,
    .wx-feature-responsive-showcase .sp-task h2,
    .wx-feature-responsive-showcase .sp-sync h2,
    .wx-feature-responsive-showcase .jm-section-head h2,
    .wx-feature-responsive-showcase .jm-flow h2,
    .wx-feature-responsive-showcase .jm-storefront-copy h2,
    .wx-feature-responsive-showcase .jm-settlement h2,
    .wx-feature-responsive-showcase .jm-fulfillment h2,
    .wx-feature-responsive-showcase .fw-section-head h2,
    .wx-feature-responsive-showcase .fw-network h2,
    .wx-feature-responsive-showcase .fw-onboard h2,
    .wx-feature-responsive-showcase .fw-settlement h2,
    .wx-feature-responsive-showcase .sc-section-head h2,
    .wx-feature-responsive-showcase .sc-ai-flow h2,
    .wx-feature-responsive-showcase .sc-hardware-copy h2,
    .wx-feature-responsive-showcase .sc-label-copy h2,
    .wx-feature-responsive-showcase .sc-stock-copy h2,
    .wx-feature-responsive-showcase .pda-section-head h2,
    .wx-feature-responsive-showcase .pda-device-copy h2 {
        font-size: clamp(29px, 8.1vw, 33px);
        line-height: 1.32;
        text-wrap: balance;
    }

    .wx-feature-responsive-showcase .ms-section-head p,
    .wx-feature-responsive-showcase .iss-section-head p,
    .wx-feature-responsive-showcase .crm-section-head p,
    .wx-feature-responsive-showcase .om-story-copy p,
    .wx-feature-responsive-showcase .pm-story-copy > p,
    .wx-feature-responsive-showcase .pm-section-head > p,
    .wx-feature-responsive-showcase .mw-section-head p,
    .wx-feature-responsive-showcase .tr-section-head p,
    .wx-feature-responsive-showcase .sp-section-head p,
    .wx-feature-responsive-showcase .jm-section-head p,
    .wx-feature-responsive-showcase .fw-section-head p,
    .wx-feature-responsive-showcase .sc-section-head p,
    .wx-feature-responsive-showcase .sc-ai-flow header > p,
    .wx-feature-responsive-showcase .sc-hardware-copy > p,
    .wx-feature-responsive-showcase .sc-label-copy > p,
    .wx-feature-responsive-showcase .sc-stock-copy > p,
    .wx-feature-responsive-showcase .pda-section-head p,
    .wx-feature-responsive-showcase .pda-device-copy > p {
        font-size: 14px;
        line-height: 1.8;
    }

    .wx-feature-responsive-showcase .om-story,
    .wx-feature-responsive-showcase .om-merchant,
    .wx-feature-responsive-showcase .pm-story,
    .wx-feature-responsive-showcase .pm-flow,
    .wx-feature-responsive-showcase .mw-loop,
    .wx-feature-responsive-showcase .mw-location,
    .wx-feature-responsive-showcase .tr-chain,
    .wx-feature-responsive-showcase .tr-code-section,
    .wx-feature-responsive-showcase .sp-loop,
    .wx-feature-responsive-showcase .sp-sync,
    .wx-feature-responsive-showcase .sp-finance,
    .wx-feature-responsive-showcase .jm-flow,
    .wx-feature-responsive-showcase .jm-storefront,
    .wx-feature-responsive-showcase .jm-settlement,
    .wx-feature-responsive-showcase .fw-network,
    .wx-feature-responsive-showcase .fw-onboard,
    .wx-feature-responsive-showcase .fw-settlement,
    .wx-feature-responsive-showcase .sc-ai-flow,
    .wx-feature-responsive-showcase .sc-labels,
    .wx-feature-responsive-showcase .pda-workflow,
    .wx-feature-responsive-showcase .pda-devices {
        border-radius: 18px;
    }

    .wx-feature-responsive-showcase .om-feature-grid article,
    .wx-feature-responsive-showcase .pm-feature-grid article,
    .wx-feature-responsive-showcase .mw-feature-grid article,
    .wx-feature-responsive-showcase .tr-feature-grid article,
    .wx-feature-responsive-showcase .sp-feature-grid article,
    .wx-feature-responsive-showcase .jm-feature-grid article,
    .wx-feature-responsive-showcase .fw-feature-grid article,
    .wx-feature-responsive-showcase .sc-feature-grid article,
    .wx-feature-responsive-showcase .pda-feature-grid article {
        min-height: 0;
        padding: 25px 23px;
    }

    .wx-feature-responsive-showcase .om-feature-grid h3,
    .wx-feature-responsive-showcase .pm-feature-grid h3,
    .wx-feature-responsive-showcase .mw-feature-grid h3,
    .wx-feature-responsive-showcase .tr-feature-grid h3,
    .wx-feature-responsive-showcase .sp-feature-grid h3,
    .wx-feature-responsive-showcase .jm-feature-grid h3,
    .wx-feature-responsive-showcase .fw-feature-grid h3,
    .wx-feature-responsive-showcase .sc-feature-grid h3,
    .wx-feature-responsive-showcase .pda-feature-grid h3 {
        margin-top: 24px;
    }

    .wx-feature-responsive-showcase .ms-lightbox,
    .wx-feature-responsive-showcase .iss-lightbox,
    .wx-feature-responsive-showcase .crm-lightbox,
    .wx-feature-responsive-showcase .om-lightbox,
    .wx-feature-responsive-showcase .pm-lightbox,
    .wx-feature-responsive-showcase .mw-lightbox,
    .wx-feature-responsive-showcase .tr-lightbox,
    .wx-feature-responsive-showcase .sp-lightbox,
    .wx-feature-responsive-showcase .jm-lightbox,
    .wx-feature-responsive-showcase .fw-lightbox,
    .wx-feature-responsive-showcase .sc-lightbox,
    .wx-feature-responsive-showcase .pda-lightbox {
        padding: calc(60px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
    }

    .wx-feature-responsive-showcase .ms-lightbox figure,
    .wx-feature-responsive-showcase .iss-lightbox figure,
    .wx-feature-responsive-showcase .crm-lightbox figure,
    .wx-feature-responsive-showcase .om-lightbox figure,
    .wx-feature-responsive-showcase .pm-lightbox figure,
    .wx-feature-responsive-showcase .mw-lightbox figure,
    .wx-feature-responsive-showcase .tr-lightbox figure,
    .wx-feature-responsive-showcase .sp-lightbox figure,
    .wx-feature-responsive-showcase .jm-lightbox figure,
    .wx-feature-responsive-showcase .fw-lightbox figure,
    .wx-feature-responsive-showcase .sc-lightbox figure,
    .wx-feature-responsive-showcase .pda-lightbox figure {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .wx-feature-responsive-showcase .ms-lightbox img,
    .wx-feature-responsive-showcase .iss-lightbox img,
    .wx-feature-responsive-showcase .crm-lightbox img,
    .wx-feature-responsive-showcase .om-lightbox figure img,
    .wx-feature-responsive-showcase .pm-lightbox figure img,
    .wx-feature-responsive-showcase .mw-lightbox img,
    .wx-feature-responsive-showcase .tr-lightbox img,
    .wx-feature-responsive-showcase .sp-lightbox img,
    .wx-feature-responsive-showcase .jm-lightbox img,
    .wx-feature-responsive-showcase .fw-lightbox img,
    .wx-feature-responsive-showcase .sc-lightbox img,
    .wx-feature-responsive-showcase .pda-lightbox img {
        max-height: calc(100dvh - 142px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .wx-feature-responsive-showcase .ms-lightbox-close,
    .wx-feature-responsive-showcase .iss-lightbox-close,
    .wx-feature-responsive-showcase .crm-lightbox-close,
    .wx-feature-responsive-showcase .om-lightbox-close,
    .wx-feature-responsive-showcase .pm-lightbox-close,
    .wx-feature-responsive-showcase .mw-lightbox-close,
    .wx-feature-responsive-showcase .tr-lightbox-close,
    .wx-feature-responsive-showcase .sp-lightbox-close,
    .wx-feature-responsive-showcase .jm-lightbox-close,
    .wx-feature-responsive-showcase .fw-lightbox-close,
    .wx-feature-responsive-showcase .sc-lightbox-close,
    .wx-feature-responsive-showcase .pda-lightbox-close {
        top: calc(10px + env(safe-area-inset-top));
        right: 12px;
        min-width: 64px;
        min-height: 42px;
    }

    .wx-feature-responsive-showcase :is(h1, h2, h3, p, strong, span) {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 430px) {
    .wx-feature-responsive-showcase {
        --fd-mobile-gutter: 11px;
    }

    .wx-feature-responsive-showcase .fd-hero h1 {
        font-size: clamp(33px, 9.5vw, 36px);
    }

    .wx-feature-responsive-showcase .fd-hero-copy > p {
        font-size: 14px;
    }

    .wx-feature-responsive-showcase .om-summary article,
    .wx-feature-responsive-showcase .pm-metrics article,
    .wx-feature-responsive-showcase .mw-status article,
    .wx-feature-responsive-showcase .tr-trust-strip article,
    .wx-feature-responsive-showcase .sp-snapshot article,
    .wx-feature-responsive-showcase .jm-snapshot article,
    .wx-feature-responsive-showcase .fw-snapshot article,
    .wx-feature-responsive-showcase .sc-snapshot article,
    .wx-feature-responsive-showcase .pda-proof-strip article {
        min-height: 145px;
        padding: 16px 13px;
    }

    .wx-feature-responsive-showcase .om-summary p,
    .wx-feature-responsive-showcase .pm-metrics p,
    .wx-feature-responsive-showcase .mw-status p,
    .wx-feature-responsive-showcase .tr-trust-strip p,
    .wx-feature-responsive-showcase .sp-snapshot p,
    .wx-feature-responsive-showcase .jm-snapshot p,
    .wx-feature-responsive-showcase .fw-snapshot p,
    .wx-feature-responsive-showcase .sc-snapshot p,
    .wx-feature-responsive-showcase .pda-proof-strip span {
        font-size: 11px;
    }

    .wx-feature-responsive-showcase .fd-cta nav {
        grid-template-columns: 1fr;
    }

    .wx-feature-responsive-showcase .sp-commerce-card > div:first-child {
        min-height: 215px;
    }

    .wx-feature-responsive-showcase .sp-finance-gallery figure,
    .wx-feature-responsive-showcase .tr-code-gallery figure {
        height: min(112vw, 420px);
    }
}

@media (max-width: 360px) {
    .wx-feature-responsive-showcase .fd-actions {
        grid-template-columns: 1fr;
    }

    .wx-feature-responsive-showcase .om-summary article,
    .wx-feature-responsive-showcase .pm-metrics article,
    .wx-feature-responsive-showcase .mw-status article,
    .wx-feature-responsive-showcase .tr-trust-strip article,
    .wx-feature-responsive-showcase .sp-snapshot article,
    .wx-feature-responsive-showcase .jm-snapshot article,
    .wx-feature-responsive-showcase .fw-snapshot article,
    .wx-feature-responsive-showcase .sc-snapshot article,
    .wx-feature-responsive-showcase .pda-proof-strip article {
        min-height: 155px;
        padding-right: 11px;
        padding-left: 11px;
    }
}

@media (max-width: 760px) and (hover: none) {
    .wx-feature-responsive-showcase .fd-button:hover,
    .wx-feature-responsive-showcase .om-feature-grid article:hover,
    .wx-feature-responsive-showcase .pm-feature-grid article:hover,
    .wx-feature-responsive-showcase .mw-feature-grid article:hover,
    .wx-feature-responsive-showcase .tr-feature-grid article:hover,
    .wx-feature-responsive-showcase .sp-feature-grid article:hover,
    .wx-feature-responsive-showcase .jm-feature-grid article:hover,
    .wx-feature-responsive-showcase .fw-feature-grid article:hover,
    .wx-feature-responsive-showcase .sc-feature-grid article:hover,
    .wx-feature-responsive-showcase .pda-feature-grid article:hover {
        transform: none;
    }
}