/* Main LP, desktop Smart Brand Learning only. Shared/mobile scenes retain their styles. */
@media (min-width: 1200px) {
    .feature-accordion-layout:has(> .fa-visual-area > .bs-brand-learning.active)::before { opacity: 0; }
    .bs-brand-learning.fa-visual-panel[data-panel="3"] > .scan-carousel-slide > .screenshot-frame {
        height: 578px;
        padding: 0;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid #e2dceb;
        border-radius: 18px;
        background:
            radial-gradient(ellipse at 95% 0%, #9465fba8, transparent 60%),
            radial-gradient(ellipse at 0% 92%, #67d6a68c, transparent 58%),
            linear-gradient(135deg, #f6f4fa, #eee5fb 58%, #f5f8f7);
        box-shadow: none;
    }
    .bs-brand-learning.fa-visual-panel > .scan-carousel-slide > .screenshot-frame::before {
        inset: 0;
        width: auto;
        height: auto;
        border-radius: inherit;
        background: repeating-linear-gradient(132deg, transparent 0 6px, #7f42fd13 6px 7px);
        mask-image: linear-gradient(140deg, transparent 30%, #000 76%, transparent);
        box-shadow: none;
        z-index: -1;
        pointer-events: none;
    }
    .bs-brand-learning.fa-visual-panel .sync-stage {
        height: 100%;
        padding: 36px 28px 30px;
        gap: 0;
        justify-content: flex-start;
    }
    .bs-brand-learning.fa-visual-panel[data-panel="3"] .sync-explainer {
        max-width: 450px;
        margin: 0;
        color: #51465f;
        font-size: 16px;
        line-height: 1.5;
        opacity: 1;
        transform: none;
        animation: none;
    }
    .bs-brand-learning .platform-sync-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        width: 100%;
        max-width: 500px;
        min-height: 258px;
        margin: auto 0;
        align-content: center;
    }
    .bs-brand-learning .sync-row {
        position: relative;
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr) 16px;
        grid-template-rows: auto auto;
        align-content: center;
        column-gap: 9px;
        row-gap: 3px;
        min-width: 0;
        padding: 13px 11px;
        border: 1px solid #ffffff21;
        border-radius: 13px;
        background: linear-gradient(135deg, #2b292f, #18171c 75%);
        box-shadow: inset 0 1px 0 #ffffff0a, 0 10px 24px -14px #26133670;
        opacity: 1;
        transform: none;
        animation: none;
    }
    .bs-brand-learning .sync-row img {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 32px;
        height: 32px;
        padding: 6px;
        box-sizing: border-box;
        object-fit: contain;
        border: 1px solid #ffffff12;
        border-radius: 9px;
        background: linear-gradient(140deg, #ffffff0d, #ffffff02);
        filter: grayscale(1);
    }
    .bs-brand-learning .sync-platform { grid-column: 2; grid-row: 1; color: #f6f3fc; font-size: 14px; line-height: 1.3; }
    .bs-brand-learning .sync-username {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        color: #b6adbf;
        font: 400 10px/1.4 'Matter Regular', sans-serif;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .bs-brand-learning .sync-status { grid-column: 3; grid-row: 1 / 3; width: auto; height: auto; }
    .bs-brand-learning .sync-status .sync-spinner { display: none; animation: none; }
    .bs-brand-learning .sync-status .sync-check { position: static; display: block; width: 14px; height: 14px; opacity: 1; transform: none; animation: none; color: #99dbb1; }
    .bs-brand-learning .sync-pills { display: none; }
}

/* Progressive enhancement: six readable cards remain when motion or JS is unavailable. */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
    .bs-brand-learning.bs-learning-ready .platform-sync-list {
        position: relative;
        display: block;
        height: 278px;
        min-height: 278px;
        max-width: 564px;
        overflow: visible;
        isolation: isolate;
        mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 82%, transparent);
    }
    .bs-brand-learning.bs-learning-ready .sync-row {
        position: absolute;
        top: 110px;
        /* Keep the enlarged exit and its soft edge inside the vertical mask. */
        left: 32px;
        width: calc(100% - 64px);
        height: 104px;
        box-sizing: border-box;
        grid-template-columns: 52px minmax(0, 1fr) 86px;
        column-gap: 16px;
        padding: 20px;
        border-radius: 18px;
        box-shadow: inset 0 1px 0 #ffffff0a, 0 16px 28px -15px #2613368c;
        transform-origin: center;
        animation: bs-learning-card-cycle 18s cubic-bezier(.22,1,.36,1) infinite both;
        animation-delay: calc(var(--bs-learning-order) * 3s - 18s);
        animation-play-state: var(--bs-learning-play, paused);
    }
    .bs-brand-learning .sync-row-1 { --bs-learning-order: 0; }
    .bs-brand-learning .sync-row-2 { --bs-learning-order: 1; }
    .bs-brand-learning .sync-row-3 { --bs-learning-order: 2; }
    .bs-brand-learning .sync-row-4 { --bs-learning-order: 3; }
    .bs-brand-learning .sync-row-5 { --bs-learning-order: 4; }
    .bs-brand-learning .sync-row-6 { --bs-learning-order: 5; }
    .bs-brand-learning.bs-learning-ready .sync-row img { width: 52px; height: 52px; padding: 12px; border-radius: 13px; }
    .bs-brand-learning.bs-learning-ready .sync-platform { font-size: 20px; }
    .bs-brand-learning.bs-learning-ready .sync-username { font-size: 12px; }
    .bs-brand-learning.bs-learning-ready .sync-status {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 6px 8px;
        border: 1px solid #99dbb11a;
        border-radius: 20px;
        background: #244733;
        color: #b5ebc7;
        font: 500 11px/1 'Matter Medium', sans-serif;
    }
    .bs-brand-learning.bs-learning-ready .bs-learning-status-label { display: inline; }
    @keyframes bs-learning-card-cycle {
        0%, 13.333% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); z-index: 3; }
        16.666% { opacity: 0; transform: translateY(72px) scale(1.06); filter: blur(2px); z-index: 4; }
        16.667%, 63.333% { opacity: 0; transform: translateY(-104px) scale(.76); filter: blur(3px); z-index: 0; }
        66.666%, 80% { opacity: .3; transform: translateY(-104px) scale(.76); filter: blur(3px); z-index: 1; }
        83.333%, 96.666% { opacity: .65; transform: translateY(-55px) scale(.88); filter: blur(1.5px); z-index: 2; }
        100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); z-index: 3; }
    }
}