.cms-how-it-works-widget {
    --hiw-accent-color: #f4d03f;
    --hiw-connector-color: #cbd5e1;
    --hiw-connector-thickness: 3px;
    --hiw-panel-bg: #ffffff;
    --hiw-panel-padding: 1.5rem;
    --hiw-panel-radius: 12px;
    --hiw-panel-shadow: 0 10px 25px -5px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.05);
    --hiw-branch-bg: #f8fafc;
    --hiw-branch-border: #e2e8f0;
    font-family: sans-serif;
    padding: 2rem 0;
    overflow: hidden;
}

.hiw-main-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 4rem;
    color: #1a202c;
}

.hiw-flowchart { width: 100%; }
.hiw-row { display: flex; justify-content: space-around; align-items: flex-start; position: relative; }

/* Base Step Styles */
.hiw-step-wrapper {
    --node-pos-x: 50%;
    flex: 1;
    position: relative;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.hiw-step-wrapper.is-visible { opacity: 1; transform: translateY(0); }

/* Row-specific widths */
.hiw-row:first-of-type .hiw-step-wrapper { max-width: 35%; }
.hiw-row:first-of-type .hiw-step-wrapper.is-branch { max-width: 60%; }
.hiw-row:last-of-type .hiw-step-wrapper { max-width: 30%; }

.hiw-step-node {
    position: absolute;
    top: 35px;
    left: var(--node-pos-x);
    transform: translate(-50%, -50%);
    z-index: 2;
}

.hiw-step-wrapper.is-branch .hiw-step-node {
    /* The panel is 40% width, so its center is at 20% of the parent */
    left: 20%;
}

.hiw-step-number {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--hiw-panel-bg);
    color: var(--hiw-accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    border: var(--hiw-connector-thickness) solid var(--hiw-accent-color);
    box-shadow: 0 0 0 6px var(--hiw-panel-bg);
}

.hiw-step-panel {
    margin-top: 70px;
    background: var(--hiw-panel-bg);
    padding: var(--hiw-panel-padding);
    border-radius: var(--hiw-panel-radius);
    box-shadow: var(--hiw-panel-shadow);
    border: 1px solid #e2e8f0;
    text-align: left;
    min-height: 180px;
}

.hiw-step-title { font-size: 1.25rem; font-weight: 700; color: #2d3748; margin-top: 0; margin-bottom: 1rem; }
.hiw-step-content { color: #4a5568; line-height: 1.6; font-size: 0.9rem; }

/* --- Connectors (Masking Method) --- */
.hiw-row::before {
    content: '';
    position: absolute;
    top: 35px;
    transform: translateY(-50%);
    height: var(--hiw-connector-thickness);
    background: var(--hiw-connector-color);
    z-index: 0;
    left: 0;
    width: 100%;
}

.hiw-step-wrapper:first-child::before {
    content: '';
    position: absolute;
    top: 35px;
    transform: translateY(-50%);
    height: var(--hiw-connector-thickness);
    background: var(--hiw-panel-bg);
    z-index: 1;
    right: calc(100% - var(--node-pos-x));
    width: 100vw;
}

.hiw-step-wrapper:last-child::after {
    content: '';
    position: absolute;
    top: 35px;
    transform: translateY(-50%);
    height: var(--hiw-connector-thickness);
    background: var(--hiw-panel-bg);
    z-index: 1;
    left: var(--node-pos-x);
    width: 100vw;
}


/* --- Branching (Right-Side) --- */
.hiw-step-body { display: flex; align-items: center; gap: 1.5rem; position: relative; }
.hiw-step-body > .hiw-step-panel { flex-basis: 40%; flex-shrink: 0; }
.hiw-branch-container { flex-grow: 1; position: relative; }
.hiw-branch-paths { display: flex; flex-direction: column; gap: 1rem; position: relative; }
.hiw-branch-path { background: var(--hiw-branch-bg); border: 1px solid var(--hiw-branch-border); border-radius: var(--hiw-panel-radius); padding: 1rem; text-align: left; position: relative; }
.hiw-branch-title { font-size: 1rem; font-weight: 700; color: #2d3748; margin-top: 0; margin-bottom: 0.75rem; }
.hiw-branch-content { color: #4a5568; line-height: 1.6; font-size: 0.85rem; }

/* Branch Connectors */
.hiw-step-body::before { /* Horizontal line from panel to fork */
    content: '';
    position: absolute;
    left: 40%;
    top: 50%;
    transform: translateY(-50%);
    width: calc(60% - 40% + 1.5rem); /* Panel basis to container gap */
    height: var(--hiw-connector-thickness);
    background: var(--hiw-connector-color);
}
.hiw-branch-paths::before { /* Vertical line connecting branches */
    content: '';
    position: absolute;
    left: var(--branch-fork-offset-x, -20px);
    top: var(--branch-fork-vertical-position, 25%);
    bottom: var(--branch-fork-vertical-position, 25%);
    width: var(--hiw-connector-thickness);
    background: var(--hiw-connector-color);
}
.hiw-branch-path::before { /* Line from vertical to path */
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--branch-fork-offset-x, -20px) * -1);
    height: var(--hiw-connector-thickness);
    background: var(--hiw-connector-color);
}
.hiw-step-wrapper.is-branch > .hiw-step-body::after { /* Merge connector line */
    content: '';
    position: absolute;
    right: calc(var(--branch-exit-length, 25%) * -1); /* Position relative to step-body */
    top: 50%;
    transform: translateY(-50%);
    width: var(--branch-exit-length, 25%);
    height: var(--hiw-connector-thickness);
    background: var(--hiw-connector-color);
    z-index: 0;
}

/* --- Row Connector (SVG) --- */
.hiw-row-connector-wrapper {
    width: 100%;
    height: 100px;
    position: relative;
    color: var(--hiw-connector-color);
    margin: -35px 0;
}
.hiw-row-connector-wrapper svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.hiw-row-connector-wrapper svg path {
    stroke: currentColor;
    fill: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .hiw-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding-left: 50px;
    }
    .hiw-row::before {
        content: '';
        position: absolute;
        left: 35px;
        transform: translateX(-50%);
        top: 35px;
        bottom: 35px;
        width: var(--hiw-connector-thickness);
        background: var(--hiw-connector-color);
        z-index: 0;
    }
    .hiw-step-wrapper, .hiw-row:first-of-type .hiw-step-wrapper, .hiw-row:last-of-type .hiw-step-wrapper {
        max-width: 100%;
        padding-left: 0;
        padding-top: 0;
        margin-bottom: 0;
        padding-bottom: 2rem;
        position: relative;
    }
    .hiw-step-wrapper:last-child { padding-bottom: 0; }
    .hiw-step-node { left: -15px; top: 0; transform: translate(-50%, -50%); z-index: 2; }
    .hiw-step-wrapper::before, .hiw-step-wrapper::after, .hiw-step-body::after, .hiw-step-body::before { display: none !important; }
    .hiw-row-connector-wrapper { display: none; }
    .hiw-step-body { display: block; }
    .hiw-branch-container { padding: 0; }
    .hiw-branch-container::before, .hiw-branch-path::before { display: none !important; }
    .hiw-branch-paths {
        flex-direction: column;
        padding-top: 1rem;
        padding-bottom: 0;
        margin-left: 15px;
        position: relative;
        border-left: var(--hiw-connector-thickness) solid var(--hiw-connector-color);
        padding-left: 15px;
    }
    .hiw-branch-paths::before {
        content: '';
        position: absolute;
        top: 0;
        left: calc(var(--hiw-connector-thickness) * -1);
        width: 15px;
        height: var(--hiw-connector-thickness);
        background: var(--hiw-connector-color);
    }
    .hiw-step-panel { min-height: auto; margin-top: 35px; }
}