/* Custom components that complement Tailwind utilities. */

/* ---- Callouts (used inside article prose) ---- */
.callout{
  border-left:3px solid #4f46e5;
  background:#eef2ff;
  padding:16px 20px;
  border-radius:0 12px 12px 0;
  margin:1.5rem 0;
}
.callout .tag{
  font-family:"JetBrains Mono",monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:#4f46e5;font-weight:600;display:block;margin-bottom:4px;
}
.callout p{margin:0;color:#334155;font-size:.95rem;line-height:1.6}
.callout.warn{border-left-color:#e11d48;background:#fff1f2}
.callout.warn .tag{color:#e11d48}
.prose .callout p{margin:0}

/* ---- Hero telemetry animation ---- */
@keyframes trace{from{transform:translateX(0)}to{transform:translateX(-300px)}}
.tm-scroll{animation:trace 6s linear infinite}
@media (prefers-reduced-motion: reduce){ .tm-scroll{animation:none} }

/* Inline links inside non-prose blocks (guide steps, FAQ answers) */
.rich a{color:#4f46e5;font-weight:500}
.rich a:hover{text-decoration:underline}
.rich strong{color:#0f172a;font-weight:600}