/* /signals hero (Oct 20 W2 anims B; Krish O20-039..042; Oct 26 PM W3, Amar C7 "We need people"; Oct 27 AK: stream signals): four signals,
   accounts, a person and a stream (Walmart intent, Dana Whitfield role change, JPMorgan Chase news, JPMorgan Chase Jobs stream). Each sits in
   the feed, takes a gold ring in its turn, a gold arrow carries it to where it lands (account report, people profile, or your CRM by webhook),
   and that glows with the new line. One area moves at a time, left to right.
   Markup: anim-signals.ejs. Storyboard: anim/signals.js (run.js HAI.seq, classes f1/l1/r1 .. f4/l4/r4).
   SIZE RULE (AK Oct 27): four rows fit the SAME box as the earlier version: canvas 576 x 340 on desktop and 284 x 412 on phones (the live
   size before this change), so the hero is never taller. The rows are tighter (58px cards, 7px gaps) and the unused bottom inset is gone.
   Phones: each signal card with a slim "where it lands" strip under it and a small bent arrow at its left. Text stays 11-12px+.
   Brand tokens only (.hxa vars). Motion: opacity, transform and stroke-dashoffset, 280-760 ms.
   Rollback: 04-build/backups/oct27-kairos-signals/public/v2/product-pages/anim/signals.css. */
.hxa[data-page="signals"] .hxa-stage { aspect-ratio: 576 / 340; }
.hxa[data-page="signals"] .hxa-stage > .canvas { width: 576px; height: 340px; }
[data-page="signals"] .canvas { color: var(--ink); font-family: var(--f-body); transition: opacity 240ms ease; }
[data-page="signals"] .canvas.out { opacity: 0; }
[data-page="signals"] .canvas.rs, [data-page="signals"] .canvas.rs * { transition: none !important; }
[data-page="signals"] .sg :where(p) { margin: 0; }
[data-page="signals"] .sg :where(i, em) { font-style: normal; }
[data-page="signals"] .sg-i { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

[data-page="signals"] .sg { position: absolute; inset: 8px; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 16px; overflow: hidden; background: var(--white); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--lav), var(--sh-sm); }
[data-page="signals"] .sg-hd { display: grid; grid-template-columns: auto minmax(0, 1fr) 240px; align-items: center; column-gap: 10px; }
[data-page="signals"] .sg-hd b { font: 700 16px/20px var(--f-display); white-space: nowrap; }
[data-page="signals"] .sg-hd .sg-hd2 { padding-right: 40px; font-size: 14px; }

/* A row: the signal (left), the arrow, where it lands (right). Every card is always there (never an empty slot);
   a signal takes the gold ring when it is its turn (f), the arrow draws (l), the report glows (r). Earlier rows stay glowing. */
[data-page="signals"] .sg-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px 240px; align-items: center; }
[data-page="signals"] .sg-c { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 12px; height: 58px; padding: 0 12px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav); transition: box-shadow 360ms ease; }
[data-page="signals"] .f1 .sg-row--1 .sg-c, [data-page="signals"] .f2 .sg-row--2 .sg-c, [data-page="signals"] .f3 .sg-row--3 .sg-c, [data-page="signals"] .f4 .sg-row--4 .sg-c { box-shadow: inset 0 0 0 1.5px var(--gold), var(--sh-md); }
/* once its report is updated, the signal settles (the gold ring passes to the report) */
[data-page="signals"] .r1 .sg-row--1 .sg-c, [data-page="signals"] .r2 .sg-row--2 .sg-c, [data-page="signals"] .r3 .sg-row--3 .sg-c, [data-page="signals"] .r4 .sg-row--4 .sg-c { box-shadow: inset 0 0 0 1px var(--lav); }
[data-page="signals"] .sg-ti { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--ink); }
[data-page="signals"] .sg-ti--intent { background: var(--gold); }
[data-page="signals"] .sg-ti--news { background: var(--ink); color: var(--gold); }
[data-page="signals"] .sg-ti--people { background: var(--violet); color: var(--white); }
[data-page="signals"] .sg-ti--jobs { background: var(--lav); color: var(--ink); }
[data-page="signals"] .sg-tx { display: grid; gap: 0; min-width: 0; }
[data-page="signals"] .sg-co { display: inline-flex; align-items: center; gap: 5px; font: 700 13px/15px var(--f-body); white-space: nowrap; }
[data-page="signals"] .sg-co img { width: 14px; height: 14px; }
[data-page="signals"] .sg-co img.is-wide { width: 70px; height: 10px; }
[data-page="signals"] .sg-tx b { font: 700 15px/19px var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-page="signals"] .sg-meta { display: flex; align-items: center; gap: 6px; font: 600 12px/15px var(--f-body); color: var(--slate); white-space: nowrap; }
[data-page="signals"] .sg-meta em { padding: 0 7px; border-radius: 999px; background: var(--lav); font-weight: 800; color: var(--ink); }

