/* ============================================================
   PAGE: security — uses the shared .appx-* design system
   (defined in mani-globals-ltr.css). No custom cards, no custom
   colors: hero, grid, cards, spacing and CTA all inherit.
   Accent = brand blue. Only addition: a hover affordance for the
   document cards, which are links rather than plain cards.
   ============================================================ */
/* Blue, like every page except automation — automation is green because it IS
   WhatsApp. Nothing on this page is WhatsApp, so green read as a borrowed brand
   colour and clashed with the rest of the site. */
.pg-security { --app-accent: var(--blue); }

.pg-security .sec-doc {
    transition: border-color .18s ease, transform .18s ease;
}

.pg-security .sec-doc:hover {
    border-color: color-mix(in srgb, var(--blue) 40%, var(--mist));
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .pg-security .sec-doc { transition: none; }
    .pg-security .sec-doc:hover { transform: none; }
}