/* 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:#e11d48; --acc2:#3a86ff; --line:#dde4e0;
  --best:rgba(225,29,72,.12); --good:#e11d48; --yes:#16a34a;
}
@media(prefers-color-scheme:dark){:root{
  --bg:#101613; --card:#18211d; --ink:#eef3ef; --mut:#9aa8a1;
  --acc:#fb7185; --acc2:#7cc4ff; --line:#22302a;
  --best:rgba(251,113,133,.16); --good:#fb7185; --yes:#4ade80;
}}
body{font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif !important;
  background-image:radial-gradient(rgba(150,90,90,.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)}

/* Tap targets on phones. Measured at 375px: the model links inside the price tables were 22 to
   24px tall, which is half the 44px a thumb needs, and they are the step between reading the
   table and opening the listings. Scoped to table cells and the model chips: prose links stay
   inline, because a 44px box around a word in a sentence tears the paragraph apart. */
@media (max-width: 640px) {
  table td a, table th a { display: block; padding: 11px 2px; min-height: 22px; }
  #models button, #models a, .chip { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .vtab td a, .vtab .vlink { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}