/* ==========================================================================
   PLAN ADMINISTRATION & COMPLIANCE   body.page-plan-administration-compliance
   ==========================================================================
   The hero's second row: capability chips (left) | "what reaches you" cards
   (right), a hairline between them and a rule under both (inset pseudo-
   elements: the row carries the gutter, so a border would overshoot).
   ========================================================================== */

body.page-plan-administration-compliance {
    .hero__frame { --hero-frame-max: 72.2%; }

    #hero .mod_article > .row {
        position: relative;
        align-items: start;
        padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
        padding-bottom: clamp(1.75rem, 3vw, 2.75rem);
        &::after {
            content: "";
            position: absolute;
            left: var(--page-gutter);
            right: var(--page-gutter);
            bottom: 0;
            height: 0;
            border-top: 1px solid var(--hairline);
            pointer-events: none;
        }
        > *:nth-child(2) {
            border-left: 1px solid var(--hairline);
            padding-left: clamp(1.75rem, 3.5vw, 3.5rem);
        }
    }

    /* 12px uppercase labels: navy, the right column's in brand blue */
    .pa-label {
        margin: 0 0 clamp(1rem, 1.6vw, 1.4rem);
        font-family: var(--type-body);
        font-weight: 600;
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--heading);
    }
    .pa-label--prime { color: var(--prime); }
    .pa-note {
        margin: clamp(0.75rem, 1.4vw, 1.1rem) 0 0;
        font-size: 0.8125rem;
        color: var(--text-muted);
    }
    .pa-foot {
        margin: clamp(1rem, 1.8vw, 1.4rem) 0 0;
        font-family: var(--type-display);
        font-size: clamp(0.95rem, 1.1vw, 0.9375rem);
        color: #11161b;
    }
}
/* Stacks at 1200, not 992 (the board splits it 58.9 / 36.7), and the divider
   goes with it */
@media only screen and (max-width: 1200px) {
    body.page-plan-administration-compliance #hero .mod_article > .row {
        > * { flex: 0 0 100%; }
        > *:nth-child(2) { border-left: 0; padding-left: 0; padding-top: 1.75rem; }
    }
}