/* DigiDonate v3 — homepage section layer ("sxh-"). Linked after sx.css and sx-kit.css on index.html only.
   Builds on the engine hooks (.sx-in, .sx-loop/.sx-run, --sx-p from [data-sx-scrub]); it never observes anything
   itself and writes no text. Every decorative element it styles is aria-hidden and textless.

   1. Match → Give → Show   a journey rail through the three step numbers. Each .dp-step-top carries
                            data-sx-scrub, so --sx-p runs 0→1 while the number row rises from 92% to 42% of the
                            viewport. Desktop (3 columns): a dotted rail runs card to card; a light streak travels
                            1 → 2 → 3 and each number lights as it arrives. ≤1080 (stacked): a dotted spine in the
                            left gutter, a streak that holds its place on screen while the cards scroll past it,
                            lighting each number as its row passes.
   2. Matchmaking           example matches (behaviour in assets/sx-match.js): a business card, a ring that lights one
                            segment per match, the three matched charities and the chosen one, what they matched on.
   3. Statement             a large heart outline drawn by the scroll behind the words, soft lilac glows.
   4. Before and after      usual giving frays after the receipt; with DigiDonate a lit line runs through the steps.
   5. Follow one gift       an example trace: gift → charity (receipt) → the charity's update → customers, team, accountant.
   6. For charities band    business icons send orbs straight into the heart badge (money: business → charity only).

   Base rules = the complete still frame (reduced motion, no JS, print). Hidden starting states and all motion
   live under html.sx-on inside (prefers-reduced-motion: no-preference). Only transform and opacity change per
   frame (plus offset-distance / stroke-dashoffset in SVG); threshold changes animate with short transitions. */

/* ================= 1. Match → Give → Show ================= */
.sxh-st { --sxh-k: 0; --sxh-t: .02; --sxh-g: 49px; }
.sxh-st-2 { --sxh-k: 1; --sxh-t: .5; }
.sxh-st-3 { --sxh-k: 2; --sxh-t: .97; }
@media (max-width: 1080px) { .sxh-st, .sxh-st-2, .sxh-st-3 { --sxh-t: .6; } }
@media (max-width: 700px) { .sxh-st { --sxh-g: 37px; } }
/* 0 → 1 the moment the light reaches this number (a step, so the change can animate as a transition) */
.sxh-st { position: relative; --sxh-lit: clamp(0, (var(--sx-p, 1) - var(--sxh-t)) * 1000, 1); }

/* the lit node: a purple disc behind the numeral (numeral stays real text on top) */
.sxh-st .dp-step-n::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 1.42em; height: 1.42em;
  margin: -.71em 0 0 -.71em; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 28%, #8C58EE 0%, #6C2BD9 58%, #5A21BD 100%);
  box-shadow: 0 0 0 6px rgba(174,138,234,.17), 0 12px 26px -8px rgba(108,43,217,.72), inset 0 1px 0 rgba(255,255,255,.24);
  opacity: var(--sxh-lit); transform: scale(calc(.5 + var(--sxh-lit) * .5)); }

.sxh-rail, .sxh-spine { display: none; }
.sxh-rail i, .sxh-spine i { position: absolute; display: block; }

/* desktop: one rail per card, each spanning the card plus half of each gap, so the three join seamlessly.
   --sxh-c = the number's centre from the rail's left edge (12px half gap + 1px border + 36px padding + half a numeral). */
