/* DigiDonate v3 — For businesses section layer ("sxb-"). Linked after sx.css and sx-kit.css on for-businesses.html only.
   Builds on the engine hooks (.sx-in, .sx-loop/.sx-run, --sx-p); it never observes anything itself and writes no text.
   Every decorative element it styles is aria-hidden and textless.

   2. Why businesses sign up   kit scenes (see-funded / status / direct / nolock / team), no extra CSS.

   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). */

/* ================= 1. Built for businesses like yours: "finding the right charity" accent =================
   Desktop only (≥1000px), in the empty corner beside the badge/eyebrow, above the statement heading
   (absolute inside .dp-head, so the engine's statement detection and the layout are untouched).
   Story (9 s loop, textless): a magnifier glides over four charity tiles, comes back and settles on one;
   it lifts with a ring and glow while a dashed connector draws from the business node to it. */
.sxb-find { display: none; }
@media (min-width: 1000px) {
  .sxb-s1 .dp-head { position: relative; }
  .sxb-find { display: block; position: absolute; top: 4px; right: 0; width: clamp(340px, 31vw, 410px); pointer-events: none; }
  .sxb-find svg { display: block; width: 100%; height: auto; overflow: visible; }
}
.sxb-find .sxb-a { transform-box: fill-box; transform-origin: 50% 50%; }
.sxb-f-dim { opacity: .5; }
.sxb-f-lift { transform: translateY(-6px); }
.sxb-f-sh { transform: scale(.82); opacity: .55; }
.sxb-f-peek { opacity: 0; }
.sxb-f-ring { fill: none; stroke: #6C2BD9; stroke-width: 1.8; filter: drop-shadow(0 0 6px rgba(174,138,234,.85)); }
.sxb-f-link { fill: none; stroke: #9469E3; stroke-width: 1.7; stroke-linecap: round; stroke-dashoffset: 0; }
.sxb-f-end { fill: #FFFFFF; stroke: #6C2BD9; stroke-width: 1.6; }
.sxb-f-hit, .sxb-f-bp { fill: none; stroke: #AE8AEA; stroke-width: 1.4; opacity: 0; }
.sxb-f-mag { transform: translate(18px, 14px); transform-box: view-box; transform-origin: 0 0; }

@media (prefers-reduced-motion: no-preference) {
  /* entrance: the scene fades up after the heading's first words, tiles settle in one by one */
  html.sx-on .sxb-find { transition: opacity .9s ease .35s, transform 1.2s var(--sx-ease) .35s; }
  html.sx-on .sx-head:not(.sx-in) .sxb-find { opacity: 0; transform: translate3d(0, 10px, 0); }
  html.sx-on .sxb-f-in { transform-box: fill-box; transform-origin: 50% 100%;
    transition: opacity .6s ease calc(.45s + var(--i) * 90ms), transform .9s var(--sx-spring) calc(.45s + var(--i) * 90ms); }
  html.sx-on .sx-head:not(.sx-in) .sxb-f-in { opacity: 0; transform: translateY(8px) scale(.94); }

  /* the loop starts on reveal, after the entrance (one shared 9 s timeline) */
  html.sx-on .sx-head.sx-in .sxb-find .sxb-a { animation-duration: 9s; animation-delay: 1.1s; animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65,0,.35,1); animation-fill-mode: both; }
  html.sx-on .sx-head.sx-in .sxb-f-mag { animation-name: sxb-f-mag; }
  html.sx-on .sx-head.sx-in .sxb-f-p1 { animation-name: sxb-f-p1; }
  html.sx-on .sx-head.sx-in .sxb-f-p2 { animation-name: sxb-f-p2; }
  html.sx-on .sx-head.sx-in .sxb-f-p3 { animation-name: sxb-f-p3; }
  html.sx-on .sx-head.sx-in .sxb-f-p4 { animation-name: sxb-f-p4; }
  html.sx-on .sx-head.sx-in .sxb-f-dim { animation-name: sxb-f-dim; }
  html.sx-on .sx-head.sx-in .sxb-f-lift { animation-name: sxb-f-lift; animation-timing-function: cubic-bezier(.3,1.5,.6,1); }
  html.sx-on .sx-head.sx-in .sxb-f-sh { animation-name: sxb-f-sh; }
  html.sx-on .sx-head.sx-in .sxb-f-ring, html.sx-on .sx-head.sx-in .sxb-f-pick,
  html.sx-on .sx-head.sx-in .sxb-f-glow { animation-name: sxb-f-on; }
  html.sx-on .sx-head.sx-in .sxb-f-link { animation-name: sxb-f-link; animation-timing-function: cubic-bezier(.45,0,.25,1); }
  html.sx-on .sx-head.sx-in .sxb-f-e1 { animation-name: sxb-f-e1; }
  html.sx-on .sx-head.sx-in .sxb-f-e2 { animation-name: sxb-f-e2; }
  html.sx-on .sx-head.sx-in .sxb-f-hit { animation-name: sxb-f-hit; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  html.sx-on .sx-head.sx-in .sxb-f-bp { animation-name: sxb-f-bp; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
}
@keyframes sxb-f-mag {
  0% { transform: translate(-196px, 16px) scale(.8); opacity: 0; }
  5%, 12% { transform: translate(-132px, 0) scale(1); opacity: 1; }
  18%, 24% { transform: translate(-66px, -2px) scale(1); opacity: 1; }
  30%, 34% { transform: translate(0, 0) scale(1); opacity: 1; }
  40%, 45% { transform: translate(66px, -1px) scale(1); opacity: 1; }
  53% { transform: translate(-3px, 0) scale(1); opacity: 1; }
  56% { transform: translate(0, 0) scale(1); opacity: 1; }
  63%, 91% { transform: translate(18px, 14px) scale(1); opacity: 1; }
  96% { transform: translate(26px, 20px) scale(.9); opacity: 0; }
  100% { transform: translate(-196px, 16px) scale(.8); opacity: 0; }
}
@keyframes sxb-f-p1 { 0%, 4% { opacity: 0; } 7%, 12% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes sxb-f-p2 { 0%, 17% { opacity: 0; } 20%, 24% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes sxb-f-p3 { 0%, 29% { opacity: 0; } 32%, 34% { opacity: 1; } 38%, 52% { opacity: 0; } 55% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes sxb-f-p4 { 0%, 39% { opacity: 0; } 42%, 45% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes sxb-f-dim { 0%, 57% { opacity: 1; } 63%, 92% { opacity: .5; } 98%, 100% { opacity: 1; } }
@keyframes sxb-f-lift { 0%, 56% { transform: translateY(0); } 62%, 92% { transform: translateY(-6px); } 98%, 100% { transform: translateY(0); } }
@keyframes sxb-f-sh { 0%, 56% { transform: scale(1); opacity: 1; } 62%, 92% { transform: scale(.82); opacity: .55; } 98%, 100% { transform: scale(1); opacity: 1; } }
@keyframes sxb-f-on { 0%, 56% { opacity: 0; } 61%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes sxb-f-link { 0%, 60% { stroke-dashoffset: 100; opacity: 0; } 61% { stroke-dashoffset: 100; opacity: 1; } 76%, 92% { stroke-dashoffset: 0; opacity: 1; }
                        96% { stroke-dashoffset: 0; opacity: 0; } 97%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes sxb-f-e1 { 0%, 60% { opacity: 0; transform: scale(.3); } 63%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes sxb-f-e2 { 0%, 75% { opacity: 0; transform: scale(.3); } 78% { opacity: 1; transform: scale(1.35); }
                      81%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.3); } }
@keyframes sxb-f-hit { 0%, 75% { opacity: 0; transform: scale(.5); } 76% { opacity: .85; transform: scale(.5); } 90%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes sxb-f-bp { 0%, 60% { opacity: 0; transform: scale(1); } 61% { opacity: .75; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.4); } }

/* ================= 3. Giving you can follow: receipt + toggle scene, list → card connector =================
   Top of the tint side card (kit stage, .sx-k.is-on-tint; textless): the charity's heart node prints a receipt slip
   (abstract lines, zig-zag edge) out of a slot; beside it a statement card whose toggle a cursor flips off and back on,
   freely (the statement of intention isn't binding). The loop starts when the card is revealed. Desktop (≥1081px):
   a thin dotted connector draws from the list to the card, with a soft light passing along it now and then. */
.sxb-rt { margin-bottom: 6px; }
.sxb-rt .sxb-a { transform-box: fill-box; transform-origin: 50% 50%; }
.sxb-rt-paper { fill: #FFFFFF; stroke: #D9CBF4; stroke-width: 1.1; stroke-linejoin: round; filter: drop-shadow(0 6px 7px rgba(78,27,165,.14)); }
.sxb-rt-slot { fill: #EEE6FB; stroke: #DCCBF7; stroke-width: 1; }
.sxb-rt-slot-on { fill: #9B70E8; opacity: 0; filter: drop-shadow(0 0 3px rgba(174,138,234,.9)); }
.sxb-rt-ring, .sxb-rt-rip { fill: none; stroke: #AE8AEA; stroke-width: 1.5; opacity: 0; }
.sxb-rt-hon { opacity: 0; }
.sxb-rt-glow { opacity: .55; }
.sxb-rt-track { fill: #E9E1F6; stroke: #DCCFF1; stroke-width: 1; }
.sxb-rt-on { fill: #6C2BD9; filter: drop-shadow(0 3px 6px rgba(108,43,217,.4)); }
.sxb-rt-kn { fill: #FFFFFF; filter: drop-shadow(0 1.5px 2px rgba(46,16,101,.3)); }
.sxb-rt-cur { opacity: 0; }
.sxb-rt-cp { fill: #FFFFFF; stroke: #4E1BA5; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(78,27,165,.28)); }

.sxb-link { display: none; }
@media (min-width: 1081px) {
  .sxb-s3-side { position: relative; }
  .sxb-link { display: block; position: absolute; right: 100%; top: 50%; width: 88px; height: 14px; margin-top: -7px; pointer-events: none; }
  .sxb-link i { position: absolute; display: block; }
  .sxb-link-ln { left: 10px; right: 4px; top: 6px; height: 2px; border-radius: 2px;
    background-image: radial-gradient(circle, #B597EE 0.9px, rgba(181,151,238,0) 1.3px); background-size: 6px 2px; background-position: 0 50%;
    transform-origin: 0 50%; }
  .sxb-link-end { right: -5px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; border: 2px solid #AE8AEA;
    box-shadow: 0 0 0 4px rgba(174,138,234,.16), 0 0 10px rgba(174,138,234,.6); box-sizing: border-box; }
  .sxb-link-run { left: 0; top: 5px; width: 30px; height: 4px; border-radius: 4px; opacity: 0;
    background: linear-gradient(90deg, rgba(174,138,234,0), rgba(155,112,232,.75) 70%, #FFFFFF);
    box-shadow: 0 0 8px rgba(174,138,234,.6); }
}

/* The plan card shows no on/off switch: a switch resting "on" reads as a standing setting such as automatic
   giving, which the site must never imply. The card stays a plain giving plan; the receipt tells the story. */
.sxb-rt-track, .sxb-rt-on, .sxb-rt-knob, .sxb-rt-cur, .sxb-rt-rip { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .dp-card.sx-in .sxb-rt .sxb-a { animation-duration: 9s; animation-delay: .7s; animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65,0,.35,1); animation-fill-mode: both; }
  html.sx-on .dp-card.sx-in .sxb-rt-slip { animation-name: sxb-rt-slip; }
  html.sx-on .dp-card.sx-in .sxb-rt-slot-on { animation-name: sxb-rt-slot; }
  html.sx-on .dp-card.sx-in .sxb-rt-ring { animation-name: sxb-rt-ring; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  html.sx-on .dp-card.sx-in .sxb-rt-hon { animation-name: sxb-rt-hon; }
  html.sx-on .dp-card.sx-in .sxb-rt-glow { animation-name: sxb-rt-glow; }
  html.sx-on .dp-card.sx-in .sxb-rt-on { animation-name: sxb-rt-on; }
  html.sx-on .dp-card.sx-in .sxb-rt-knob { animation-name: sxb-rt-knob; }
  html.sx-on .dp-card.sx-in .sxb-rt-cur { animation-name: sxb-rt-cur; transform-origin: 22% 16%; }
  html.sx-on .dp-card.sx-in .sxb-rt-rip { animation-name: sxb-rt-rip; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

  /* connector: draws in once the card is revealed, then a soft light passes along it */
  html.sx-on .sxb-link-ln { transition: transform 1s var(--sx-ease) .25s; }
  html.sx-on .sxb-link-end { transition: opacity .5s ease .95s, transform .7s var(--sx-spring) .95s; }
  html.sx-on .sxb-s3-side:not(:has(> .dp-card.sx-in)) .sxb-link-ln { transform: scaleX(0); }
  html.sx-on .sxb-s3-side:not(:has(> .dp-card.sx-in)) .sxb-link-end { opacity: 0; transform: scale(.3); }
  html.sx-on .sxb-s3-side:has(> .dp-card.sx-in) .sxb-link-run { animation: sxb-link-run 4.5s cubic-bezier(.45,0,.3,1) 1.4s infinite both; }
}
@keyframes sxb-rt-slip {
  0%, 4% { transform: translateY(-70px); opacity: 1; animation-timing-function: cubic-bezier(.3,.1,.3,1); }
  26% { transform: translateY(0); }
  27.5% { transform: translateY(1.4px); }
  29%, 84% { transform: translateY(0); opacity: 1; }
  90% { transform: translateY(8px); opacity: 0; }
  92% { transform: translateY(-70px); opacity: 0; }
  94%, 100% { transform: translateY(-70px); opacity: 1; }
}
@keyframes sxb-rt-slot { 0%, 5% { opacity: 0; } 8%, 24% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes sxb-rt-ring { 0%, 3% { opacity: 0; transform: scale(1); } 4% { opacity: .75; transform: scale(1); } 18%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes sxb-rt-hon { 0%, 4% { opacity: 0; } 8%, 26% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes sxb-rt-glow { 0%, 4% { opacity: .4; } 10%, 26% { opacity: 1; } 40%, 100% { opacity: .4; } }
@keyframes sxb-rt-on { 0%, 45% { opacity: 1; } 48%, 71% { opacity: 0; } 74%, 100% { opacity: 1; } }
@keyframes sxb-rt-knob {
  0%, 45% { transform: translateX(0); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  49%, 71% { transform: translateX(-22px); animation-timing-function: cubic-bezier(.3,1.4,.5,1); }
  75%, 100% { transform: translateX(0); }
}
@keyframes sxb-rt-cur {
  0%, 33% { transform: translate(34px, 30px) scale(1); opacity: 0; }
  40%, 43% { transform: translate(0, 0) scale(1); opacity: 1; }
  44.5% { transform: translate(0, 0) scale(.86); opacity: 1; }
  46.5% { transform: translate(0, 0) scale(1); opacity: 1; }
  53% { transform: translate(16px, 14px) scale(1); opacity: 1; }
  64%, 69% { transform: translate(0, 0) scale(1); opacity: 1; }
  70.5% { transform: translate(0, 0) scale(.86); opacity: 1; }
  72.5% { transform: translate(0, 0) scale(1); opacity: 1; }
  80%, 100% { transform: translate(34px, 30px) scale(1); opacity: 0; }
}
@keyframes sxb-rt-rip { 0%, 44% { opacity: 0; transform: scale(.6); } 44.5% { opacity: .8; transform: scale(.6); } 54% { opacity: 0; transform: scale(1.7); }
                        70% { opacity: 0; transform: scale(.6); } 70.5% { opacity: .8; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sxb-link-run { 0% { transform: translateX(-10px); opacity: 0; } 8% { opacity: 1; } 30% { transform: translateX(62px); opacity: 1; }
                          36%, 100% { transform: translateX(70px); opacity: 0; } }

/* ================= 4. Plans: the Facilitated notes =================
   The notes under the table get the same soft lilac as the engine's Facilitated column band: a panel that wipes in
   from a purple edge drawn top to bottom, then one slow sheen. Panel + edge are pseudo-elements, the sheen an
   aria-hidden span; the text itself is never clipped (the engine reveals the list items as usual). */
.sxb-fac { position: relative; isolation: isolate; padding: 26px 28px 28px 24px; border-radius: 18px; overflow: hidden; }
.sxb-fac::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, #EFE6FD 0%, #F5F0FD 45%, rgba(248,245,254,.55) 78%, rgba(255,255,255,0) 100%);
  box-shadow: inset 0 0 0 1px rgba(108,43,217,.09); }
.sxb-fac::after { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; pointer-events: none;
  background: linear-gradient(180deg, #6C2BD9, #AE8AEA); box-shadow: 0 0 10px rgba(174,138,234,.75); transform-origin: 50% 0; }
.sxb-fac-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75) 50%, rgba(255,255,255,0)); transform: translateX(-110%) skewX(-16deg); }
@media (max-width: 700px) { .sxb-fac { padding: 22px 18px 24px 20px; border-radius: 16px; } }

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxb-fac::after { transition: transform 1s var(--sx-ease) .1s; }
  html.sx-on .sxb-fac::before { transition: clip-path 1.2s var(--sx-ease) .45s, opacity .6s ease .45s; }
  html.sx-on .sxb-fac:not(.sx-in)::after { transform: scaleY(0); }
  html.sx-on .sxb-fac:not(.sx-in)::before { clip-path: inset(0 100% 0 0 round 18px); opacity: 0; }
  html.sx-on .sxb-fac.sx-in .sxb-fac-sheen { animation: sxb-fac-sheen 1.8s cubic-bezier(.45,0,.25,1) 1.5s both; }
}
@keyframes sxb-fac-sheen { 0% { opacity: 0; transform: translateX(-110%) skewX(-16deg); } 15% { opacity: 1; }
                           85% { opacity: 1; } 100% { opacity: 0; transform: translateX(290%) skewX(-16deg); } }