.timeline-container {
    position: relative;
    width: 100%;
}
.timeline-wrapper {
    position: relative;
    border-radius: 20px;
    /* Generous top padding accommodates the thick wedge line cleanly inside the blue box */
    padding: 60px 20px 40px 20px;
    overflow: hidden;
}

/* Real CSS Shape Wedge representing your graphic design rules */
.timeline-wedge {
    position: absolute;
    left: -2px;
    right: -2px;
    top: 15px; /* Safely placed inside the top layer of the wrapper box */
    height: 34px; /* The maximum height of the wedge profile on the right */
    z-index: 1;
    /* Draws a polygon starting thin on the left (4px) and thickening as it nears the right (34px) */
    clip-path: polygon(0% 40%, 100% 0%, 100% 100%, 0% 55%);
    pointer-events: none;
}

.timeline-grid {
    display: grid;
    gap: 0;
}
.timeline-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 15px;
    border-inline-end: 1px solid transparent;
}

/* Structured cleanly *completely below* the wedge line overlay */
.timeline-title {
    margin: 0 0 12px 0;
}
.timeline-subtitle {
    margin: 0;
}