@media (min-width: 1081px) {
  .sxh-rail { display: block; position: absolute; z-index: -1; left: -49px; right: -49px; top: 50%; height: 40px; margin-top: -20px;
    pointer-events: none; --sxh-c: 63px;
    -webkit-mask-image: var(--sxh-m); mask-image: var(--sxh-m); }
  .sxh-st-1 .sxh-rail { --sxh-m: linear-gradient(90deg, transparent 0, transparent calc(var(--sxh-c) + 31px), #000 calc(var(--sxh-c) + 46px), #000 100%); }
  .sxh-st-2 .sxh-rail { --sxh-m: linear-gradient(90deg, #000 0, #000 calc(var(--sxh-c) - 46px), transparent calc(var(--sxh-c) - 31px),
                        transparent calc(var(--sxh-c) + 31px), #000 calc(var(--sxh-c) + 46px), #000 100%); }
  .sxh-st-3 .sxh-rail { --sxh-m: linear-gradient(90deg, #000 0, #000 calc(var(--sxh-c) - 46px), transparent calc(var(--sxh-c) - 31px), transparent 100%); }
  .sxh-rail-dots, .sxh-rail-cur { left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; }
  .sxh-rail-dots { background: radial-gradient(circle, #D3C1F5 1.25px, rgba(211,193,245,0) 1.85px) 0 50% / 10px 4px repeat-x; }
  .sxh-rail-cur { left: -10px; opacity: .45; background: radial-gradient(circle, #8E5BE6 1.3px, rgba(142,91,230,0) 1.9px) 0 50% / 10px 4px repeat-x; }
  /* the travelling light: a streak (not a coin) with a comet tail */
  .sxh-rail-run { left: 0; top: 0; bottom: 0; width: 100%; opacity: 0; }
  .sxh-rail-head { left: var(--sxh-c); top: 50%; width: 24px; height: 7px; margin: -3.5px 0 0 -14px; border-radius: 4px; background: #FFFFFF;
    box-shadow: 0 0 0 1.5px rgba(174,138,234,.95), 0 0 10px 2px rgba(174,138,234,.95), 0 0 24px 7px rgba(108,43,217,.5); }
  .sxh-rail-trail { left: calc(var(--sxh-c) - 132px); top: 50%; width: 124px; height: 3px; margin-top: -1.5px; border-radius: 3px;
    background: linear-gradient(90deg, rgba(174,138,234,0), rgba(174,138,234,.5) 55%, #8E5BE6); }
}

/* ≤1080: a dotted spine in the left gutter, a node + tick at each number, a streak riding down */
@media (max-width: 1080px) {
  .sxh-steps { position: relative; }
  .sxh-steps::before { content: ""; position: absolute; left: -14px; top: 26px; bottom: 26px; width: 4px; pointer-events: none;
    background: radial-gradient(circle, #D3C1F5 1.2px, rgba(211,193,245,0) 1.8px) 50% 0 / 4px 10px repeat-y;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
            mask-image: linear-gradient(180deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); }
  .sxh-spine { display: block; position: absolute; z-index: -1; left: 0; top: 50%; width: 0; height: 0; pointer-events: none; }
  .sxh-spine-tick { left: calc(var(--sxh-g) * -1 + 8px); top: -1px; width: calc(var(--sxh-g) - 18px); height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #8E5BE6, #C9B2F2); opacity: calc(.35 + var(--sxh-lit) * .65); }
  .sxh-spine-node { left: calc(var(--sxh-g) * -1 - 6px); top: -6px; width: 12px; height: 12px; border-radius: 50%;
    background: #FFFFFF; box-shadow: inset 0 0 0 2px #CDB6F4; }
  .sxh-spine-node::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #6C2BD9;
    box-shadow: 0 0 0 4px rgba(174,138,234,.25), 0 0 14px 2px rgba(108,43,217,.55); opacity: var(--sxh-lit); }
  .sxh-spine-run { left: calc(var(--sxh-g) * -1); top: 0; width: 0; height: 0; opacity: 0; }
  .sxh-spine-head { left: -3.5px; top: -13px; width: 7px; height: 24px; border-radius: 4px; background: #FFFFFF;
    box-shadow: 0 0 0 1.5px rgba(174,138,234,.95), 0 0 10px 2px rgba(174,138,234,.95), 0 0 22px 6px rgba(108,43,217,.5); }
  .sxh-spine-trail { left: -1.5px; top: -120px; width: 3px; height: 110px; border-radius: 3px;
    background: linear-gradient(180deg, rgba(174,138,234,0), rgba(174,138,234,.5) 55%, #8E5BE6); }
}

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxh-st .dp-step-n::before { transition: opacity .45s ease, transform .8s var(--sx-spring); }
  /* the numeral itself turns white on its lit disc with a one-shot sweep (replaces the engine's reveal sweep here) */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    html.sx-on .sxh-steps .sx-card .sxh-st .dp-step-n {
      background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 38%, #F1EAFD 48%, #DFD0F7 58%, #DFD0F7 100%)
                  calc((1 - var(--sxh-lit)) * 100%) 0 / 260% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text; animation: none; transition: background-position .8s var(--sx-ease) .08s; }
  }
  /* the engine's number ring becomes the node outline, and ripples out when the number lights */
  html.sx-on .sxh-steps .sx-card .sxh-st .dp-step-n::after { animation: none; border-color: rgba(174,138,234,.75);
    opacity: calc((1 - var(--sxh-lit)) * .85); transform: scale(calc(1 + var(--sxh-lit) * .75));
    transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1); }
  html.sx-on .sxh-steps .sx-card:not(.sx-in) .sxh-st .dp-step-n::after { opacity: 0; transform: scale(.6); }

  html.sx-on .sxh-rail-run { opacity: clamp(0, min(var(--sx-p, 1) * 22, (1 - var(--sx-p, 1)) * 22), 1);
    transform: translate3d(calc((var(--sx-p, 1) * 2 - var(--sxh-k)) * 100%), 0, 0); will-change: transform; }
  html.sx-on .sxh-rail-cur { animation: sxh-march 1.3s linear infinite; }
  html.sx-on .sxh-spine-run { opacity: clamp(0, min(var(--sx-p, 1) * 14, (1 - var(--sx-p, 1)) * 14), 1);
    transform: translate3d(0, calc((var(--sx-p, 1) - .6) * 50vh), 0); will-change: transform; }
  html.sx-on .sxh-spine-node::after, html.sx-on .sxh-spine-tick { transition: opacity .5s ease; }
}
@keyframes sxh-march { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(10px, 0, 0); } }

/* ================= 3. Statement: a heart drawn by the scroll, behind the words ================= */
/* .sxh-why sits beside .dp-wrap (never inside it, so the engine still treats this as the statement) and
   carries its own data-sx-scrub. --sxh-d: how much of the outline is drawn; --sxh-done flips once it closes. */
.sxh-why-sec > .dp-wrap { position: relative; }
.sxh-why { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  --sxh-d: clamp(0, (var(--sx-p, 1) - .04) / .84, 1); --sxh-done: clamp(0, (var(--sx-p, 1) - .9) * 1000, 1); }
.sxh-why-glow { position: absolute; display: block; border-radius: 50%; }
.sxh-why-glow.is-a { width: 640px; height: 640px; right: max(-60px, calc(50% - 700px)); top: 50%; margin-top: -320px;
  background: radial-gradient(closest-side, rgba(174,138,234,.2), rgba(174,138,234,.07) 55%, rgba(174,138,234,0)); }
.sxh-why-glow.is-b { width: 520px; height: 520px; left: max(-200px, calc(50% - 860px)); bottom: -200px;
  background: radial-gradient(closest-side, rgba(223,208,247,.55), rgba(223,208,247,0)); }
.sxh-why-heart { position: absolute; top: 50%; right: max(24px, calc(50% - 640px)); height: min(88%, 600px); width: auto;
  aspect-ratio: 600 / 560; transform: translateY(-50%); overflow: visible; }
.sxh-why-heart path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sxh-why-heart .sxh-why-fill { fill: #F6F0FE; stroke: none; opacity: calc(var(--sxh-done) * .85); }
.sxh-why-ghost { stroke: #E9DEFA; stroke-width: 2.4; stroke-dasharray: .1 10; }
.sxh-why-line, .sxh-why-halo { stroke-dasharray: 1 2; stroke-dashoffset: calc(1.01 - var(--sxh-d) * 1.01); }
.sxh-why-line { stroke: #C3A8F1; stroke-width: 2.6; }
.sxh-why-halo { stroke: #AE8AEA; stroke-width: 16; opacity: calc(.1 + var(--sxh-done) * .07); }
.sxh-why-pen { display: none; }
@media (max-width: 1080px) {
  .sxh-why-heart { right: auto; left: 50%; height: auto; width: min(86vw, 560px); transform: translate(-50%, -50%); }
  .sxh-why-glow.is-a { width: 520px; height: 520px; right: 50%; margin: -260px -260px 0 0; }
  .sxh-why-glow.is-b { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxh-why-pen { display: inline; fill: #FFFFFF; offset-path: path("M300,512C238,458 64,360 64,204C64,112 132,54 210,54C254,54 286,80 300,114C314,80 346,54 390,54C468,54 536,112 536,204C536,360 362,458 300,512Z");
    offset-rotate: 0deg; offset-distance: calc(var(--sxh-d) * 100%); opacity: clamp(0, min(var(--sxh-d) * 30, (1 - var(--sxh-d)) * 30), 1);
    stroke: #AE8AEA; stroke-width: 1.5; }
  html.sx-on .sxh-why-pen.is-halo { fill: rgba(174,138,234,.24); stroke: none; }
  /* once the outline closes: the heart fills softly with a single gentle beat */
  html.sx-on .sxh-why-heart .sxh-why-fill { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(calc(.9 + var(--sxh-done) * .1));
    transition: opacity 1.2s ease .05s, transform 1.5s var(--sx-spring) .05s; }
  html.sx-on .sxh-why-halo { transition: opacity 1.2s ease; }
  html.sx-on .sxh-why-glow.is-a { animation: sxh-drift 16s var(--sx-loop) infinite alternate; }
  html.sx-on .sxh-why-glow.is-b { animation: sxh-drift-b 19s var(--sx-loop) infinite alternate; }
}
@keyframes sxh-drift { from { transform: translate3d(-40px, 24px, 0) scale(.94); } to { transform: translate3d(36px, -28px, 0) scale(1.06); } }
@keyframes sxh-drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(90px, -60px, 0); } }
@media (max-width: 700px) { .sxh-why-heart { top: 56%; } }

/* ================= 4. Before and after ================= */
/* each list sits in .sxh-ba-track with an aria-hidden connector running from the first number's centre to the
   last one's, under the number circles (only the gaps between circles show it) */
.sxh-ba-track { position: relative; }
.sxh-ba-list { position: relative; }
.sxh-ba-line { position: absolute; z-index: -1; width: 4px; pointer-events: none; }
.sxh-ba-line.is-usual { left: 16px; top: 32px; bottom: 18px; }
.sxh-ba-line.is-dd { left: 15px; top: 31px; bottom: 17px; }
.sxh-ba-line i { position: absolute; display: block; }
.sxh-ba-n { position: relative; }
.sxh-ba-n::before, .sxh-ba-n::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }

/* usual giving: the dashed thread reaches the receipt, then breaks apart and fades */
.sxh-ba-seg { left: 1px; top: 0; width: 2px; height: 33.4%; transform-origin: 50% 0;
  background: repeating-linear-gradient(180deg, #CBC5D3 0 5px, rgba(203,197,211,0) 5px 10px); }
.sxh-ba-fr { left: 1px; width: 2px; height: 5px; border-radius: 1px; background: #C6C0CF; margin-top: -2px;
  opacity: var(--o); transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
.sxh-ba-fr.is-1 { top: 44%; --o: .85; --dx: 0px; --dy: 0px; --r: 0deg; }
.sxh-ba-fr.is-2 { top: 47.6%; --o: .62; --dx: 2px; --dy: 1px; --r: 16deg; }
.sxh-ba-fr.is-3 { top: 51.2%; --o: .42; --dx: -3px; --dy: 3px; --r: -28deg; }
.sxh-ba-fr.is-4 { top: 54.8%; --o: .26; --dx: 5px; --dy: 5px; --r: 40deg; }
.sxh-ba-fr.is-5 { top: 77%; height: 3px; --o: .14; --dx: -6px; --dy: 4px; --r: -52deg; }
.sxh-ba-fr.is-6 { top: 81.5%; height: 2px; --o: .08; --dx: 8px; --dy: 7px; --r: 64deg; }
/* "Never hear back" and "Hope it helped" drift into an uncertain state: the number dims, slips and gets a dashed ring,
   the words soften (kept ≥ 4.5:1 on white). Opacity only on the rows, so their divider lines stay put. */
.sxh-ba-usual .sxh-ba-i:nth-child(3) { opacity: .82; }
.sxh-ba-usual .sxh-ba-i:nth-child(4) { opacity: .8; }
.sxh-ba-usual .sxh-ba-i:nth-child(3) .sxh-ba-n { opacity: .5; transform: translate3d(1px, 1px, 0) scale(.92); }
.sxh-ba-usual .sxh-ba-i:nth-child(4) .sxh-ba-n { opacity: .42; transform: translate3d(3px, 2px, 0) scale(.88); }
.sxh-ba-usual .sxh-ba-i:nth-child(n+3) .sxh-ba-n::before { inset: -5px; border: 1.5px dashed #CDC7D5; }

/* with DigiDonate: a lit line through the numbers, lit numbers, a soft card glow */
.sxh-ba-base { left: 1px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: rgba(108,43,217,.16); }
.sxh-ba-draw { left: .5px; top: 0; bottom: 0; width: 3px; border-radius: 3px; transform-origin: 50% 0;
  background: linear-gradient(180deg, #AE8AEA, #6C2BD9 70%, #8C58EE); box-shadow: 0 0 8px 1px rgba(174,138,234,.85); }
.sxh-ba-pulse { left: 0; top: 0; width: 4px; height: 100%; opacity: 0; }
.sxh-ba-pulse i { left: 0; top: -30px; width: 4px; height: 30px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #FFFFFF); box-shadow: 0 0 10px 2px rgba(174,138,234,.95), 0 6px 16px 3px rgba(108,43,217,.45); }
.sxh-ba-dd .sxh-ba-n { box-shadow: 0 0 0 5px rgba(108,43,217,.1), 0 8px 18px -6px rgba(108,43,217,.65); }
.sxh-ba-dd .sxh-ba-n::before { inset: 0; box-shadow: 0 0 0 4px rgba(174,138,234,.5), 0 0 18px 5px rgba(108,43,217,.55); opacity: 0; }
.sxh-ba-dd .sxh-ba-n::after { inset: -1px; border: 2px solid #AE8AEA; opacity: 0; }
.sxh-ba-glow { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(174,138,234,.55), 0 30px 70px -30px rgba(108,43,217,.62), 0 0 50px -8px rgba(174,138,234,.5); }

@media (prefers-reduced-motion: no-preference) {
  /* items enter one by one once the card is revealed */
  html.sx-on .sxh-ba .sx-card:not(.sx-in) .sxh-ba-i { opacity: 0; transform: translate3d(-12px, 0, 0); }
  html.sx-on .sxh-ba .sx-card .sxh-ba-i { --sxh-li: calc(var(--sx-b, 0) * 90ms + 380ms); }
  html.sx-on .sxh-ba .sx-card.sx-in .sxh-ba-i { transition: opacity .6s ease, transform .85s var(--sx-ease); }
  html.sx-on .sxh-ba .sx-card.sx-in .sxh-ba-i:nth-child(1) { transition-delay: var(--sxh-li); }
  html.sx-on .sxh-ba .sx-card.sx-in .sxh-ba-i:nth-child(2) { transition-delay: calc(var(--sxh-li) + 130ms); }
  html.sx-on .sxh-ba .sx-card.sx-in .sxh-ba-i:nth-child(3) { transition-delay: calc(var(--sxh-li) + 260ms); }
  html.sx-on .sxh-ba .sx-card.sx-in .sxh-ba-i:nth-child(4) { transition-delay: calc(var(--sxh-li) + 390ms); }
  /* usual: 3 and 4 arrive, hold, then drift and soften (one shot) */
  html.sx-on .sxh-ba-usual.sx-in .sxh-ba-i:nth-child(3) { animation: sxh-drift3 3.2s var(--sx-ease) calc(var(--sxh-li) + 260ms) both; }
  html.sx-on .sxh-ba-usual.sx-in .sxh-ba-i:nth-child(4) { animation: sxh-drift4 3.2s var(--sx-ease) calc(var(--sxh-li) + 390ms) both; }
  html.sx-on .sxh-ba-usual.sx-in .sxh-ba-i:nth-child(3) .sxh-ba-n { animation: sxh-dim3 3s ease calc(var(--sxh-li) + 300ms) both; }
  html.sx-on .sxh-ba-usual.sx-in .sxh-ba-i:nth-child(4) .sxh-ba-n { animation: sxh-dim4 3s ease calc(var(--sxh-li) + 420ms) both; }
  html.sx-on .sxh-ba-usual.sx-in .sxh-ba-i:nth-child(n+3) .sxh-ba-n::before { animation: sxh-ring-in 1.4s var(--sx-ease) calc(var(--sxh-li) + 2.1s) both; }
  html.sx-on .sxh-ba-usual:not(.sx-in) .sxh-ba-seg { transform: scaleY(0); }
  html.sx-on .sxh-ba-usual.sx-in .sxh-ba-seg { transition: transform .7s cubic-bezier(.4,0,.2,1) calc(var(--sx-b, 0) * 90ms + 1s); }
  html.sx-on .sxh-ba-usual:not(.sx-in) .sxh-ba-fr { opacity: 0; }
  html.sx-on .sxh-ba-usual.sx-in .sxh-ba-fr { animation: sxh-fray 2.4s cubic-bezier(.3,0,.2,1) calc(var(--sx-b, 0) * 90ms + 1.62s + var(--k) * 90ms) both; }
  .sxh-ba-fr.is-2 { --k: 1; } .sxh-ba-fr.is-3 { --k: 2; } .sxh-ba-fr.is-4 { --k: 3; } .sxh-ba-fr.is-5 { --k: 5; } .sxh-ba-fr.is-6 { --k: 6; }
  .sxh-ba-fr.is-1 { --k: 0; }

  /* with DigiDonate: the line draws down, each number lights as it arrives, then a pulse keeps travelling */
  html.sx-on .sxh-ba-dd { --sxh-d0: calc(var(--sx-b, 0) * 90ms + 900ms); }
  html.sx-on .sxh-ba-dd:not(.sx-in) .sxh-ba-draw { transform: scaleY(0); }
  html.sx-on .sxh-ba-dd.sx-in .sxh-ba-draw { transition: transform 1.7s cubic-bezier(.45,0,.25,1) var(--sxh-d0); }
  html.sx-on .sxh-ba-dd:not(.sx-in) .sxh-ba-n { opacity: .32; transform: scale(.8); }
  html.sx-on .sxh-ba-dd .sxh-ba-i:nth-child(1) .sxh-ba-n { --sxh-nd: 0ms; }
  html.sx-on .sxh-ba-dd .sxh-ba-i:nth-child(2) .sxh-ba-n { --sxh-nd: 560ms; }
  html.sx-on .sxh-ba-dd .sxh-ba-i:nth-child(3) .sxh-ba-n { --sxh-nd: 1130ms; }
  html.sx-on .sxh-ba-dd .sxh-ba-i:nth-child(4) .sxh-ba-n { --sxh-nd: 1700ms; }
  html.sx-on .sxh-ba-dd.sx-in .sxh-ba-n { transition: opacity .35s ease calc(var(--sxh-d0) + var(--sxh-nd)), transform .7s var(--sx-spring) calc(var(--sxh-d0) + var(--sxh-nd)); }
  html.sx-on .sxh-ba-dd.sx-in .sxh-ba-n::after { animation: sxh-burst 1.2s cubic-bezier(.2,.7,.3,1) calc(var(--sxh-d0) + var(--sxh-nd)) both; }
  /* pulse loop: 1.8 s down the line, 1.6 s rest; each number glows as it passes (offsets match the travel) */
  html.sx-on .sxh-ba-dd.sx-in .sxh-ba-pulse { animation: sxh-pulse 3.4s cubic-bezier(.45,0,.55,1) calc(var(--sxh-d0) + 2.2s) infinite; }
  html.sx-on .sxh-ba-dd.sx-in .sxh-ba-n::before { animation: sxh-pass 3.4s ease-out calc(var(--sxh-d0) + 2.2s + var(--sxh-pd)) infinite; }
  html.sx-on .sxh-ba-dd .sxh-ba-i:nth-child(1) .sxh-ba-n { --sxh-pd: -60ms; }
  html.sx-on .sxh-ba-dd .sxh-ba-i:nth-child(2) .sxh-ba-n { --sxh-pd: 560ms; }
  html.sx-on .sxh-ba-dd .sxh-ba-i:nth-child(3) .sxh-ba-n { --sxh-pd: 1180ms; }
  html.sx-on .sxh-ba-dd .sxh-ba-i:nth-child(4) .sxh-ba-n { --sxh-pd: 1740ms; }
  html.sx-on .sxh-ba-dd:not(.sx-in) .sxh-ba-glow { opacity: 0; }
  html.sx-on .sxh-ba-dd.sx-in .sxh-ba-glow { transition: opacity 1.2s ease calc(var(--sxh-d0) + 1.9s); }
  html.sx-on .sxh-ba-dd.sx-in .sxh-ba-glow { animation: sxh-breathe 4.2s var(--sx-loop) calc(var(--sxh-d0) + 3.2s) infinite alternate; }
}
@keyframes sxh-drift3 { 0% { opacity: 0; transform: translate3d(-12px, 0, 0); } 22% { opacity: 1; transform: none; } 58% { opacity: 1; }
  100% { opacity: .82; transform: none; } }
@keyframes sxh-drift4 { 0% { opacity: 0; transform: translate3d(-12px, 0, 0); } 22% { opacity: 1; transform: none; } 58% { opacity: 1; }
  100% { opacity: .8; transform: none; } }
@keyframes sxh-dim3 { 0%, 62% { opacity: 1; transform: none; } 100% { opacity: .5; transform: translate3d(1px, 1px, 0) scale(.92); } }
@keyframes sxh-dim4 { 0%, 62% { opacity: 1; transform: none; } 100% { opacity: .42; transform: translate3d(3px, 2px, 0) scale(.88); } }
@keyframes sxh-ring-in { from { opacity: 0; transform: scale(.7) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes sxh-fray { 0% { opacity: 0; transform: none; } 14% { opacity: .9; transform: none; } 42% { opacity: .9; transform: none; }
  100% { opacity: var(--o); transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
@keyframes sxh-burst { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sxh-pulse { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 6% { opacity: 1; } 47% { opacity: 1; } 53%, 100% { opacity: 0; transform: translate3d(0, 100%, 0); } }
@keyframes sxh-pass { 0% { opacity: 0; } 4% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes sxh-breathe { from { opacity: 1; } to { opacity: .62; } }

/* ================= 6. For charities band: a business gives straight to the charity ================= */
/* Centred on the heart badge (badge centre = 66px below the top of .dp-wrap; 63px on phones). ONE business, one
   straight pipe, one gift at a time: the badge glows and sends a halo ring as it arrives. Deliberately not several
   businesses streaming money in: on a band aimed at charities that would read as "we bring you businesses and
   money" (rulebook: we never fundraise or find supporters for a charity). No DigiDonate node on the path. */
.sxh-cta-wide .is-2, .sxh-cta-wide .is-3, .sxh-cta-wide .is-4, .sxh-cta-narrow .is-2 { display: none; }
.sxh-cta-sec .dp-head, .sxh-cta-sec .dp-actions { position: relative; z-index: 1; }
.sxh-cta { position: absolute; z-index: 0; left: 50%; top: 66px; width: min(1200px, calc(100vw - 24px)); aspect-ratio: 1200 / 240;
  transform: translate(-50%, -50%); pointer-events: none; }
.sxh-cta svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sxh-cta-narrow { display: none; }
@media (max-width: 700px) {
  .sxh-cta { top: 63px; width: min(100vw, 440px); aspect-ratio: 390 / 130; }
  .sxh-cta-wide { display: none; }
  .sxh-cta-narrow { display: block; }
}
.sxh-cta-pipe { fill: none; stroke: rgba(255,255,255,.075); stroke-width: 8; stroke-linecap: round; }
.sxh-cta-cur { fill: none; stroke: #AE8AEA; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .01 11; opacity: .5; }
.sxh-cta-node { fill: #1A1624; stroke: #3A3350; stroke-width: 1.5; }
.sxh-cta-send { fill: none; stroke: rgba(174,138,234,.55); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.sxh-cta-ic { fill: none; stroke: #C9B2F2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sxh-cta-core { fill: #FFFFFF; }
.sxh-cta-orb { opacity: 0; }
.sxh-cta-glow { opacity: .55; transform-box: fill-box; transform-origin: 50% 50%; }
.sxh-cta-ring { fill: none; stroke: rgba(174,138,234,.6); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxh-cta-cur { animation: sxh-cur 1.6s linear infinite; }
  /* one orb: an arrival every 8 s (the narrow version every 5 s); the badge answers each arrival once */
  html.sx-on .sxh-cta-orb { animation: sxh-orb 8s cubic-bezier(.45,0,.55,1) var(--sxh-o, 0s) infinite both; }
  html.sx-on .sxh-cta-send { animation: sxh-send 8s ease-out var(--sxh-o, 0s) infinite both; }
  html.sx-on .sxh-cta-trail { transform-box: fill-box; transform-origin: 100% 50%; animation: sxh-tail 8s linear var(--sxh-o, 0s) infinite both; }
  .sxh-cta-wide .is-2 { --sxh-o: 2s; } .sxh-cta-wide .is-3 { --sxh-o: 4s; } .sxh-cta-wide .is-4 { --sxh-o: 6s; }
  html.sx-on .sxh-cta-wide .sxh-cta-ring { animation: sxh-halo1 8s cubic-bezier(.2,.7,.3,1) 3.04s infinite both; }
  html.sx-on .sxh-cta-wide .sxh-cta-ring.is-b { animation-delay: 3.24s; }
  html.sx-on .sxh-cta-wide .sxh-cta-glow { animation: sxh-hglow1 8s ease-out 3s infinite both; }
  html.sx-on .sxh-cta-narrow .sxh-cta-orb, html.sx-on .sxh-cta-narrow .sxh-cta-send, html.sx-on .sxh-cta-narrow .sxh-cta-trail { animation-duration: 5s; }
  .sxh-cta-narrow .is-2 { --sxh-o: 2.5s; }
  html.sx-on .sxh-cta-narrow .sxh-cta-ring { animation: sxh-halo1 5s cubic-bezier(.2,.7,.3,1) 1.9s infinite both; }
  html.sx-on .sxh-cta-narrow .sxh-cta-ring.is-b { animation-delay: 2.1s; }
  html.sx-on .sxh-cta-narrow .sxh-cta-glow { animation: sxh-hglow1 5s ease-out 1.86s infinite both; }
}
@keyframes sxh-cur { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -11.01; } }
@keyframes sxh-orb { 0% { opacity: 0; transform: translateX(0); } 5% { opacity: 1; } 38% { opacity: 1; transform: translateX(var(--len)); }
  41%, 100% { opacity: 0; transform: translateX(var(--len)); } }
@keyframes sxh-tail { 0%, 3% { transform: scaleX(0); } 16%, 100% { transform: scaleX(1); } }
@keyframes sxh-send { 0% { opacity: .8; transform: scale(1); } 12%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sxh-halo { 0% { opacity: .8; transform: scale(.95); } 70%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sxh-hglow { 0% { opacity: .5; transform: scale(.9); } 12% { opacity: 1; transform: scale(1.06); } 100% { opacity: .5; transform: scale(.9); } }
@keyframes sxh-halo1 { 0% { opacity: .8; transform: scale(.95); } 28%, 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sxh-hglow1 { 0% { opacity: .5; transform: scale(.9); } 5% { opacity: 1; transform: scale(1.06); } 40%, 100% { opacity: .5; transform: scale(.9); } }

/* ================= 2. Matchmaking: example matches ================= */
.sxh-mm { --mm-card: #15121D; --mm-card2: #110E18; --mm-line: #272233; --mm-line2: #3A3350; --mm-text: #B5B0C2;
  --mm-muted: #7C7790; --mm-acc: #AE8AEA;
  background: rgba(21,18,29,.72); border: 1px solid var(--mm-line); border-radius: 28px; padding: 30px; position: relative; }
.sxh-mm-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sxh-mm-eg { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--mm-line2); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-text); }
.sxh-mm-eg i { width: 7px; height: 7px; border-radius: 999px; background: var(--mm-acc); }
.sxh-mm-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.sxh-mm-tabs[hidden] { display: none; }
.sxh-mm-tabs button { height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--mm-line); background: transparent;
  color: var(--mm-text); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.sxh-mm-tabs button:hover { border-color: var(--mm-line2); color: #FFFFFF; }
.sxh-mm-tabs button[aria-selected="true"] { background: rgba(108,43,217,.18); border-color: var(--mm-acc); color: #E6D9FB; }
.sxh-mm-tabs button:focus-visible, .sxh-mm-next:focus-visible { outline: 2px solid var(--mm-acc); outline-offset: 2px; }

.sxh-mm-stage { display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr); align-items: center; }
.sxh-mm-card { background: var(--mm-card); border: 1px solid var(--mm-line); border-radius: 22px; padding: 24px;
  display: flex; flex-direction: column; gap: 14px; min-height: 100%; box-sizing: border-box; }
.sxh-mm-card.is-cha { border-color: var(--mm-line2); }
.sxh-mm-head { display: flex; align-items: center; gap: 14px; }
.sxh-mm-head h3 { margin: 4px 0 0; font-size: 21px; line-height: 1.15; color: #FFFFFF; }
.sxh-mm-tag { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mm-muted); }
.sxh-mm-av { flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: #6C2BD9; color: #FFFFFF; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.sxh-mm-av.is-cha { background: #1E1929; border: 1px solid var(--mm-line2); }
.sxh-mm-av.is-cha svg { width: 22px; height: 22px; fill: none; stroke: var(--mm-acc); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sxh-mm-av.is-sm { width: 36px; height: 36px; border-radius: 11px; font-size: 12.5px; background: #1E1929; border: 1px solid var(--mm-line2); color: var(--mm-acc); }
.sxh-mm-meta { font-size: 14px; font-weight: 600; color: var(--mm-text); }
.sxh-mm-dl { margin: 0; display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--mm-line); }
.sxh-mm-dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
.sxh-mm-dl dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-muted); padding-top: 2px; line-height: 1.45; }
.sxh-mm-dl dd { margin: 0; font-size: 15px; line-height: 1.45; color: #FFFFFF; font-weight: 600; }

.sxh-mm-list { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--mm-line); display: flex; flex-direction: column; gap: 8px; }
.sxh-mm-list li { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px;
  border: 1px solid transparent; transition: background-color .45s ease, border-color .45s ease; }
.sxh-mm-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sxh-mm-who b { font-size: 15px; line-height: 1.3; color: #FFFFFF; }
.sxh-mm-who span { font-size: 13px; line-height: 1.4; color: var(--mm-text); }
.sxh-mm-pick { flex-shrink: 0; display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px;
  background: #6C2BD9; color: #FFFFFF; font-size: 12px; font-weight: 700; }
.sxh-mm-list li:not(.is-chosen) .sxh-mm-pick { visibility: hidden; }
.sxh-mm-list li.is-chosen { background: rgba(108,43,217,.16); border-color: rgba(174,138,234,.55); }
.sxh-mm-list li.is-chosen .sxh-mm-av { background: #6C2BD9; border-color: #6C2BD9; color: #FFFFFF; }

/* the link between the cards: two lines and a ring with one segment per match */
.sxh-mm-link { display: flex; align-items: center; justify-content: center; }
.sxh-mm-line { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(174,138,234,0), rgba(174,138,234,.7)); }
.sxh-mm-line.is-r { background: linear-gradient(90deg, rgba(174,138,234,.7), rgba(174,138,234,0)); }
.sxh-mm-ring { position: relative; width: 140px; height: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; color: #FFFFFF; }
.sxh-mm-ring::before { content: ""; position: absolute; inset: 14px; border-radius: 999px;
  background: radial-gradient(circle at 50% 35%, rgba(108,43,217,.42), rgba(108,43,217,.08) 70%); }
.sxh-mm-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sxh-mm-track { fill: none; stroke: #2A2438; stroke-width: 8; }
.sxh-mm-arc { fill: none; stroke: var(--mm-acc); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 28 72; }
.sxh-mm-arc.is-1 { stroke-dashoffset: -2.67; }
.sxh-mm-arc.is-2 { stroke-dashoffset: -36; }
.sxh-mm-arc.is-3 { stroke-dashoffset: -69.33; }
.sxh-mm-ring b { position: relative; font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; font-size: 48px; line-height: 1;
  letter-spacing: -0.04em; }
.sxh-mm-ring span { position: relative; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mm-acc); }

.sxh-mm-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; margin-top: 26px; padding-top: 24px;
  border-top: 1px solid var(--mm-line); }
.sxh-mm-checks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sxh-mm-checks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--mm-text); }
.sxh-mm-checks svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--mm-acc); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; }
.sxh-mm-checks b { color: #FFFFFF; }
.sxh-mm-why { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sxh-mm-why p { margin: 2px 0 0; font-size: 16px; line-height: 1.6; color: var(--mm-text); }
.sxh-mm-next { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #FFFFFF; text-decoration: underline; text-underline-offset: 5px; }
.sxh-mm-next[hidden] { display: none; }
.sxh-mm-next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sxh-mm-sec .dp-note { margin-top: 18px; }
.sxh-mm-sec .dp-actions { margin-top: 30px; }

@media (max-width: 1080px) {
  .sxh-mm-stage { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); }
  .sxh-mm-ring { width: 118px; height: 118px; }
  .sxh-mm-ring b { font-size: 40px; }
  .sxh-mm-dl div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 860px) {
  .sxh-mm { padding: 20px; border-radius: 24px; }
  .sxh-mm-top { flex-direction: column; align-items: flex-start; }
  .sxh-mm-tabs { justify-content: flex-start; }
  .sxh-mm-stage { grid-template-columns: minmax(0, 1fr); }
  .sxh-mm-link { flex-direction: column; height: 168px; }
  .sxh-mm-line { width: 2px; flex: 1; background: linear-gradient(180deg, rgba(174,138,234,0), rgba(174,138,234,.7)); }
  .sxh-mm-line.is-r { background: linear-gradient(180deg, rgba(174,138,234,.7), rgba(174,138,234,0)); }
  .sxh-mm-ring { width: 112px; height: 112px; margin: 6px 0; }
  .sxh-mm-ring b { font-size: 36px; }
  .sxh-mm-card { padding: 20px; }
  .sxh-mm-foot { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 480px) {
  .sxh-mm { padding: 14px; }
  .sxh-mm-top { padding: 4px 4px 0; }
  .sxh-mm-card { padding: 16px; }
  .sxh-mm-tabs button { height: 36px; padding: 0 12px; font-size: 13px; }
  .sxh-mm-list li { padding: 12px 10px 10px; gap: 10px; }
  /* the pill sits on the row's top edge, so the name keeps the full width */
  .sxh-mm-pick { position: absolute; top: -10px; right: 10px; height: 20px; padding: 0 9px; font-size: 11px; }
  .sxh-mm-foot { padding: 20px 4px 4px; }
}

/* motion: only once sx-match.js runs (.is-js); .is-lit starts each example's sequence */
@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxh-mm.is-js .sxh-mm-card, html.sx-on .sxh-mm.is-js .sxh-mm-why p, html.sx-on .sxh-mm.is-js .sxh-mm-checks span span {
    transition: opacity .32s ease, transform .32s var(--sx-ease); }
  html.sx-on .sxh-mm.is-swapping .sxh-mm-card.is-biz { opacity: 0; transform: translateX(-24px) rotate(-1.5deg); }
  html.sx-on .sxh-mm.is-swapping .sxh-mm-card.is-cha { opacity: 0; transform: translateX(24px) rotate(1.5deg); }
  html.sx-on .sxh-mm.is-swapping .sxh-mm-why p, html.sx-on .sxh-mm.is-swapping .sxh-mm-checks span span { opacity: 0; }
  html.sx-on .sxh-mm.is-js .sxh-mm-arc { transition: stroke-dasharray .55s var(--sx-ease); }
  html.sx-on .sxh-mm.is-js:not(.is-lit) .sxh-mm-arc { stroke-dasharray: 0 100; transition: none; }
  html.sx-on .sxh-mm.is-js .sxh-mm-arc.is-2 { transition-delay: .32s; }
  html.sx-on .sxh-mm.is-js .sxh-mm-arc.is-3 { transition-delay: .64s; }
  html.sx-on .sxh-mm.is-js .sxh-mm-list li { transition: opacity .4s ease, transform .45s var(--sx-ease), background-color .45s ease, border-color .45s ease; }
  html.sx-on .sxh-mm.is-js:not(.is-lit) .sxh-mm-list li { opacity: 0; transform: translateY(10px); transition: none; }
  html.sx-on .sxh-mm.is-js .sxh-mm-list li:nth-child(2) { transition-delay: .32s; }
  html.sx-on .sxh-mm.is-js .sxh-mm-list li:nth-child(3) { transition-delay: .64s; }
  /* the chosen one lights up after all three are in */
  html.sx-on .sxh-mm.is-js .sxh-mm-list li.is-chosen { transition-delay: 0s, 0s, 1.15s, 1.15s; }
  html.sx-on .sxh-mm.is-js .sxh-mm-list li.is-chosen:nth-child(2) { transition-delay: .32s, .32s, 1.15s, 1.15s; }
  html.sx-on .sxh-mm.is-js .sxh-mm-list li.is-chosen:nth-child(3) { transition-delay: .64s, .64s, 1.15s, 1.15s; }
  html.sx-on .sxh-mm.is-js:not(.is-lit) .sxh-mm-list li.is-chosen { background-color: transparent; border-color: transparent; }
  html.sx-on .sxh-mm.is-js .sxh-mm-pick { transition: opacity .3s ease 1.15s, transform .45s var(--sx-spring) 1.15s; }
  html.sx-on .sxh-mm.is-js:not(.is-lit) .sxh-mm-pick { opacity: 0; transform: scale(.6); transition: none; }
  html.sx-on .sxh-mm.is-js .sxh-mm-ring b { transition: transform .5s var(--sx-spring) .9s; }
  html.sx-on .sxh-mm.is-js:not(.is-lit) .sxh-mm-ring b { transform: scale(.7); transition: none; }
  html.sx-on .sxh-mm-sec .sxh-mm-line { background-size: 200% 100%; animation: sxh-mm-flow 2.4s linear infinite; }
}
@keyframes sxh-mm-flow { from { opacity: .55; } 50% { opacity: 1; } to { opacity: .55; } }

/* ================= 5. Follow one gift: an example trace ================= */
.sxh-tr { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.sxh-tr-card { background: #140F24; background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px); background-size: 24px 24px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 26px; padding: 28px 34px 26px; box-shadow: 0 44px 100px -44px rgba(0,0,0,.85); }
.sxh-tr-top { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.sxh-tr-title { flex-grow: 1; font-size: 16px; font-weight: 700; color: #FFFFFF; }
.sxh-tr-eg { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.sxh-tr-eg i { width: 7px; height: 7px; border-radius: 999px; background: #AE8AEA; }
.sxh-tr-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sxh-tr-narrow { display: none; max-width: 342px; margin: 8px auto 0; }
.sxh-tr-svg text { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; text-anchor: middle; fill: #FFFFFF; }
.sxh-tr-svg text.is-l { text-anchor: start; }
.sxh-tr-t { font-size: 15px; font-weight: 700; }
.sxh-tr-s { font-size: 13.5px; font-weight: 500; fill: rgba(255,255,255,.62) !important; }
.sxh-tr-amt { font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif !important; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.sxh-tr-edges path, .sxh-tr-flows path, .sxh-tr-trails path { fill: none; stroke-linecap: round; }
.sxh-tr-edges path { stroke: rgba(255,255,255,.19); stroke-width: 4; }
.sxh-tr-edges path:nth-child(-n+2) { stroke-width: 6; }
.sxh-tr-flows path { stroke: #AE8AEA; stroke-width: 1.8; opacity: .55; stroke-dasharray: 2 11; }
.sxh-tr-trails path { stroke: #AE8AEA; stroke-width: 3.5; opacity: 0; }
.sxh-tr-dot { fill: #FFFFFF; }
.sxh-tr-halo { fill: #AE8AEA; opacity: .22; transition: opacity .25s ease, transform .25s ease; transform-box: fill-box; transform-origin: center; }
.sxh-tr-pulse { fill: none; stroke: #AE8AEA; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sxh-tr-node:hover .sxh-tr-halo { opacity: .4; transform: scale(1.25); }
.sxh-tr-tick { fill: none; stroke: #6C2BD9; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sxh-tr-orb { fill: #FFFFFF; opacity: 0; filter: drop-shadow(0 0 7px #AE8AEA) drop-shadow(0 0 16px #6C2BD9); }
.sxh-tr-foot { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 14px;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.sxh-tr-update { background: #FFFFFF; border-radius: 16px; padding: 16px 18px; color: #141219; box-shadow: 0 18px 40px -22px rgba(0,0,0,.8); }
.sxh-tr-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6C2BD9; }
.sxh-tr-update p { margin: 8px 0 6px; font-size: 15px; line-height: 1.45; font-weight: 700; }
.sxh-tr-by { font-size: 12.5px; color: #8B8698; }
.sxh-tr-foot figcaption { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.78); max-width: 640px; }
@media (max-width: 760px) {
  .sxh-tr-card { padding: 20px 18px 20px; border-radius: 22px; }
  .sxh-tr-wide { display: none; }
  .sxh-tr-narrow { display: block; }
  .sxh-tr-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sxh-tr-svg .sxh-tr-t { font-size: 13px; }
  .sxh-tr-svg .sxh-tr-s { font-size: 12px; }
  .sxh-tr-svg .sxh-tr-amt { font-size: 20px; }
  .sxh-tr-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* motion: a dotted current on every line, three lights each following one route, the nodes pulsing
   in order as the light reaches them. Paused off screen by .sx-loop (sx.js). */
@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxh-tr-flows path { animation: sxh-tr-dash 1.2s linear infinite; }
  html.sx-on .sxh-tr-pulse { animation: sxh-tr-pulse 2.4s ease-out var(--d, 0s) infinite; }
  html.sx-on .sxh-tr-trails path { stroke-dasharray: 70 1000; stroke-dashoffset: 70; opacity: .85;
    animation: sxh-tr-trail 6s cubic-bezier(.42,0,.58,1) infinite; }
  html.sx-on .sxh-tr-orb { offset-rotate: 0deg; animation: sxh-tr-ride 6s cubic-bezier(.42,0,.58,1) infinite; }
  .sxh-tr-svg .is-2, .sxh-tr-svg .is-m2 { animation-delay: 2s !important; }
  .sxh-tr-svg .is-3, .sxh-tr-svg .is-m3 { animation-delay: 4s !important; }
  .sxh-tr-orb.is-1 { offset-path: path("M70,180 L600,180 C730,180 800,58 960,58"); }
  .sxh-tr-orb.is-2 { offset-path: path("M70,180 L960,180"); }
  .sxh-tr-orb.is-3 { offset-path: path("M70,180 L330,180 C470,180 540,302 690,302 L960,302"); }
  .sxh-tr-orb.is-m1 { offset-path: path("M100,40 L100,250 C100,310 171,320 171,370 L171,400"); }
  .sxh-tr-orb.is-m2 { offset-path: path("M100,40 L100,250 C100,320 292,310 292,370 L292,400"); }
  .sxh-tr-orb.is-m3 { offset-path: path("M100,40 L100,140 C100,200 50,215 50,280 L50,400"); }
}
@keyframes sxh-tr-dash { to { stroke-dashoffset: -13; } }
@keyframes sxh-tr-pulse { 0% { transform: scale(.6); opacity: .75; } 60%, 100% { transform: scale(1.9); opacity: 0; } }
@keyframes sxh-tr-trail { 0% { stroke-dashoffset: 70; } 100% { stroke-dashoffset: -930; } }
@keyframes sxh-tr-ride { 0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 93% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }