/* About page — team grid only.
   Everything else on /about.html reuses the features-page component classes
   (ft-*), which are already tested in light and cozy mode. Keeping the new
   surface this small is deliberate: a page that invents its own visual system
   is a page that regresses in cozy mode without anyone noticing.

   Colours come from theme tokens with sensible fallbacks — never hardcoded —
   because hardcoded backgrounds are exactly how dashboard surfaces ended up
   dark-on-dark in earlier cozy-mode audits. */

.ab-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.ab-person {
    /* minmax(0, …) above plus this guards the long-certification lines from
       forcing horizontal overflow on narrow screens. */
    min-width: 0;
    padding: 1.1rem 1.2rem;
    border-radius: 0.85rem;
    background: var(--surface-subtle, rgba(127, 127, 127, 0.08));
    border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.2));
}

.ab-person > p {
    margin: 0 0 0.7rem 0;
}

.ab-person > p:last-child {
    margin-bottom: 0;
}

.ab-person-name {
    margin: 0 0 0.15rem 0;
    font-size: 1.08rem;
    line-height: 1.3;
    color: var(--text-primary, inherit);
}

.ab-person-role {
    margin: 0 0 0.75rem 0;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--accent, #6b46c1);
}

@media (prefers-reduced-motion: no-preference) {
    .ab-person {
        transition: border-color 0.2s ease;
    }
}

.ab-person:hover {
    border-color: var(--border-strong, rgba(127, 127, 127, 0.35));
}