/*==================================================
WORKING PRINCIPLE DIAGRAM (new — HCA page only)
Simple vertical/branching flow, futuristic styling
==================================================*/

.wp-flow {

    max-width: 720px;

    margin: clamp(50px, 8vw, 90px) auto 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0;

}

.wp-box {

    width: 100%;

    max-width: 460px;

    padding: 20px 26px;

    border-radius: 16px;

    background: rgba(255, 255, 255, .03);

    border: 1px solid rgba(79, 246, 255, .15);

    text-align: center;

    font-family: 'Orbitron', sans-serif;

    font-size: 13.5px;

    letter-spacing: .5px;

    color: white;

    transition: .35s;

}

.wp-box:hover {

    border-color: rgba(79, 246, 255, .4);

    box-shadow: 0 10px 30px rgba(66, 165, 255, .12);

}

.wp-box.wp-controller {

    background: linear-gradient(135deg, rgba(66, 165, 255, .18), rgba(79, 246, 255, .08));

    border-color: rgba(79, 246, 255, .35);

    color: var(--cyan);

}

.wp-box.wp-result {

    max-width: 560px;

    background: linear-gradient(135deg, rgba(66, 165, 255, .12), rgba(79, 246, 255, .04));

    border-color: rgba(79, 246, 255, .3);

}

.wp-arrow {

    width: 2px;

    height: 34px;

    background: linear-gradient(180deg, rgba(79, 246, 255, .5), rgba(79, 246, 255, .1));

    position: relative;

}

.wp-arrow::after {

    content: "";

    position: absolute;

    bottom: -1px;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-top: 7px solid rgba(79, 246, 255, .6);

}

.wp-split {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: clamp(20px, 6vw, 70px);

    width: 100%;

    margin: 0;

}

.wp-branch {

    display: flex;

    flex-direction: column;

    align-items: center;

    flex: 1;

    max-width: 240px;

}

.wp-branch .wp-box {

    max-width: 100%;

}

.wp-branch.wp-cool .wp-box {

    border-color: rgba(79, 246, 255, .3);

    color: var(--cyan);

}

.wp-branch.wp-heat .wp-box {

    border-color: rgba(255, 140, 90, .35);

    color: #FF9E6B;

}

.wp-merge-arrows {

    display: flex;

    justify-content: center;

    gap: clamp(20px, 6vw, 70px);

    width: 100%;

}

.wp-merge-arrows .wp-arrow {

    height: 34px;

}

@media(max-width:600px) {

    .wp-split,
    .wp-merge-arrows {

        gap: 24px;

    }

    .wp-branch {

        max-width: 160px;

    }

    .wp-box {

        font-size: 12px;

        padding: 16px 14px;

    }

}