/* The arrow: drawn in gold, with a soft glow, from the signal to where it lands */
[data-page="signals"] .sg-ln { display: block; overflow: visible; }
[data-page="signals"] .sg-ln--h { width: 32px; height: 20px; }
[data-page="signals"] .sg-ln--v { display: none; }
[data-page="signals"] .sg-ln path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
[data-page="signals"] .sg-ln .base { stroke: var(--lav); stroke-width: 2; stroke-dasharray: 3 4; }
[data-page="signals"] .sg-ln .lit { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 100 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgba(255, 198, 30, .9)); transition: stroke-dashoffset 760ms var(--ease-io); }
[data-page="signals"] .sg-ln .hd { stroke: var(--lav); stroke-width: 2; transition: stroke 200ms ease 600ms; }
[data-page="signals"] .l1 .sg-row--1 .lit, [data-page="signals"] .l2 .sg-row--2 .lit, [data-page="signals"] .l3 .sg-row--3 .lit, [data-page="signals"] .l4 .sg-row--4 .lit { stroke-dashoffset: 0; }
[data-page="signals"] .l1 .sg-row--1 .hd, [data-page="signals"] .l2 .sg-row--2 .hd, [data-page="signals"] .l3 .sg-row--3 .hd, [data-page="signals"] .l4 .sg-row--4 .hd { stroke: var(--gold); stroke-width: 3; }

/* Where it lands (account report, people profile, your CRM): glows, and the new line replaces "Up to date" */
[data-page="signals"] .sg-r { display: grid; gap: 3px; padding: 8px 10px; border-radius: 14px; background: var(--white); box-shadow: inset 0 0 0 1px var(--lav); transition: box-shadow 420ms ease; }
[data-page="signals"] .r1 .sg-row--1 .sg-r, [data-page="signals"] .r2 .sg-row--2 .sg-r, [data-page="signals"] .r3 .sg-row--3 .sg-r, [data-page="signals"] .r4 .sg-row--4 .sg-r { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 5px rgba(255, 198, 30, .18), var(--sh-md); }
[data-page="signals"] .sg-rn { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
[data-page="signals"] .sg-rn b { display: inline-flex; align-items: center; gap: 6px; min-height: 18px; min-width: 0; overflow: hidden; font: 700 14px/18px var(--f-display); white-space: nowrap; }
[data-page="signals"] .sg-rn b img { width: 16px; height: 16px; flex: none; }
[data-page="signals"] .sg-rn b img.is-wide { width: 84px; height: 12px; }
[data-page="signals"] .sg-rn em { flex: none; padding: 0 7px; border-radius: 999px; background: var(--lav); font: 800 12px/16px var(--f-body); color: var(--ink); white-space: nowrap; }
[data-page="signals"] .sg-av { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--violet); color: var(--white); font: 800 9px/1 var(--f-body); letter-spacing: .02em; }
[data-page="signals"] .sg-rs { display: grid; font: 700 12px/16px var(--f-body); color: var(--slate); }
[data-page="signals"] .sg-rs > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 280ms ease; }
[data-page="signals"] .sg-rs .b { opacity: 0; color: var(--ink); font-weight: 800; }
[data-page="signals"] .sg-rs .sg-i { width: 13px; height: 13px; flex: none; padding: 1px; border-radius: 50%; background: var(--gold); stroke-width: 3.2; }
[data-page="signals"] .r1 .sg-row--1 .sg-rs .a, [data-page="signals"] .r2 .sg-row--2 .sg-rs .a, [data-page="signals"] .r3 .sg-row--3 .sg-rs .a, [data-page="signals"] .r4 .sg-row--4 .sg-rs .a { opacity: 0; }
[data-page="signals"] .r1 .sg-row--1 .sg-rs .b, [data-page="signals"] .r2 .sg-row--2 .sg-rs .b, [data-page="signals"] .r3 .sg-row--3 .sg-rs .b, [data-page="signals"] .r4 .sg-row--4 .sg-rs .b { opacity: 1; }

