.services-output-rows {
    padding: 88px 50px;
    background: var(--white);
}

.services-output-rows--off-white {
    background: var(--off-white);
}


/* ==========================================================
   LAYOUT
   ========================================================== */

.services-output-rows__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}

.services-output-rows__intro {
    max-width: 340px;
}

.services-output-rows__heading {

    margin: 0;
    font-size: var(--font-size-4xl);
    line-height: 1.13;
    font-weight: var(--font-lightbold);
    letter-spacing: -0.02em;
    color: var(--color-black);
}

.services-output-rows__paragraph {
    margin: 24px 0 0;

    font-size: var(--font-size-lg);
    line-height: 1.6;

    color: var(--color-gray);
}


/* ==========================================================
   ROWS
   ========================================================== */

.services-output-rows__list {
    min-width: 0;
}

.services-output-rows__row {
    min-width: 0;
    padding: 34px 0;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    gap: 40px;
    align-items: center;
}

.services-output-rows__row:first-child {
    padding-top: 0;
}

.services-output-rows__row:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
}

.services-output-rows__content {
    min-width: 0;
}

.services-output-rows__title {
    margin: 0 0 10px;

    font-size: var(--font-size-xl);
    line-height: 1.3;
    font-weight: var(--font-lightbold);

    color: var(--color-black);
}

.services-output-rows__description {
    margin: 0;
    max-width: 460px;

    font-size: var(--font-size-lg);
    line-height: 1.6;

    color: var(--color-gray);
}


/* ==========================================================
   EXAMPLES
   ========================================================== */

.services-output-rows__examples {
    margin-top: 20px;

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
}

.services-output-rows__examples-label {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: .12em;
    text-transform: uppercase;

    color: var(--color-light-gray);
}

.services-output-rows__examples-list {
    min-width: 0;

    font-size: var(--font-size-lg);
    line-height: 1.5;

    color: var(--color-gray);
}

.services-output-rows__example:not(:last-child)::after {
    content: "\00b7";
    margin: 0 6px;
    color: var(--color-light-gray);
}


/* ==========================================================
   VISUAL COMMON
   ========================================================== */

.services-output-rows__visual {
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
}


/* ==========================================================
   TABLE VISUAL
   ========================================================== */

.services-output-rows__table-visual {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.services-output-rows__table-column {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.services-output-rows__table-column span {
    height: 7px;

    border-radius: 3px;

    background: var(--color-border);
}

.services-output-rows__table-column span.is-active {
    background: var(--green);
}


/* ==========================================================
   DOCUMENTS VISUAL
   ========================================================== */

.services-output-rows__documents-visual {
    position: relative;

    width: 100%;
    height: 76px;
}

.services-output-rows__document-back {
    position: absolute;
    top: 0;
    right: 0;

    width: 66%;
    height: 60px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--white);
}

.services-output-rows__document-front {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 72%;
    padding: 13px 14px;

    display: flex;
    flex-direction: column;
    gap: 7px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--white);
}

.services-output-rows__document-front i {
    display: block;
    height: 6px;

    border-radius: 3px;

    background: var(--color-border);
}

.services-output-rows__document-front i.is-active {
    background: var(--green);
}

.services-output-rows__document-front i:last-child {
    width: 62%;
}


/* ==========================================================
   CHART VISUAL
   ========================================================== */

