/* Security-cluster skin, usefulHQ design language, "trust/secure" emerald accent.
   Same fonts as the tools hub (one brand), different accent so it's its own section. */
:root{
  --bg:#eef2ef; --card:#ffffff; --ink:#14181a; --mut:#586460;
  --acc:#0f9d6b; --acc2:#3a86ff; --line:#dde4e0;
  --best:rgba(15,157,107,.12); --good:#0f9d6b; --yes:#0f9d6b;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#101613; --card:#18211d; --ink:#eef3ef; --mut:#9aa8a1;
  --acc:#34d399; --acc2:#7cc4ff; --line:#22302a;
  --best:rgba(52,211,153,.14); --good:#34d399; --yes:#34d399;
}}
body{font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  background-image:radial-gradient(rgba(90,120,105,.16) .5px,transparent .5px);background-size:22px 22px}
h1,h2,h3,.brand{font-family:'Bricolage Grotesque',system-ui,sans-serif !important;letter-spacing:-.02em}
h1{font-weight:800 !important}
.adslot{display:none !important}
.tnav{padding:14px 0 4px;text-align:center}
.tnav a{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;
  color:var(--ink);text-decoration:none;background:var(--card);border:2.5px solid var(--ink);border-radius:999px;
  padding:6px 14px;box-shadow:3px 3px 0 var(--ink)}
.tnav a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}