.text_with_items_and_diagram {
    --twid-text-fz: clamp(15px, 19 * (100vw / 1920), 19px);
    --twid-text-lh: clamp(16px, 24 * (100vw / 1920), 24px);
    --twid-small-fz: clamp(13px, 16 * (100vw / 1920), 16px);
    --twid-small-lh: clamp(16px, 20 * (100vw / 1920), 20px);
    --twid-large-fz: clamp(15px, 28 * (100vw / 1920), 28px);
    --twid-large-lh: clamp(16px, 32 * (100vw / 1920), 32px);
    --twid-section-gap: clamp(28px, 84 * (100vw / 1920), 84px);
    --twid-card-pad: clamp(16px, 28 * (100vw / 1920), 28px);
    --twid-card-bg: #fff;
    --twid-dark: #373737;
    --twid-lime: #CDFF3A;
    --twid-line: #D1D1D1;
}

.text_with_items_and_diagram.grey {
    background-color: #EDEDED;
}
.text_with_items_and_diagram.white_bg {
    --twid-card-bg: #EDEDED;
    background-color: #fff;
}

.text_with_items_and_diagram p {
    margin: 0;
}

.text_with_items_and_diagram .text_with_items_and_diagram__title {
    margin-bottom: 12px;
}

/* ===== Intro description (wysiwyg) ===== */

.text_with_items_and_diagram__description {
    font-size: var(--twid-large-fz);
    line-height: var(--twid-large-lh);
    letter-spacing: -0.01em;
    color: #000;
}

.text_with_items_and_diagram__description * {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
}

.text_with_items_and_diagram__description > *:not(:last-child) {
    margin-bottom: 12px;
}

.text_with_items_and_diagram__description a {
    font-weight: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.text_with_items_and_diagram__description + .text_with_items_and_diagram__items_wrap,
.text_with_items_and_diagram__title + .text_with_items_and_diagram__items_wrap {
    margin-top: var(--twid-section-gap);
}

/* ===== Items ===== */

.text_with_items_and_diagram .text_with_items_and_diagram__items_title {
    margin: 0 0 clamp(16px, 28 * (100vw / 1920), 28px);
    font-size: var(--twid-large-fz);
    line-height: var(--twid-large-lh);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-transform: none;
}

/* Each item spans two rows of the parent grid (title + text) via subgrid,
   so titles and texts line up across a row even when a title wraps */
.text_with_items_and_diagram__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 28 * (100vw / 1920), 28px) clamp(16px, 84 * (100vw / 1920), 84px);
}

.text_with_items_and_diagram__item {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: clamp(8px, 16 * (100vw / 1920), 16px);
    align-content: start;
    padding-top: clamp(12px, 28 * (100vw / 1920), 28px);
    border-top: 2px solid #818181;
}

/* Odd last item spans the full row so its top border runs edge to edge */
.text_with_items_and_diagram__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.text_with_items_and_diagram__item_title {
    font-size: var(--twid-large-fz);
    line-height: var(--twid-large-lh);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #000;
}

.text_with_items_and_diagram__text {
    font-size: var(--twid-text-fz);
    line-height: var(--twid-text-lh);
    letter-spacing: -0.01em;
    color: #000;
}

/* ===== Diagram intro ===== */

.text_with_items_and_diagram__diagram_wrap {
    padding-top: clamp(16px, 28 * (100vw / 1920), 28px);
    border-top: 2px solid #818181;
}

* + .text_with_items_and_diagram__diagram_wrap {
    margin-top: var(--twid-section-gap);
}

.text_with_items_and_diagram .text_with_items_and_diagram__diagram_title {
    margin-bottom: clamp(8px, 12 * (100vw / 1920), 12px);
    font-weight: 500;
}

.text_with_items_and_diagram__diagram_description {
    font-size: var(--twid-text-fz);
    line-height: var(--twid-text-lh);
    letter-spacing: -0.01em;
    color: #000;
}

/* ===== Diagram ===== */

.text_with_items_and_diagram__diagram {
    display: grid;
    margin-top: clamp(20px, 56 * (100vw / 1920), 56px);
}

.text_with_items_and_diagram__card--input {
    grid-area: input;
}
.text_with_items_and_diagram__arrow--input {
    grid-area: arrow-input;
}
.text_with_items_and_diagram__card--engineer {
    grid-area: engineer;
}
.text_with_items_and_diagram__arrow--output {
    grid-area: arrow-output;
}
.text_with_items_and_diagram__card--output {
    grid-area: output;
}
.text_with_items_and_diagram__support {
    grid-area: support;
}

/* ===== Cards ===== */

.text_with_items_and_diagram__card,
.text_with_items_and_diagram__support_card {
    padding: var(--twid-card-pad);
    background-color: var(--twid-card-bg);
}

