*, *::before, *::after {
    box-sizing: border-box;
}

.engagementPage .engagementTop {
    position: relative;
    background-color: var(--color-white-70);
    min-height: 35rem;
    width: 100%;
    overflow: hidden;
}

.engagementPage.fan .engagementTop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            135deg,
            var(--color-cyan-teal-dark-1) 0%,
            var(--color-cyan-teal) 30%,
            var(--color-cyan-teal-dark-2) 70%,
            var(--color-cyan-teal-dark-3) 100%
    );
    z-index: 0;
}

.engagementPage.business .engagementTop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            135deg,
            var(--color-blue-50-dark-1) 0%,
            var(--color-blue-50) 30%,
            var(--color-blue-50-dark-2) 70%,
            var(--color-blue-50-dark-3) 100%
    );
    z-index: 0;
}


.engagementPage.creator .engagementTop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            135deg,
            var(--color-accent-50-dark-1) 0%,
            var(--color-accent-50) 30%,
            var(--color-accent-50-dark-2) 70%,
            var(--color-accent-50-dark-3) 100%
    );
    z-index: 0;
}

.engagementPage.ai-partner .engagementTop::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            135deg,
            var(--color-blue-100-dark-1) 0%,
            var(--color-blue-100) 30%,
            var(--color-blue-100-dark-2) 70%,
            var(--color-blue-100-dark-3) 100%
    );
    z-index: 0;
}


.engagementPage .engagementTop > * {
    position: relative;
    z-index: 1;
}


.engagementPage .engagementMessage {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 2rem 0;
}

.engagementPage .engagementMessage .ai-partner,
.engagementPage .engagementMessage .business,
.engagementPage .engagementMessage .creator,
.engagementPage .engagementMessage .fan {
    color: white;
}

.engagementPage .engagementMessage h3 {
    display: inline-block;
    font-style: normal;
    font-weight: 300;
    font-size: 0.875rem;
    letter-spacing: 0.05rem;
    line-height: 1.4;
    text-align: left;
    max-width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    color: #fff;
}

.engagementPage .engagementMessage h1 {
    font-size: clamp(3rem, 2.5vw, 5rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1.5rem;
    text-align: center;
}

.engagementPage .engagementMessage p {
    font-size: clamp(1.2rem, 2vw, 1.25rem);
    text-align: center;
    max-width: 600px;
    line-height: 1.6;
    margin: 0 auto 1.5rem;
}

.engagementHeroContent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
}

.engagementLeftHero {
    flex: 1 1 50%;
    min-width: 280px;
}

.engagementRightHero {
    flex: 1 1 40%;
    min-width: 280px;
    text-align: center;
    padding: 1rem;
}

.engagementRightHero img {
    width: 100%;
    max-width: 512px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 2rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.75);
}

.heroButtons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-width: 500px;
}

.engagementFeatures {
    width: 100%;
    padding: 3rem 1.5rem;
    background-color: var(--color-white-40);
    text-align: center;
}

.engagementFeatures h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.engagementFeatureList {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.engagementFeatureList article {
    flex: 1 1 calc(22% - .5rem);
    max-width: calc(22% - .5rem);
    background-color: var(--color-white-20);
    padding: .5rem;
    border-radius: 12px;
}

.engagementFeatureList h2 {
    font-size: 1.25rem;
    color: var(--color-blue-100);
    padding-right: 1.75rem;
    padding-left: 1.75rem;
    margin-bottom: 0.5rem;
}

.engagementFeatureList i {
    display: inline-block;
    font-size: 2rem;
    color: var(--color-blue-100);
    margin-bottom: 0.5rem;
    padding: .25rem;
    background-color: var(--color-white-60);
    border-radius: 4px;
}

.engagementFeatureList .button-primary {
    font-size: 1.25rem;
}

.engagementFeatureList p {
    font-size: 1rem;
    color: var(--color-purple-100);
}

.engagementHowItWorks {
    width: 100%;
    padding: 3rem 1.5rem;
    background-color: var(--color-white-70);
    text-align: center;
}

.engagementHowItWorks h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--color-blue-100);
}

.howItWorksWrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.howItWorksColumn,
.whyItWorksColumn {
    flex: 1 1 45%;
    min-width: 280px;
    background-color: var(--color-white-20);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.howItWorksColumn:hover,
.whyItWorksColumn:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.engagementHowItWorks h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-blue-100);
}

.engagementHowItWorks ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.engagementHowItWorks li {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.6;
}

.engagementHowItWorks li strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.engagementCTA {
    width: 100%;
    padding: 3rem 1.5rem;
    background-color: var(--color-white-20);
    text-align: center;
}

.engagementCTA h1 {
    font-size: 2rem;
    color: var(--color-accent-50);
    margin-bottom: 2rem;
}

.engagementPage.ai-partner .engagementMessage h3,
.engagementPage.creator .engagementMessage h3,
.engagementPage.business .engagementMessage h3,
.engagementPage.fan .engagementMessage h3 {
    color: white;
}

.engagementPage.ai-partner .engagementCTA h1,
.engagementPage.ai-partner .engagementFeatureList article h2,
.engagementPage.ai-partner .engagementFeatures i,
.engagementPage.ai-partner .engagementHowItWorks h1,
.engagementPage.ai-partner .engagementFeatures h1,
.engagementPage.ai-partner .engagementCTA h1,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong,
.engagementPage.ai-partner .engagementHowItWorks .step-body,
.engagementPage.ai-partner .engagementHowItWorks .step-body strong,
.engagementPage.ai-partner .engagementHowItWorks .step-body p {
    color: var(--color-blue-100);
}

.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2,
.engagementPage.ai-partner .engagementHowItWorks .step-marker {
    background-color: var(--color-blue-100-dark-1);
    color: white;
    text-align: center;
}

.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li i,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong {
    color: var(--color-blue-100-dark-1);
}

.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2 {
    border-radius: 8px;
}


.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li i,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.ai-partner .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong {
    color: var(--color-blue-100-dark-1);
}

.engagementPage.fan .engagementCTA h1,
.engagementPage.fan .engagementFeatureList article h2,
.engagementPage.fan .engagementFeatures i,
.engagementPage.fan .engagementHowItWorks h1,
.engagementPage.fan .engagementFeatures h1,
.engagementPage.fan .engagementCTA h1,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong,
.engagementPage.fan .engagementHowItWorks .step-body,
.engagementPage.fan .engagementHowItWorks .step-body strong,
.engagementPage.fan .engagementHowItWorks .step-body p {
    color: var(--color-cyan-teal);
}

.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2,
.engagementPage.fan .engagementHowItWorks .step-marker {
    background-color: var(--color-cyan-teal-dark-1);
    color: white;
    text-align: center;
}

.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li i,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong {
    color: var(--color-cyan-teal-dark-1);
}

.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.fan .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2 {
    border-radius: 8px;
}

.engagementPage.fan .howItWorksWrapper .howItWorksColumn,
.engagementPage.fan .howItWorksWrapper .whyItWorksColumn,
.engagementPage.fan .engagementFeatureList article {
    box-shadow: 0 8px 16px rgba(12, 198, 192, 0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.engagementPage.fan .howItWorksWrapper .howItWorksColumn:hover,
.engagementPage.fan .howItWorksWrapper .whyItWorksColumn:hover,
.engagementPage.fan .engagementFeatureList article:hover {
    box-shadow: 0 16px 32px rgba(12, 198, 192, 0.4);
}

.engagementPage.business .engagementCTA h1,
.engagementPage.business .engagementFeatureList article h2,
.engagementPage.business .engagementFeatures i,
.engagementPage.business .engagementHowItWorks h1,
.engagementPage.business .engagementFeatures h1,
.engagementPage.business .engagementCTA h1,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong,
.engagementPage.business .engagementHowItWorks .step-body,
.engagementPage.business .engagementHowItWorks .step-body strong,
.engagementPage.business .engagementHowItWorks .step-body p {
    color: var(--color-blue-50);
}

.engagementPage.business .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2,
.engagementPage.business .engagementHowItWorks .step-marker {
    background-color: var(--color-blue-50-dark-1);
    color: white;
    text-align: center;
}

.engagementPage.business .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li i,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong {
    color: var(--color-blue-50-dark-1);
}

.engagementPage.business .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.business .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2 {
    border-radius: 8px;
}

.engagementPage.business .engagementFeatureList article {
    box-shadow: 0 8px 16px rgba(49, 64, 213, 0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.engagementPage.business .engagementFeatureList article:hover {
    box-shadow: 0 16px 32px rgba(49, 64, 213, 0.4);
}

.engagementPage.business .engagementCTA h1 {
    color: var(--color-blue-50);
}

.engagementPage .engagementCTA .button-row {
    padding-bottom: .5rem;
}

.engagementPage.creator .engagementCTA h1,
.engagementPage.creator .engagementFeatureList article h2,
.engagementPage.creator .engagementFeatures i,
.engagementPage.creator .engagementHowItWorks h1,
.engagementPage.creator .engagementFeatures h1,
.engagementPage.creator .engagementCTA h1,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong,
.engagementPage.creator .engagementHowItWorks .step-body,
.engagementPage.creator .engagementHowItWorks .step-body strong,
.engagementPage.creator .engagementHowItWorks .step-body p
{
    color: var(--color-accent-50);
}

.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2,
.engagementPage.creator .engagementHowItWorks .step-marker {
    background-color: var(--color-accent-50-dark-1);
    color: white;
    text-align: center;
}

.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li i,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .howItWorksColumn ul li strong,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn ul li strong {
    color: var(--color-accent-50-dark-1);
}

.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .howItWorksColumn h2,
.engagementPage.creator .engagementHowItWorks .howItWorksWrapper .whyItWorksColumn h2 {
    border-radius: 8px;
}


.engagementPage.creator .engagementHowItWorks .step-marker {
    background-color: var(--color-accent-50-dark-1);;
}

.engagementPage.creator .engagementFeatureList article {
    box-shadow: 0 8px 16px rgba(237, 69, 137, 0.1);
    transition: box-shadow 0.3s ease;
}

.engagementPage.creator .engagementFeatureList article:hover {
    box-shadow: 0 16px 32px rgba(237, 69, 137, 0.4);
}

.engagementPage.ai-partner .engagementFeatureList article {
    box-shadow: 0 8px 16px rgba(19, 31, 103, 0.1);
    transition: box-shadow 0.3s ease;
}

.engagementPage.ai-partner .engagementFeatureList article:hover {
    box-shadow: 0 16px 32px rgba(19, 31, 103, 0.4);
}

.howSteps li,
.whySteps li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.step-marker {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-body {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.step-body i {
    font-size: 4rem;
    flex-shrink: 0;
}

.step-body strong {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.step-body p {
    font-size: 1rem;
    margin: 0;
}

.engagementReport {
    padding: 3rem 1.5rem;
    background-color: var(--color-blue-10);
    text-align: center;
}

.footballReportWrapper {
    max-width: 800px;
    margin: 0 auto;
}

.footballReport h1 {
    font-size: 2rem;
    color: var(--color-blue-50);
    margin-bottom: 2rem;
}

.reportPreview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.reportPreview img {
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.reportPreview .button-primary {
    padding: 0.75rem 2rem;
}


@media (max-width: 975px) {
    .engagementHeroContent {
        flex-direction: column;
        text-align: center;
    }

    .engagementLeftHero,
    .engagementRightHero {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .engagementRightHero {
        min-height: 200px;
        margin-top: 2rem;
    }

    .heroButtons {
        min-width: auto;
        width: 100%;
    }

    .button-row {
        flex-direction: column;
        align-items: center;
    }

    .button-secondary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .engagementFeatureList article {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .howItWorksWrapper {
        flex-direction: column;
    }

    .howItWorksColumn,
    .whyItWorksColumn {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .engagementHowItWorks h1 {
        font-size: 1.75rem;
    }

    .engagementHowItWorks h2 {
        font-size: 1.25rem;
    }
}