/*
 * CSP public-sector family — cross-links to the sibling Computer Systems Plus
 * products, mirroring the block in the sentra311.com footer. Shared by both
 * marketing footers (.sc-footer from chrome.css and the older inline .footer),
 * which define the same palette variables; fallbacks cover any page that doesn't.
 */
.csp-family {
    padding: 32px 0;
    border-bottom: 1px solid var(--slate-500, #3E4A66);
}
.csp-family-label {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px; letter-spacing: 0.12em;
    color: var(--slate-300, #A6B0C5);
    margin: 0 0 16px;
}
.csp-family-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 24px;
}
.csp-family-list a {
    display: block; height: 100%;
    padding: 4px 0 4px 12px;
    border-left: 2px solid var(--navy-line, #1A2C4A);
    text-decoration: none;
}
.csp-family-list strong {
    display: block;
    font-size: 14px; font-weight: 600;
    color: var(--slate-100, #E6EAF2);
}
.csp-family-list span {
    display: block;
    font-size: 13px; line-height: 1.45;
    color: var(--slate-300, #A6B0C5);
}
.csp-family-list a:hover strong,
.csp-family-list a:focus-visible strong { color: var(--paper, #FAFBFD); text-decoration: underline; }
.csp-family-list a:focus-visible { outline: 2px solid var(--teal-light, #7BD0C9); outline-offset: 2px; }
.csp-family-list a.is-here { border-left-color: var(--teal-light, #7BD0C9); }

@media (max-width: 1100px) {
    .csp-family-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .csp-family-list { grid-template-columns: 1fr; }
}