/* Additional Payroll features use the existing landing-page colors and type. */
.pr-capabilities {
    background: #fff;
}

.pr-cap-section {
    padding: 88px 24px;
    background: #fff;
}

.pr-cap-section.pr-cap-tinted {
    background: #eaf6f0;
}

.pr-cap-container {
    max-width: 1240px;
    margin: 0 auto;
}

.pr-cap-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.pr-cap-reversed .pr-cap-copy { order: 2; }
.pr-cap-reversed .pr-cap-screen-frame { order: 1; }

.pr-cap-copy {
    min-width: 0;
    max-width: 510px;
}

.pr-cap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    background: #f0fdf4;
    color: #166534;
    font: 700 .76rem 'Plus Jakarta Sans', sans-serif;
    letter-spacing: .02em;
}

.pr-cap-eyebrow::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10b981;
}

.pr-cap-copy h2 {
    margin: 20px 0 18px;
    color: #0f172a;
    font: 800 clamp(2rem, 3.4vw, 3.15rem)/1.14 'Outfit', sans-serif;
    letter-spacing: -.03em;
}

.pr-cap-copy p {
    margin: 0;
    color: #475569;
    font: 400 1rem/1.75 'Plus Jakarta Sans', sans-serif;
}

.pr-cap-points {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.pr-cap-points li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #0b2b20;
    font: 600 .87rem/1.5 'Plus Jakarta Sans', sans-serif;
}

.pr-cap-points li::before {
    content: '✓';
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #d1fae5;
    color: #047857;
    font-size: .73rem;
    line-height: 19px;
    text-align: center;
}

/* The original screenshots remain intact and fully visible in a single frame. */
.pr-cap-screen-frame {
    min-width: 0;
    padding: 23px;
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: 24px;
    background: #e8f6ee;
    box-shadow: 0 25px 70px -25px rgba(16, 185, 129, .2), 0 10px 30px rgba(15, 23, 42, .05);
}

.pr-cap-screen {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #dce6e2;
    border-radius: 12px;
    background: #fff;
}

.pr-cap-screen-link {
    display: block;
    color: #166534;
    text-decoration: none;
}

.pr-cap-screen-link > span {
    display: block;
    padding-top: 11px;
    font: 700 .72rem 'Plus Jakarta Sans', sans-serif;
    text-align: right;
}

.pr-cap-screen-link:hover > span,
.pr-cap-screen-link:focus-visible > span {
    text-decoration: underline;
}

.pr-cap-screen-link:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 4px;
    border-radius: 12px;
}

/* Use the supplied Payroll run capture in the existing processing showcase. */
.pr-proc-real-screen {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(16, 185, 129, .2);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 45px -10px rgba(11, 43, 32, .12);
}

.pr-proc-real-screen-link > span { padding-right: 4px; }

.pr-proc-has-real-screen .pr-proc-dashboard-card,
.pr-proc-has-real-screen .pr-proc-float-growth,
.pr-proc-has-real-screen .pr-proc-float-doodle {
    display: none;
}

@media (max-width: 900px) {
    .pr-cap-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .pr-cap-reversed .pr-cap-copy,
    .pr-cap-reversed .pr-cap-screen-frame {
        order: initial;
    }

    .pr-cap-copy,
    .pr-cap-screen-frame {
        max-width: 680px;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .pr-cap-section { padding: 64px 20px; }
    .pr-cap-screen-frame { padding: 14px; border-radius: 18px; }
    .pr-cap-screen { border-radius: 8px; }
}