.text_with_items_and_diagram__card_head {
    display: flex;
    align-items: center;
    gap: clamp(12px, 16 * (100vw / 1920), 16px);
    padding-bottom: clamp(16px, 24 * (100vw / 1920), 24px);
    border-bottom: 1px solid var(--twid-line);
}

.text_with_items_and_diagram__number {
    flex: none;
    padding: 8px clamp(8px, 10 * (100vw / 1920), 10px);
    background-color: var(--twid-lime);
    font-size: var(--twid-text-fz);
    line-height: var(--twid-text-lh);
    color: #000;
}

.text_with_items_and_diagram__card_title {
    font-size: var(--twid-text-fz);
    line-height: var(--twid-text-lh);
    font-weight: 500;
    text-transform: uppercase;
    color: #000;
}

.text_with_items_and_diagram__row {
    padding-top: clamp(12px, 20 * (100vw / 1920), 20px);
}

.text_with_items_and_diagram__row + .text_with_items_and_diagram__row {
    margin-top: clamp(12px, 20 * (100vw / 1920), 20px);
    border-top: 1px solid var(--twid-line);
}

.text_with_items_and_diagram .text_with_items_and_diagram__row_title {
    margin-bottom: clamp(4px, 8 * (100vw / 1920), 8px);
    font-size: var(--twid-text-fz);
    line-height: var(--twid-text-lh);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #000;
}

.text_with_items_and_diagram .text_with_items_and_diagram__row_text {
    font-size: var(--twid-small-fz);
    line-height: var(--twid-small-lh);
    letter-spacing: -0.01em;
    color: #818181;
}

/* Engineer card (dark) */

.text_with_items_and_diagram__card--engineer {
    --twid-line: #5A5A5A;
    background-color: var(--twid-dark);
}

.text_with_items_and_diagram__card--engineer .text_with_items_and_diagram__card_title {
    font-size: clamp(17px, 24 * (100vw / 1920), 24px);
    line-height: clamp(19px, 28 * (100vw / 1920), 28px);
    color: #fff;
}

.text_with_items_and_diagram__engineer_main {
    padding: clamp(16px, 24 * (100vw / 1920), 24px) 0;
    border-bottom: 1px solid var(--twid-line);
}

.text_with_items_and_diagram .text_with_items_and_diagram__highlight {
    margin-bottom: clamp(8px, 12 * (100vw / 1920), 12px);
    font-size: clamp(17px, 28 * (100vw / 1920), 28px);
    line-height: clamp(19px, 32 * (100vw / 1920), 32px);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--twid-lime);
}

.text_with_items_and_diagram__engineer_text {
    font-size: var(--twid-text-fz);
    line-height: var(--twid-text-lh);
    letter-spacing: -0.01em;
    color: #fff;
}

.text_with_items_and_diagram__card--engineer .text_with_items_and_diagram__row_title {
    color: #fff;
}

.text_with_items_and_diagram .text_with_items_and_diagram__card--engineer .text_with_items_and_diagram__row_text {
    color: #D1D1D1;
}

/* ===== Arrows ===== */

.text_with_items_and_diagram__arrow {
    display: flex;
    gap: clamp(12px, 16 * (100vw / 1920), 16px);
}

.text_with_items_and_diagram__arrow_line {
    position: relative;
    flex: none;
    background-color: var(--twid-dark);
}

.text_with_items_and_diagram__arrow_line::before,
.text_with_items_and_diagram__arrow_line::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-color: transparent;
}

.text_with_items_and_diagram__arrow_line:not(.text_with_items_and_diagram__arrow_line--double)::before {
    display: none;
}

.text_with_items_and_diagram__arrow_label {
    font-size: var(--twid-small-fz);
    line-height: clamp(16px, 20 * (100vw / 1920), 20px);
    letter-spacing: -0.01em;
    color: var(--twid-dark);
}

/* ===== Banner ===== */

.text_with_items_and_diagram .text_with_items_and_diagram__banner {
    margin-top: clamp(16px, 28 * (100vw / 1920), 28px);
    padding: var(--twid-card-pad);
    background-color: var(--twid-dark);
    border-left: clamp(8px, 12 * (100vw / 1920), 12px) solid var(--twid-lime);
    font-size: clamp(15px, 24 * (100vw / 1920), 24px);
    line-height: clamp(19px, 28 * (100vw / 1920), 28px);
    font-weight: 500;
    letter-spacing: 0;
    color: #fff;
}

/* ===== Desktop: cards in one row, support cards hang off card 02 ===== */