.services-output-rows__chart-visual {
    width: 100%;
    height: 76px;

    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.services-output-rows__chart-visual span {
    flex: 1;
    min-width: 0;

    border-radius: 3px 3px 0 0;

    background: var(--color-border);
}

.services-output-rows__chart-visual span.is-active {
    background: var(--green);
}

.services-output-rows__chart-visual span:nth-child(1) { height: 34%; }
.services-output-rows__chart-visual span:nth-child(2) { height: 56%; }
.services-output-rows__chart-visual span:nth-child(3) { height: 46%; }
.services-output-rows__chart-visual span:nth-child(4) { height: 100%; }
.services-output-rows__chart-visual span:nth-child(5) { height: 72%; }
.services-output-rows__chart-visual span:nth-child(6) { height: 52%; }
.services-output-rows__chart-visual span:nth-child(7) { height: 40%; }


/* ==========================================================
   PLOT VISUALS — trend, crossover, fan
   ========================================================== */

.services-output-rows__plot {
    display: block;

    width: 100%;
    height: auto;

    overflow: visible;
}

.services-output-rows__plot-rule {
    stroke: var(--color-border);
    stroke-width: 1;
}

.services-output-rows__plot-line {
    fill: none;

    stroke: var(--color-border);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.services-output-rows__plot-line--accent {
    stroke: var(--green);
}

.services-output-rows__plot-dot {
    fill: var(--green);
}


/* ==========================================================
   STACK VISUAL
   ========================================================== */

.services-output-rows__stack-visual {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.services-output-rows__stack-bar {
    overflow: hidden;

    display: flex;
    height: 22px;

    border-radius: 4px;
}

.services-output-rows__stack-bar span {
    background: var(--color-border);
}

.services-output-rows__stack-bar span.is-active {
    background: var(--green);
}

.services-output-rows__stack-bar span + span {
    margin-left: 2px;
}

/* Margin (the green segment) widens as the cost segments narrow */
.services-output-rows__stack-bar:nth-child(1) span:nth-child(1) { width: 38%; }
.services-output-rows__stack-bar:nth-child(1) span:nth-child(2) { width: 30%; }
.services-output-rows__stack-bar:nth-child(1) span:nth-child(3) { width: 32%; }

.services-output-rows__stack-bar:nth-child(2) span:nth-child(1) { width: 30%; }
.services-output-rows__stack-bar:nth-child(2) span:nth-child(2) { width: 26%; }
.services-output-rows__stack-bar:nth-child(2) span:nth-child(3) { width: 44%; }


/* ==========================================================
   SLIDERS VISUAL
   ========================================================== */

.services-output-rows__sliders-visual {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 22px;
}

.services-output-rows__sliders-track {
    position: relative;

    display: block;
    height: 4px;

    border-radius: 2px;

    background: var(--color-border);
}

.services-output-rows__sliders-track i {
    position: absolute;
    top: 50%;

    width: 13px;
    height: 13px;

    border: 1.5px solid var(--color-light-gray);
    border-radius: 4px;

    background: var(--white);

    transform: translate(-50%, -50%);
}

.services-output-rows__sliders-track.is-active i {
    border-color: var(--green);
    background: var(--green);
}

/* The driver that matters is filled in to its knob */
.services-output-rows__sliders-track.is-active::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 62%;
    height: 100%;

    border-radius: 2px;

    background: var(--green);
}

.services-output-rows__sliders-track:nth-child(1) i { left: 28%; }
.services-output-rows__sliders-track:nth-child(2) i { left: 62%; }
.services-output-rows__sliders-track:nth-child(3) i { left: 44%; }


/* ==========================================================
   BRANCH VISUAL
   ========================================================== */

.services-output-rows__branch-visual {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 48px;
}

.services-output-rows__branch-source {
    flex: 0 0 38px;
    height: 20px;

    border: 1px solid var(--color-border);
    border-radius: 4px;

    background: var(--white);
}

.services-output-rows__branch-targets {
    position: relative;
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.services-output-rows__branch-target {
    position: relative;

    height: 20px;

    border: 1px solid var(--color-border);
    border-radius: 4px;

    background: var(--white);
}

/* Horizontal connector running from the spine into each target */
.services-output-rows__branch-target::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 100%;

    width: 24px;
    height: 1.5px;

    background: var(--green);

    transform: translateY(-50%);
}

/* Vertical spine, centred in the gap and joined back to the source by its own connector */
.services-output-rows__branch-spine {
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: -24px;

    width: 1.5px;

    background: var(--green);
}

.services-output-rows__branch-spine::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 100%;

    width: 24px;
    height: 1.5px;

    background: var(--green);

    transform: translateY(-50%);
}


/* ==========================================================
   PLATFORM VISUAL
   ========================================================== */

.services-output-rows__platform-visual {
    width: 100%;
}

.services-output-rows__platform-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.services-output-rows__platform-row span {
    height: 30px;

    border: 1px solid var(--color-border);
    border-radius: 4px;

    background: var(--white);
}

.services-output-rows__platform-base {
    display: block;
    height: 16px;
    margin-top: 8px;

    border: 1.5px solid var(--green);
    border-radius: 5px;

    background: var(--light-dim-green);
}


/* ==========================================================
   MERGE VISUAL
   ========================================================== */

.services-output-rows__merge-visual {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 48px;
}

.services-output-rows__merge-sources {
    position: relative;
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.services-output-rows__merge-source {
    position: relative;

    height: 20px;

    border: 1px solid var(--color-border);
    border-radius: 4px;

    background: var(--white);
}

/* Horizontal connector running from each source out to the spine */
.services-output-rows__merge-source::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 100%;

    width: 24px;
    height: 1.5px;

    background: var(--green);

    transform: translateY(-50%);
}

/* Vertical spine, centred in the gap and joined on to the target by its own connector */
.services-output-rows__merge-spine {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: -24px;

    width: 1.5px;

    background: var(--green);
}

.services-output-rows__merge-spine::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 100%;

    width: 24px;
    height: 1.5px;

    background: var(--green);

    transform: translateY(-50%);
}

.services-output-rows__merge-target {
    flex: 0 0 38px;
    height: 20px;

    border: 1.5px solid var(--green);
    border-radius: 4px;

    background: var(--light-dim-green);
}


/* ==========================================================
   RULES VISUAL
   ========================================================== */

.services-output-rows__rules-visual {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;
}

.services-output-rows__rules-visual i {
    display: block;
    height: 7px;

    border-radius: 3px;

    background: var(--color-border);
}

