/* Shared "Read our expert guide" cards, for pages that don't load svx.css. Same rules as svx.css. */
.sx-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: center; gap: 18px; margin-top: 40px; }
.sx-related a { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 16px; background: var(--navy); color: #fff; overflow: hidden; transition: transform .3s var(--ease); }
.sx-related a::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(148,212,244,.25), transparent 70%); transition: transform .5s var(--ease); }
.sx-related a:hover { transform: translateY(-4px); }
.sx-related a:hover::after { transform: scale(1.5); }
.sx-related small { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.sx-related b { font-size: 18px; line-height: 1.35; }
.sx-related p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; }
.sx-related span { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.sx-related span svg { width: 14px; height: 14px; }
@media (max-width: 760px) { .sx-related { grid-template-columns: 1fr; } }

/* Threat Watch radar: labels near the right edge sit to the left of their dot so they aren't clipped. */
.tw-blip.flip em { left: auto; right: 10px; }