/* Footer: the schedule, and where buyer intent comes from (AK: no refresh days) */
[data-page="signals"] .sg-ft { display: flex; align-items: center; justify-content: space-between; font: 600 12px/16px var(--f-body); color: var(--slate); }
[data-page="signals"] .sg-ft > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
[data-page="signals"] .sg-ft .sg-i { width: 13px; height: 13px; }
[data-page="signals"] .sg-inc { padding: 0 8px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); color: var(--ink); font-weight: 700; }

/* The pause button: top right, beside "Where each one lands" */
.hxa[data-page="signals"] .hxa-pause { top: 3.4%; bottom: auto; right: 2.6%; }

/* Phones (same 284 x 412 canvas as before): each signal card, then a slim strip for where it lands, with a small bent arrow at its left.
   The strip shows the place and the new line (the name is already on the card right above it). */
@media (max-width: 767px) {
  .hxa[data-page="signals"] .hxa-stage { aspect-ratio: 284 / 412; }
  .hxa[data-page="signals"] .hxa-stage > .canvas { width: 284px; height: 412px; }
  [data-page="signals"] .sg { inset: 6px 6px 30px; padding: 10px; justify-content: space-between; }
  [data-page="signals"] .sg-hd { grid-template-columns: minmax(0, 1fr); }
  [data-page="signals"] .sg-hd > span, [data-page="signals"] .sg-hd .sg-hd2, [data-page="signals"] .sg-ft { display: none; }
  [data-page="signals"] .sg-hd b { font-size: 14px; line-height: 18px; }
  [data-page="signals"] .sg-row { grid-template-columns: 16px minmax(0, 1fr); row-gap: 4px; }
  [data-page="signals"] .sg-c { grid-column: 1 / -1; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; height: 46px; padding: 0 10px; }
  [data-page="signals"] .sg-ti { width: 28px; height: 28px; border-radius: 8px; }
  [data-page="signals"] .sg-ti .sg-i { width: 15px; height: 15px; }
  [data-page="signals"] .sg-meta { display: none; }
  [data-page="signals"] .sg-co { font-size: 12px; line-height: 14px; }
  [data-page="signals"] .sg-tx b { font-size: 14px; line-height: 18px; }
  [data-page="signals"] .sg-ln--h { display: none; }
  [data-page="signals"] .sg-ln--v { display: block; width: 16px; height: 28px; margin-top: -4px; }
  [data-page="signals"] .sg-r { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; padding: 0 10px; height: 28px; border-radius: 10px; }
  [data-page="signals"] .sg-rn b { display: none; }
  [data-page="signals"] .sg-rs { justify-items: end; }
  .hxa[data-page="signals"] .hxa-pause { top: auto; bottom: 0; left: 4px; right: auto; width: 28px; height: 28px; }
}
/* Pause stops every motion (WCAG 2.2.2); a visible ink focus ring on the pause button (2.4.11) */
.hxa[data-page="signals"] .hxa-opt:not(.is-playing) .canvas, .hxa[data-page="signals"] .hxa-opt:not(.is-playing) .canvas * { animation-play-state: paused !important; }
.hxa[data-page="signals"] .hxa-pause[hidden] { display: none; }
.hxa[data-page="signals"] .hxa-pause:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white); }
/* Reduced motion: all four signals delivered, all four places updated, still */
.hxa-reduced [data-page="signals"] .canvas, .hxa-reduced [data-page="signals"] .canvas * { transition: none !important; animation: none !important; }

/* W17 (AK G2): the Buyer intent row shows 'Surging' with a short level bar (3 of 4), not a raw score. Static, no motion. */
[data-page="signals"] .sg-bar { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 2px; }
[data-page="signals"] .sg-bar i { width: 4px; border-radius: 2px; background: var(--lav); }
[data-page="signals"] .sg-bar i:nth-child(1) { height: 4px; }
[data-page="signals"] .sg-bar i:nth-child(2) { height: 7px; }
[data-page="signals"] .sg-bar i:nth-child(3) { height: 10px; }
[data-page="signals"] .sg-bar i:nth-child(4) { height: 12px; }
[data-page="signals"] .sg-bar i:nth-child(-n+3) { background: var(--gold); }