/* Research V3 opts into the colour header without changing the shared rail or phone layout. */
@media (min-width: 921px) {
    html body #research-app[data-fuuvo-colour-surface] {
        --rs-paper: #fff;
        --rs-card: #fff;
        --rs-ink: #18343a;
        --rs-muted: #405b63;
        --rs-line: #e2eae9;
        --rs-active: #096bc9;
    }

    html body #research-app[data-fuuvo-colour-surface] > .creation-workspace {
        position: relative;
        isolation: isolate;
        background: var(--rs-paper) !important;
    }

    html body #research-app[data-fuuvo-colour-surface] > .creation-workspace > [data-fuuvo-shared-topbar] {
        display: none !important;
    }

    html body #research-app[data-fuuvo-colour-surface] .research-colour-aura {
        position: absolute;
        inset: 0 0 auto;
        height: clamp(440px, 64vh, 760px);
        z-index: 0;
        pointer-events: none;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 10%, #000b 34%, #0005 63%, #0001 87%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 10%, #000b 34%, #0005 63%, #0001 87%, transparent 100%);
    }

    html body #research-app[data-fuuvo-colour-surface] .research-colour-aura > div {
        position: absolute;
        inset: 0;
        background-repeat: no-repeat;
        animation-duration: 8s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-play-state: var(--fuuvo-colour-play-state, running);
    }

    html body #research-app[data-fuuvo-colour-surface] .research-colour-cool {
        background: radial-gradient(ellipse at 8% 4%, #08e2b55c, transparent 52%),
            radial-gradient(ellipse at 60% -12%, #25baff5c, transparent 56%),
            radial-gradient(ellipse at 98% 12%, #a568ff52, transparent 52%);
        animation-name: fuuvo-research-cool;
    }

    html body #research-app[data-fuuvo-colour-surface] .research-colour-warm {
        background: radial-gradient(ellipse at 8% 4%, #ff8a5557, transparent 52%),
            radial-gradient(ellipse at 60% -12%, #ff6faa52, transparent 56%),
            radial-gradient(ellipse at 98% 12%, #ffdb3266, transparent 52%);
        animation-name: fuuvo-research-warm;
        opacity: 0;
    }

    html body #research-app[data-research-page="home"] .creation-main[data-fuuvo-app-scroll="1"] {
        position: relative;
        z-index: 1;
        isolation: auto !important;
        width: 100% !important;
        max-width: 1424px !important;
        min-height: calc(100dvh - 72px) !important;
        margin: 0 auto !important;
        padding: 32px 52px 36px !important;
        box-sizing: border-box;
        background: transparent !important;
    }

    html body #research-app[data-research-page="home"] .research-home-heading {
        padding: 25px 12px 12px !important;
        margin: 0 0 17px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        text-align: center;
    }

    html body #research-app[data-research-page="home"] .research-home-heading h1 {
        margin: 0 0 14px;
        color: var(--rs-ink) !important;
        font-size: 34px !important;
        font-weight: 650;
        line-height: 1.25 !important;
        letter-spacing: -.9px;
    }

    html body #research-app[data-research-page="home"] .research-home-heading p {
        max-width: 760px;
        margin: 0 auto;
        color: var(--rs-muted) !important;
        font-size: 15px !important;
        line-height: 1.6;
    }

    html body #research-app[data-research-page="home"] .research-tabs {
        display: flex;
        justify-content: center;
        gap: 30px;
        width: max-content;
        min-width: 0;
        margin: 15px auto 28px !important;
        border: 0;
        background: transparent;
    }

    html body #research-app[data-research-page="home"] .research-tabs > a {
        min-height: 0;
        padding: 10px 16px 12px;
        border: 0 !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--rs-muted) !important;
        -webkit-text-fill-color: var(--rs-muted) !important;
        font-size: 14px;
        font-weight: 500;
    }

    html body #research-app[data-research-page="home"] .research-tabs > a.active,
    html body #research-app[data-research-page="home"] .research-tabs > a:hover {
        color: var(--rs-active) !important;
        -webkit-text-fill-color: var(--rs-active) !important;
    }

    html body #research-app[data-research-page="home"] .research-tabs > a.active {
        border-bottom-color: #147ce5 !important;
        font-weight: 600;
    }

    html body #research-app[data-research-page="home"] .research-tool-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 20px !important;
        margin: 0 !important;
    }

    html body #research-app[data-research-page="home"] .research-tool-card {
        --rs-icon: #087c68;
        --rs-tint: #d9faec;
        --rs-wash: #25e5b816;
        --rs-edge: #a7ead6;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start !important;
        min-height: 218px !important;
        padding: 28px 22px !important;
        border: 1px solid var(--rs-line) !important;
        border-radius: 18px !important;
        background: var(--rs-card) !important;
        box-shadow: 0 9px 30px -16px #284e5b18;
        text-align: center;
        transition: box-shadow .2s, border-color .2s;
    }

    html body #research-app[data-research-page="home"] .research-tool-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(180deg, var(--rs-wash), transparent 65%);
    }

    #research-app[data-research-page="home"] .research-tool-card:nth-child(2) { --rs-icon: #126db8; --rs-tint: #e2f3ff; --rs-wash: #25baff13; --rs-edge: #acdfff; }
    #research-app[data-research-page="home"] .research-tool-card:nth-child(3) { --rs-icon: #7848b9; --rs-tint: #f0e7ff; --rs-wash: #a568ff10; --rs-edge: #dcc4ff; }
    #research-app[data-research-page="home"] .research-tool-card:nth-child(4) { --rs-icon: #277e46; --rs-tint: #e5f9dc; --rs-wash: #7be55212; --rs-edge: #c7eab9; }
    #research-app[data-research-page="home"] .research-tool-card:nth-child(5) { --rs-icon: #a75c13; --rs-tint: #fff0d8; --rs-wash: #ffb32912; --rs-edge: #ffdf9c; }
    #research-app[data-research-page="home"] .research-tool-card:nth-child(6) { --rs-icon: #ab3874; --rs-tint: #ffe6f2; --rs-wash: #ff6faa10; --rs-edge: #ffc4df; }

    html body #research-app[data-research-page="home"] .research-tool-card:hover {
        border-color: var(--rs-edge) !important;
        box-shadow: 0 12px 32px -14px #284e5b30;
        transform: none;
    }

    html body #research-app[data-research-page="home"] .research-icon-tile {
        display: grid;
        place-items: center;
        width: 61px;
        height: 61px;
        flex: 0 0 61px;
        margin-bottom: 19px;
        border-radius: 17px;
        background: var(--rs-tint);
        color: var(--rs-icon);
    }

    html body #research-app[data-research-page="home"] .research-icon-tile > .research-tool-art,
    html body #research-app[data-research-page="home"] .research-icon-tile .research-tool-art-linear > :is(.fuuvo-linear-svg, .fuuvo-asset-icon) {
        display: block !important;
        width: 29px !important;
        height: 29px !important;
        flex: 0 0 29px !important;
        margin: 0 !important;
        color: var(--rs-icon) !important;
        object-fit: contain;
    }

    html body #research-app[data-research-page="home"] .research-tool-card h2 {
        margin: 0 0 8px !important;
        color: var(--rs-ink) !important;
        font-size: 16px;
        font-weight: 650;
        line-height: 1.4;
        letter-spacing: -.2px;
    }

    html body #research-app[data-research-page="home"] .research-tool-card p {
        max-width: 380px;
        margin: 0;
        color: var(--rs-muted) !important;
        font-size: 13px;
        line-height: 1.65;
    }

    html body #research-app[data-research-page="home"] .research-ai-disclaimer {
        margin-top: 62px !important;
        padding-top: 22px !important;
        border-top-color: var(--rs-line) !important;
        background: transparent !important;
        color: var(--rs-muted) !important;
        font-size: 12px !important;
    }

    html body #research-app[data-research-page="home"] :is(a, button, summary):focus-visible {
        outline: 3px solid #0e7b84;
        outline-offset: 4px;
    }

    html body[data-ui-theme="dark"] #research-app[data-fuuvo-colour-surface] {
        --rs-paper: #131c25;
        --rs-card: #1b2833;
        --rs-ink: #e4f0f2;
        --rs-muted: #bdcfd6;
        --rs-line: #354550;
        --rs-active: #8fc7ff;
    }

    html body[data-ui-theme="dark"] #research-app[data-fuuvo-colour-surface] .research-colour-aura { opacity: .4; }

    @media (max-width: 1100px) {
        html body #research-app[data-research-page="home"] .research-tool-card { padding: 26px 18px !important; }
        html body #research-app[data-research-page="home"] .research-tool-card h2 { font-size: 15px; }
    }

    @media (prefers-reduced-motion: reduce) {
        html body #research-app[data-fuuvo-colour-surface] .research-colour-aura > div { animation: none !important; }
        html body #research-app[data-fuuvo-colour-surface] .research-colour-warm { opacity: 0; }
    }
}

@keyframes fuuvo-research-cool { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fuuvo-research-warm { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }