:root{
    --cf-bg:#f7f7fb;
    --cf-surface:rgba(255,255,255,.86);
    --cf-soft:#eef0f5;
    --cf-line:rgba(45,48,58,.09);

    --cf-text:#1b1c20;
    --cf-muted:#737780;

    --cf-primary:#4054b2;
    --cf-primary-container:#dfe3ff;

    --cf-green:#daf5e1;
    --cf-blue:#e1e8ff;
    --cf-pink:#ffe2ef;
    --cf-gold:#ffefca;
    --cf-cyan:#e1f5f4;
    --cf-violet:#ece2ff;
}


/* FAMILY BAR */

.cf-family-bar{
    width:min(1320px,calc(100% - 32px));

    margin:18px auto 0;

    min-height:62px;

    padding:8px;

    display:flex;
    align-items:center;
    gap:6px;

    overflow-x:auto;

    border:1px solid var(--cf-line);
    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(218,245,225,.79)
        );

    backdrop-filter:blur(22px);
}

.cf-title{
    margin-right:auto;
    padding:0 10px;
    flex:0 0 auto;
}

.cf-title strong{
    display:block;
    font-size:10px;
}

.cf-title small{
    display:block;
    margin-top:2px;

    color:var(--cf-muted);

    font-size:6px;
    font-weight:900;
    letter-spacing:.1em;
}

.cf-family-bar a{
    min-height:41px;

    padding:0 12px;

    display:flex;
    align-items:center;

    flex:0 0 auto;

    border-radius:18px;

    color:#62666f;

    text-decoration:none;

    font-size:7px;
    font-weight:850;
}

.cf-family-bar a.active{
    background:var(--cf-primary-container);
    color:#17245e;
}


/* HERO */

body.insightos-v2-page h1{
    font-size:
        clamp(48px,6.5vw,92px) !important;

    line-height:.9 !important;
    letter-spacing:-.07em !important;
}


/* COMMUNITY / LEAD CARDS */

body.insightos-v2-page
:is(
    .community-card,
    .lead-card,
    .person-card,
    .network-card,
    .card,
    .panel
){
    border:1px solid var(--cf-line) !important;

    border-radius:26px !important;

    background:var(--cf-surface) !important;

    box-shadow:none !important;
}


body.insightos-v2-page
:is(
    .community-card,
    .lead-card
):nth-child(4n+1){
    background:
        linear-gradient(145deg,#fff,var(--cf-green)) !important;
}

body.insightos-v2-page
:is(
    .community-card,
    .lead-card
):nth-child(4n+2){
    background:
        linear-gradient(145deg,#fff,var(--cf-blue)) !important;
}

body.insightos-v2-page
:is(
    .community-card,
    .lead-card
):nth-child(4n+3){
    background:
        linear-gradient(145deg,#fff,var(--cf-pink)) !important;
}

body.insightos-v2-page
:is(
    .community-card,
    .lead-card
):nth-child(4n+4){
    background:
        linear-gradient(145deg,#fff,var(--cf-gold)) !important;
}


/* METRICS */

body.insightos-v2-page
:is(
    .stats,
    .metrics,
    .stats-grid,
    .metric-grid
){
    gap:8px !important;
}

body.insightos-v2-page
:is(
    .stat,
    .metric,
    .kpi
){
    min-height:110px;

    border-radius:22px !important;
}


/* COMMUNITY CONTEXT */

.cf-context{
    width:min(1320px,calc(100% - 32px));

    margin:10px auto 0;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:7px;
}

.cf-context a{
    min-height:90px;

    padding:13px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    border:1px solid var(--cf-line);
    border-radius:21px;

    color:var(--cf-text);

    text-decoration:none;
}

.cf-context a:nth-child(1){
    background:var(--cf-green);
}

.cf-context a:nth-child(2){
    background:var(--cf-blue);
}

.cf-context a:nth-child(3){
    background:var(--cf-pink);
}

.cf-context a:nth-child(4){
    background:var(--cf-gold);
}

.cf-context span{
    font-size:17px;
}

.cf-context strong{
    font-size:8px;
}


/* DETAIL EMPHASIS */

.cf-principle{
    width:min(1320px,calc(100% - 32px));

    margin:10px auto 0;

    padding:15px 17px;

    border-radius:22px;

    background:var(--cf-primary-container);

    color:#273668;

    font-size:8px;
    line-height:1.65;
}

.cf-principle strong{
    display:block;
    margin-bottom:4px;
    font-size:9px;
}


/* MOBILE */

@media(max-width:800px){

    .cf-context{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:760px){

    .cf-family-bar,
    .cf-context,
    .cf-principle{
        width:calc(100% - 18px);
    }

    .cf-title{
        display:none;
    }
}

@media(max-width:480px){

    .cf-context{
        grid-template-columns:1fr;
    }
}