.page-database-devops-value-journey {
    counter-reset: split-section;
}

.counter-split-section {
    padding-block: var(--section-padding);
    background-color: var(--color-ink-50);
    counter-increment: split-section;
}

.counter-split-section .automation-title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-xm);
    margin-bottom: var(--space-sl);
}

.counter-split-section .step-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-xl);
    height: var(--space-xl);
    border-radius: 50%;
    padding: var(--space-xss);
    background-color: var(--color-signal-500);
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: var(--font-weight-bold);
    flex-shrink: 0;
    line-height: 1;
}

.counter-split-section .step-badge::before {
    content: counter(split-section);
}

.counter-split-section p {
    font-size: var(--font-size-body-lg);
    line-height: var(--line-height-prose);
    color: var(--color-slate-700);
}

.counter-split-section .automation-header-text p:not(:last-child) {
    margin-bottom: var(--space-xm);

}

.counter-split-section .automation-grid {
    display: grid;
    gap: 52px;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
}

.counter-split-section.content-right-media-left .automation-grid {
    grid-template-columns: repeat(2, 1fr);
}

.counter-split-section.content-right-media-left .automation-left-column {
    order: 2;
}

.counter-split-section.content-right-media-left .automation-right-column {
    order: 1;
}

.counter-split-section .automation-left-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-xm);
}

.counter-split-section .automation-left-content {
    border-left: 3px solid var(--color-signal-500);
    padding-left: var(--space-smm);
}

.counter-split-section .automation-left-content .h3 {
    margin-bottom: var(--space-xxl);
}

.counter-split-section .automation-left-content .h3:not(:first-child) {
    margin-top: var(--space-xxl);
}

.counter-split-section .automation-actions {
    display: flex;
    gap: var(--space-xxl);
    flex-wrap: wrap;
}

.counter-split-section .btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--button-height-md);
    padding: 0 var(--space-lg);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

/* Right Card Styles */
.counter-split-section .comparison-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: 22px var(--space-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
}

.counter-split-section .card-header .h4 {
    font-size: var(--font-size-subline);
    color: var(--color-ink-900);
    line-height: 1.22;
    letter-spacing: 0;
    font-weight: var(--font-weight-semibold);
    margin: 0 0 4px 0;
}

.counter-split-section .card-subtitle {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    line-height: 1.2727;
    letter-spacing: 1.1px;
    color: var(--color-slate-500);
    text-transform: uppercase;
    margin-bottom: var(--space-sl);
    font-weight: var(--font-weight-medium);
}

.counter-split-section .chart-row {
    margin-bottom: var(--space-smm);
}

.counter-split-section .chart-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}

.counter-split-section .label-title {
    font-size: var(--font-size-meta);
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink-900);
    line-height: 1.2857;
}

.counter-split-section .label-status {
    font-family: var(--font-mono);
    font-size: var(--font-size-caption);
    text-transform: lowercase;
    line-height: 1.333;
}

.counter-split-section .chart-bar-container {
    width: 100%;
    height: var(--space-xxl);
    background-color: var(--color-border);
    border-radius: 7px;
    overflow: hidden;
}

.counter-split-section .chart-bar {
    height: 100%;
    border-radius: 6px;
}

.counter-split-section .card-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: 25px 0 20px 0;
}

.counter-split-section .stat-huge {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: var(--font-weight-bold);
    color: #037D70;
    line-height: 1;
    margin-bottom: var(--space-xss);
}

.counter-split-section .stat-label-bottom {
    font-size: var(--font-size-eyebrow);
    line-height: 1.35;
    color: var(--color-slate-500);
}

.counter-split-section.is-dark .h2,
.counter-split-section.is-dark p,
.counter-split-section.is-dark .h3 {
    color: var(--color-white);
}

.counter-split-section.is-dark .button-blue {
    background-color: var(--color-white);
    color: var(--color-teal-950);
}

.counter-split-section.is-dark .button-blue:hover {
    background-color: var(--color-ink-200);
}

@media (max-width:1199px) {
    .counter-split-section .automation-grid {
        gap: 40px;
    }
}

@media (max-width: 991px) {
    .counter-split-section .automation-grid {
        gap: 30px;
        grid-template-columns: 1fr !important;
    }

    .counter-split-section .automation-header-text {
        padding-left: 0;
    }

    .counter-split-section .automation-actions {
        padding-left: 0;
        flex-wrap: wrap;
    }

    .counter-split-section .step-badge {
        font-size: 20px;
    }
}

.counter-split-section .automation-grid .metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xm);
}

.counter-split-section .automation-grid .metrics-grid .metric-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    padding: calc(var(--space-sl) - 1px) var(--space-smm);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}

.counter-split-section .automation-grid .metrics-grid .metric-card .metric-subtitle {
    font-family: var(--font-mono);
    font-size: var(--font-size-micro);
    letter-spacing: 1.32px;
    color: var(--color-slate-500);
    line-height: 1.2727;
    text-transform: uppercase;
    margin-bottom: var(--space-xxm);
    font-weight: var(--font-weight-medium);
}

.counter-split-section .automation-grid .metrics-grid .metric-card .metric-number {
    font-family: var(--font-display);
    font-size: var(--font-size-h2-sm);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.64px;
    color: var(--color-ink-900);
    margin-bottom: var(--space-xss);
}

.counter-split-section .automation-grid .metrics-grid .metric-card .metric-desc {
    font-size: var(--font-size-body-xs);
    color: var(--color-slate-500);
    line-height: 1.3;
}

.text-navy {
    color: var(--color-teal-950);
}

.text-teal {
    color: var(--color-signal-700);
}

.counter-split-section .automation-grid .metrics-grid .metric-card .metric-number.text-teal {
    color: #037D70;
}

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