@media (min-width: 1025px) {
    .text_with_items_and_diagram__diagram {
        --twid-tree: clamp(40px, 62 * (100vw / 1920), 62px);
        --twid-support-gap: clamp(12px, 28 * (100vw / 1920), 28px);
        grid-template-columns: 420fr 172fr 489fr 172fr 420fr;
        grid-template-areas:
            "input arrow-input engineer arrow-output output"
            "support support support support support";
    }

    .text_with_items_and_diagram__arrow {
        flex-direction: column;
        align-items: center;
        padding: clamp(80px, 150 * (100vw / 1920), 150px) clamp(8px, 16 * (100vw / 1920), 16px) 0;
        text-align: center;
    }

    .text_with_items_and_diagram__arrow_line {
        width: 100%;
        height: 2px;
    }

    .text_with_items_and_diagram__arrow_line::before,
    .text_with_items_and_diagram__arrow_line::after {
        top: 50%;
        transform: translateY(-50%);
    }

    .text_with_items_and_diagram__arrow_line::before {
        left: 0;
        border-width: 6px 10px 6px 0;
        border-right-color: var(--twid-dark);
    }

    .text_with_items_and_diagram__arrow_line::after {
        right: 0;
        border-width: 6px 0 6px 10px;
        border-left-color: var(--twid-dark);
    }

    /* Tree: card 02 → horizontal bar → each support card.
       Card 02 sits in the center and the bar ends at the centers of the
       outer support cards, so every line is placed with calc() alone */
    .text_with_items_and_diagram__support {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--twid-support-gap);
        padding-top: var(--twid-tree);
    }

    .text_with_items_and_diagram__support::before,
    .text_with_items_and_diagram__support::after,
    .text_with_items_and_diagram__support_card::before {
        content: "";
        position: absolute;
        background-color: var(--twid-dark);
    }

    .text_with_items_and_diagram__support::before {
        top: calc(var(--twid-tree) / 2 - 1px);
        left: calc((100% - 2 * var(--twid-support-gap)) / 6 - 1px);
        right: calc((100% - 2 * var(--twid-support-gap)) / 6 - 1px);
        height: 2px;
    }

    .text_with_items_and_diagram__support::after {
        top: 0;
        left: calc(50% - 1px);
        width: 2px;
        height: calc(var(--twid-tree) / 2);
    }

    .text_with_items_and_diagram__support_card {
        position: relative;
    }

    .text_with_items_and_diagram__support_card::before {
        top: calc(var(--twid-tree) / -2);
        left: calc(50% - 1px);
        width: 2px;
        height: calc(var(--twid-tree) / 2);
    }
}

/* ===== Tablet / mobile: one column, support cards hang off card 02 on the left ===== */

@media (max-width: 1024px) {
    .text_with_items_and_diagram__diagram {
        --twid-branch: 12px;
        --twid-support-gap: clamp(12px, 28 * (100vw / 1920), 28px);
        grid-template-columns: 1fr;
        grid-template-areas:
            "input"
            "arrow-input"
            "engineer"
            "support"
            "arrow-output"
            "output";
    }

    .text_with_items_and_diagram__arrow {
        align-items: center;
        padding: 12px 0 12px 44px;
    }

    .text_with_items_and_diagram__arrow_line {
        width: 2px;
        height: 48px;
    }

    .text_with_items_and_diagram__arrow_line::before,
    .text_with_items_and_diagram__arrow_line::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .text_with_items_and_diagram__arrow_line::before {
        top: 0;
        border-width: 0 6px 10px;
        border-bottom-color: var(--twid-dark);
    }

    .text_with_items_and_diagram__arrow_line::after {
        bottom: 0;
        border-width: 10px 6px 0;
        border-top-color: var(--twid-dark);
    }

    /* Tree: each support card draws the vertical line along its full height
       (the last one only down to its middle), plus a short branch into its left edge */
    .text_with_items_and_diagram__support {
        display: grid;
        gap: var(--twid-support-gap);
        padding: var(--twid-branch) 0 0 calc(2 * var(--twid-branch));
    }

    .text_with_items_and_diagram__support_card {
        position: relative;
    }

    .text_with_items_and_diagram__support_card::before,
    .text_with_items_and_diagram__support_card::after {
        content: "";
        position: absolute;
        left: calc(-1 * var(--twid-branch));
        background-color: var(--twid-dark);
    }

    .text_with_items_and_diagram__support_card::before {
        top: calc(-1 * var(--twid-support-gap));
        width: 2px;
        height: calc(100% + var(--twid-support-gap));
    }

    .text_with_items_and_diagram__support_card:first-child::before {
        top: calc(-1 * var(--twid-branch));
        height: calc(100% + var(--twid-branch));
    }

    .text_with_items_and_diagram__support_card:last-child::before {
        height: calc(50% + var(--twid-support-gap) + 1px);
    }

    .text_with_items_and_diagram__support_card:first-child:last-child::before {
        height: calc(50% + var(--twid-branch) + 1px);
    }

    .text_with_items_and_diagram__support_card::after {
        top: calc(50% - 1px);
        width: var(--twid-branch);
        height: 2px;
    }
}

@media (max-width: 767px) {
    .text_with_items_and_diagram__items {
        grid-template-columns: 1fr;
    }
}