.services-output-rows__rules-visual i:nth-child(1) {
    width: 100%;
}

.services-output-rows__rules-visual i:nth-child(2) {
    width: 78%;
}

.services-output-rows__rules-visual i:nth-child(3) {
    width: 60%;
}

/* The computed result, ruled off from the inputs above it */
.services-output-rows__rules-result {
    position: relative;

    width: 46%;
    height: 7px;
    margin-top: 13px;

    border-radius: 3px;

    background: var(--green);
}

.services-output-rows__rules-result::before {
    content: "";

    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);

    width: 100%;
    height: 1px;

    background: var(--color-border);
}


/* ==========================================================
   LAYOUT VISUAL
   ========================================================== */

.services-output-rows__layout-visual {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.services-output-rows__layout-header {
    display: block;
    height: 8px;

    border-radius: 3px;

    background: var(--green);
}

.services-output-rows__layout-body {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 8px;
}

.services-output-rows__layout-body span {
    height: 34px;

    border: 1px solid var(--color-border);
    border-radius: 4px;

    background: var(--white);
}

.services-output-rows__layout-footer {
    display: block;
    width: 58%;
    height: 8px;

    border-radius: 3px;

    background: var(--color-border);
}


/* ==========================================================
   UNITS VISUAL
   ========================================================== */

.services-output-rows__units-visual {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.services-output-rows__units-visual span {
    height: 26px;

    border: 1px solid var(--color-border);
    border-radius: 4px;

    background: var(--white);
}

.services-output-rows__units-visual span.is-active {
    border-color: var(--green);
    background: var(--light-dim-green);
}


/* ==========================================================
   SYNC VISUAL
   ========================================================== */

.services-output-rows__sync-visual {
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.services-output-rows__sync-row {
    display: grid;
    grid-template-columns: 1fr 32px 1fr;
    align-items: center;
}

.services-output-rows__sync-row span {
    height: 16px;

    border: 1px solid var(--color-border);
    border-radius: 4px;

    background: var(--white);
}

.services-output-rows__sync-row i {
    display: block;
    height: 1.5px;

    background: var(--green);
}


/* ==========================================================
   CHAIN VISUAL
   ========================================================== */

.services-output-rows__chain-visual {
    width: 100%;

    display: flex;
    align-items: center;
}

.services-output-rows__chain-visual span {
    flex: 1;
    min-width: 0;
    height: 20px;

    border: 1px solid var(--color-border);
    border-radius: 4px;

    background: var(--white);
}

.services-output-rows__chain-visual i {
    display: block;
    flex: 0 0 18px;
    height: 1.5px;

    background: var(--green);
}


/* ==========================================================
   SPARK VISUAL
   ========================================================== */

.services-output-rows__spark-visual {
    position: relative;

    width: 100%;
    padding-top: 8px;
    padding-right: 8px;
}

.services-output-rows__spark-panel {
    padding: 16px 16px 18px;

    display: flex;
    flex-direction: column;
    gap: 9px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    background: var(--white);
}

.services-output-rows__spark-panel i {
    display: block;
    height: 6px;

    border-radius: 3px;

    background: var(--color-border);
}

.services-output-rows__spark-panel i.is-active {
    background: var(--green);
}

.services-output-rows__spark-panel i:last-child {
    width: 58%;
}

.services-output-rows__spark-mark {
    position: absolute;
    top: 0;
    right: 0;

    width: 18px;
    height: 18px;

    border-radius: 3px;

    background: var(--green);

    transform: rotate(45deg);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1200px) {

    .services-output-rows__inner {
        grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
        gap: 48px;
    }

    .services-output-rows__intro {
        max-width: 280px;
    }

    .services-output-rows__heading {
        font-size: 34px;
    }
}


@media (max-width: 900px) {
    .services-output-rows__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .services-output-rows__intro {
        max-width: 620px;
    }
}


@media (max-width: 768px) {
    .services-output-rows {
        padding: 50px 24px;
    }

    .services-output-rows__heading {
        font-size: 30px;
    }

    .services-output-rows__row {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 0;
    }

    .services-output-rows__description {
        max-width: none;
    }

    .services-output-rows__visual {
        height: auto;
        justify-content: flex-start;
    }

    .services-output-rows__table-visual,
    .services-output-rows__documents-visual,
    .services-output-rows__chart-visual,
    .services-output-rows__branch-visual,
    .services-output-rows__units-visual,
    .services-output-rows__sync-visual,
    .services-output-rows__chain-visual,
    .services-output-rows__spark-visual,
    .services-output-rows__platform-visual,
    .services-output-rows__merge-visual,
    .services-output-rows__rules-visual,
    .services-output-rows__layout-visual,
    .services-output-rows__stack-visual,
    .services-output-rows__sliders-visual,
    .services-output-rows__plot {
        max-width: 220px;
    }
}