/* ==========================================================================
   spark.css — "Spark teal": a brighter, luminous member of the brand teal
   family. Carries ENERGY and LIVE/AI signals only — interactive, focus, and
   live-status moments. It NEVER replaces brand teal (--accent) in body text or
   solid fills, so brand equity is untouched.

   Link this LAST (after landing.css and any page component CSS) so its
   :hover / :focus-visible / .open rules win at equal specificity.
   ========================================================================== */
:root {
  --spark: oklch(0.72 0.13 190);            /* luminous "live" teal */
  --spark-ink: oklch(0.52 0.12 192);        /* legible on light paper */
  --spark-glow: oklch(0.72 0.13 190 / 0.34);
  --spark-tint: oklch(0.72 0.13 190 / 0.12);
}

/* ── Focus — modern, luminous, accessible. ── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.faq-q:focus-visible,
.nav-trigger:focus-visible {
  outline: 2px solid var(--spark);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--spark-glow);
  border-radius: 8px;
}

/* ── Primary actions — brand teal at rest, light up on hover. ── */
.btn-primary { transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .2s ease; }
.btn-primary:hover {
  border-color: var(--spark);
  box-shadow: 0 10px 26px -12px var(--spark-glow), inset 0 0 0 1px var(--spark);
}
.btn-onink { transition: box-shadow .2s ease, transform .15s ease, background .15s ease; }
.btn-onink:hover { box-shadow: 0 12px 30px -10px var(--spark-glow), 0 0 0 1px var(--spark); }

/* ── FAQ — the most common interactive surface across pages. ── */
.faq-q:hover { color: var(--spark-ink); }
.faq-q:hover .chev { border-color: var(--spark); color: var(--spark-ink); background: var(--spark-tint); }
.faq-item.open .faq-q { color: var(--spark-ink); }
.faq-item.open .faq-q .chev {
  background: var(--spark); border-color: var(--spark); color: #04201f;
  box-shadow: 0 0 0 5px var(--spark-glow);
}

/* ── Hero live-status toast (broker hero; rules are harmless where absent).
   Scoped under .bh so it beats the inline #broker-hero block regardless of
   stylesheet/inline source order. ── */
.bh .bh-toast-ic { position: relative; background: var(--spark-tint); color: var(--spark-ink); }
.bh-live {
  position: absolute; top: -3px; right: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--spark); border: 2px solid rgba(248,247,242,0.96);
}
@media (prefers-reduced-motion: no-preference) {
  .bh-live::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--spark);
    animation: sparkPulse 2.2s ease-out infinite;
  }
  @keyframes sparkPulse {
    0%   { transform: scale(1);   opacity: 0.55; }
    70%  { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
  }
}