/* ==========================================
   Who This Is For
========================================== */

.cr-who-is-for{
    max-width:var(--global-content-width,1290px);
    margin:0 auto;
}

/* ==========================================
   Header
========================================== */

.cr-who-is-for-header{
    margin-bottom:60px;
}

.cr-who-is-for-eyebrow{
    /*font-family:"JetBrains Mono", monospace;*/
    /*font-size:var(--global-kb-font-size-sm,.95rem);*/
    /*font-weight:300;*/
    /*text-transform:uppercase;*/
    /*color:var(--global-palette5);*/
    margin-bottom:28px;
    
    font-size: 13px;
    line-height: 2.4;
    font-weight: 400;
    font-family: Syne;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--global-palette5);
}

.cr-who-is-for-title{

    margin-top: 0px !important;
    margin-bottom: var(--global-kb-spacing-xs, 1rem) !important;

    font-family:var(--global-heading-font-family);
    font-size: var(--global-kb-font-size-xxl, 4rem);
    font-weight:300;
    line-height:1.05;
    color:var(--global-palette3);
}

.cr-title-normal{
    color:var(--global-palette3);
}

.cr-gradient-text{
    background:linear-gradient(
        90deg,
        #00D4C4 0%,
        #6366F1 50%,
        #FF7A6B 100%
    );
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.cr-who-is-for-description{
    max-width:980px;
    margin:30px 0 0;
    font-family:var(--global-body-font-family);
    font-size:16px;
    line-height:1.5;
    font-weight:300;
    color:var(--global-palette4);
}

/* ==========================================
   Role Grid
========================================== */

.cr-role-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

/* ==========================================
   Role Card
========================================== */

.cr-role-card{
    background:#121728;
    border:1px solid var(--global-palette6);
    border-top-width:1px;
    border-top-style:solid;
    border-radius:14px;
    
    padding-top: var(--global-kb-spacing-sm, 1.5rem);
    padding-right: var(--global-kb-spacing-sm, 1.5rem);
    padding-bottom: var(--global-kb-spacing-sm, 1.5rem);
    padding-left: var(--global-kb-spacing-sm, 1.5rem);
    
    /*min-height:320px;*/
    display:flex;
    flex-direction:column;
    height: 100%;
}

/* ==========================================
   Dynamic Accent Colors
========================================== */

.cr-role-cyan{
    border-top-color:#00D4C4;
}

.cr-role-cyan .cr-role-label{
    color:#00D4C4;
}

.cr-role-indigo{
    border-top-color:#6366F1;
}

.cr-role-indigo .cr-role-label{
    color:#6366F1;
}

.cr-role-green{
    border-top-color:#34C759;
}

.cr-role-green .cr-role-label{
    color:#34C759;
}

.cr-role-coral{
    border-top-color:#FF7A6B;
}

.cr-role-coral .cr-role-label{
    color:#FF7A6B;
}

/* ==========================================
   Role Label
========================================== */

.cr-role-label{
    /*font-family:"JetBrains Mono", monospace;*/
    /*font-size:13px;*/
    /*font-weight:300;*/
    /*text-transform:uppercase;*/
    /*line-height: 1.5*/
    
    font-size: 13px;
    line-height: 1.5;
    font-weight: 300;
    font-family: Syne;
    text-transform: uppercase;
    letter-spacing: 0.22em;
 
}

/* ==========================================
   Role Title
========================================== */

.cr-role-title{
    font-family:var(--global-body-font-family);
    font-size:20px;
    font-weight:400;
    line-height:1.4;
    color:var(--global-palette3);
}

/* ==========================================
   Role Description
========================================== */

.cr-role-description{
    margin:0;
    font-family:var(--global-body-font-family);
    font-size:16px;
    line-height:1.5;
    font-weight:300;
    color:var(--global-palette4);
}

/* ==========================================
   Tablet
========================================== */

@media (max-width:1024px){

    .cr-who-is-for{
        padding:5rem 2rem;
    }

    .cr-role-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cr-role-card{
        min-height:auto;
    }

    .cr-who-is-for-title{
        font-size:4rem;
    }

}

/* ==========================================
   Mobile
========================================== */

@media (max-width:767px){

    .cr-who-is-for{
        padding:4rem 1.5rem;
    }

    .cr-role-grid{
        grid-template-columns:1fr;
    }

    .cr-who-is-for-title{
        font-size:2.9rem;
        line-height:1.1;
    }

    .cr-who-is-for-description{
        font-size:1.125rem;
    }

    .cr-role-card{
        padding:28px 24px;
    }

    .cr-role-title{
        font-size:1.75rem;
    }

    .cr-role-description{
        font-size:1.125rem;
        line-height:1.6;
    }

}