#system-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}


#roadmap-speech {
    background-color: var(--nl-color-green-tea);
    color: var(--nl-color-charcoal);
    padding: 1em;
    border-radius: 1em;
    margin-left: 10%;
    margin-right: 10%;
}


#roadmap-speech * {
    color: var(--nl-color-charcoal);
}


#roadmap-speech ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 1em;
}

#roadmap-speech li {
    margin-bottom: 0.25em;
}

#roadmap-speech p:not(:last-of-type) {
    margin-bottom: 1em;
}

@media screen and (min-width: 1025px) {

    #roadmap-chart {
        padding: 0;
        margin: 0;
        margin-top: calc(var(--nl-size-unit)*3);
        width: var(--nl-main-width);
        height: calc(0.333 * var(--nl-main-width));
        display: flex;
        align-items: center;
        position: relative;
    }

    #roadmap-chart .time-line {
        padding: 0;
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 0;
        border: 1px dashed white;
    }

    #roadmap-chart .product {
        width: calc(var(--nl-size-unit)*10);
        height: calc(var(--nl-size-unit)*10);
        background-color: white;
        border-radius: 1em;
        position: absolute;
        margin: 0;
        padding: 0;
        transform: translateX(-50%);
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Optional: to center horizontally as well */
        color: var(--nl-color-charcoal);
    }

    #roadmap-chart .product div {
        margin-top: calc(var(--nl-size-unit)*1);
        color: var(--nl-color-charcoal);
        font-family: DM Sans;
        font-weight: 400;
    }

    #roadmap .product:nth-of-type(2n) {
        top: 0;
    }

    #roadmap .product:nth-of-type(2n+1) {
        bottom: 0;
    }

    #roadmap-chart .stem {
        width: 0;
        height: calc(var(--nl-size-unit)*5);
        position: absolute;
        margin: 0;
        padding: 0;
        transform: translateX(-50%);
        border: 1px dashed white;
        z-index: 0;
    }

    #roadmap .stem:nth-of-type(2n) {
        transform: translateY(-50%);
    }

    #roadmap .stem:nth-of-type(2n+1) {
        transform: translateY(50%);
    }

    #roadmap-chart .calendar-icon {
        width: calc(2* var(--nl-size-unit));
        height: calc(2* var(--nl-size-unit));
        position: absolute;
        margin: 0;
        padding: 0;
        transform: translate(-50%, 0);
        background-color: white;
        border-radius: calc(2* var(--nl-size-unit));
        padding: calc(0.5 * var(--nl-size-unit));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #roadmap-chart .calendar-icon img {
        position: relative;
        width: calc(1.5* var(--nl-size-unit));
        height: calc(1.5* var(--nl-size-unit));
    }

    #roadmap .release-date {
        position: absolute;
        width: calc(6 * var(--nl-size-unit));
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #roadmap .release-date:nth-of-type(2n) {
        transform: translate(-50%, 150%);
    }

    #roadmap .release-date:nth-of-type(2n+1) {
        transform: translate(-50%, -150%);
    }

    #roadmap-chart div[number='1'] {
        left: calc(100% / 7 * 1);
    }

    #roadmap-chart div[number='2'] {
        left: calc(100% / 7 * 2);
    }

    #roadmap-chart div[number='3'] {
        left: calc(100% / 7 * 3);
    }

    #roadmap-chart div[number='4'] {
        left: calc(100% / 7 * 4);
    }

    #roadmap-chart div[number='5'] {
        left: calc(100% / 7 * 5);
    }

    #roadmap-chart div[number='6'] {
        left: calc(100% / 7 * 6);
    }

    #roadmap-chart div[number='7'] {
        left: calc(100% / 7 * 7);
    }
}

@media screen and (max-width: 1024px) {

    #system-diagram img {
        width: 100%;
        max-width: 100%;
        object-fit: contain;
        flex-shrink: 0;
        aspect-ratio: auto
    }

    #roadmap-chart {
        padding: 0;
        margin: 0;
        margin-top: calc(var(--nl-size-unit)*3);
        width: var(--nl-main-width);
        height: calc(9 * var(--nl-size-unit)* 10);
        display: flex;
        align-items: center;
        position: relative;
    }

    #roadmap-chart .time-line {
        padding: 0;
        margin: 0;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 100%;
        border: 1px dashed white;
    }

    #roadmap-chart .product {
        width: calc(var(--nl-size-unit)*10);
        height: calc(var(--nl-size-unit)*10);
        background-color: white;
        border-radius: var(--nl-size-unit);
        position: absolute;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* Optional: to center horizontally as well */
        color: var(--nl-color-charcoal);
    }

    #roadmap-chart .product div {
        margin-top: calc(var(--nl-size-unit)*1);
        color: var(--nl-color-charcoal);
        font-family: DM Sans;
        font-weight: 400;
    }

    #roadmap .product:nth-of-type(2n+1) {
        right: 0;
    }


    #roadmap-chart .stem {
        height: 0;
        width: calc(var(--nl-size-unit)*2);
        position: absolute;
        left: 50%;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        border: 1px dashed white;
        z-index: 0;
    }

    #roadmap .stem:nth-of-type(2n) {
        transform: translateX(-150%);
    }

    #roadmap .stem:nth-of-type(2n+1) {
        transform: translateX(50%);
    }

    #roadmap-chart .calendar-icon {
        width: calc(2* var(--nl-size-unit));
        height: calc(2* var(--nl-size-unit));
        position: absolute;
        margin: 0;
        padding: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        border-radius: calc(2* var(--nl-size-unit));
        padding: calc(0.5 * var(--nl-size-unit));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #roadmap-chart .calendar-icon img {
        position: relative;
        width: calc(1.5* var(--nl-size-unit));
        height: calc(1.5* var(--nl-size-unit));
    }

    #roadmap .release-date {
        position: absolute;
        left: 50%;
        transform: translate(0, -50%);
        width: calc(8 * var(--nl-size-unit));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #roadmap .release-date:nth-of-type(2n) {
        left: 55%;
    }

    #roadmap .release-date:nth-of-type(2n+1) {
        left: 15%;
    }

    #roadmap-chart div[number='1'] {
        top: calc(100% / 7 * 1);
    }

    #roadmap-chart div[number='2'] {
        top: calc(100% / 7 * 2);
    }

    #roadmap-chart div[number='3'] {
        top: calc(100% / 7 * 3);
    }

    #roadmap-chart div[number='4'] {
        top: calc(100% / 7 * 4);
    }

    #roadmap-chart div[number='5'] {
        top: calc(100% / 7 * 5);
    }

    #roadmap-chart div[number='6'] {
        top: calc(100% / 7 * 6);
    }
}