/* DigiDonate v3 — About + Contact section layer ("sxa-"). Linked after sx.css on about.html and contact.html.
   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.

   about.html
   2. Why we exist         the h2 carries data-sx-scrub="words"; beside it a faint, hesitant dashed thread is traced
                           by a confident line as you scroll and closes into a heart (scrubbed by its own --sx-p).
   3. What we believe      each dark card ends in a small dark stage grown from its own icon: the map pin taps down
                           and ripples reach nearby places · an orb rides straight from a business to a heart along the
                           icon's arrow · the speech bubble's lines write in · a balance with two different businesses
                           settles level. The card's icon box glows at each scene's key moment.
   4. Building first       a rail joins the five numbers (desktop: along each row, a carriage return through the row gap;
                           ≤1080: a spine in the left gutter with a branch to each number). Each number scrubs its own
                           --sx-p and lights at its threshold; the rail geometry and the light's position are set by a
                           small inline script on about.html (no-op under reduced motion). Each icon has a micro-loop.
   contact.html            small textless accents on the three side cards (match glass, heart orbit, paper plane).

   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, opacity, offset-distance
   and stroke-dashoffset change per frame. */

/* ================= 2. Why we exist: a hesitant thread traced into a heart ================= */
/* .sxa-why carries data-sx-scrub: --sxa-d = how much of the route is traced, --sxa-done flips once the heart closes. */
.sxa-why { position: relative; max-width: 440px; margin-top: 30px; pointer-events: none;
  --sxa-d: clamp(0, (var(--sx-p, 1) - .04) / .86, 1); --sxa-done: clamp(0, (var(--sx-p, 1) - .92) * 1000, 1); }
.sxa-why svg { display: block; width: 100%; height: auto; overflow: visible; }
.sxa-why path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sxa-why .sxa-why-fill { fill: #F4EDFE; stroke: none; opacity: calc(var(--sxa-done) * .95); transform-box: fill-box; transform-origin: 50% 60%; }
.sxa-why-ghost { stroke: #DCCDF7; stroke-width: 2.2; stroke-dasharray: 1.5 7 .5 9 3 6 .5 11; }
.sxa-why-line, .sxa-why-halo { stroke-dasharray: 1 2; stroke-dashoffset: calc(1.01 - var(--sxa-d) * 1.01); }
.sxa-why-line { stroke: url(#sxaWhyG); stroke-width: 2.6; }
.sxa-why-halo { stroke: #AE8AEA; stroke-width: 13; opacity: calc(.08 + var(--sxa-done) * .06); }
.sxa-why-glow { opacity: calc(.25 + var(--sxa-done) * .75); transform-box: fill-box; transform-origin: 50% 50%; }
.sxa-why-beat { opacity: var(--sxa-done); }
.sxa-why .sxa-why-ring { stroke: #AE8AEA; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: 50% 55%; }
.sxa-why-pen { display: none; }
@media (max-width: 1080px) { .sxa-why { margin-top: 22px; max-width: 400px; } }

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxa-why-pen { display: inline; fill: #FFFFFF; stroke: #AE8AEA; stroke-width: 1.5;
    offset-path: path("M10 116C40 116 52 96 78 98S112 124 138 118C164 112 172 86 152 84S138 114 170 116C202 118 214 98 238 102S294 118 294 68.6A28 28 0 0 1 350 53.2A28 28 0 0 1 406 68.6C406 107.1 350 140 350 140C350 140 294 107.1 294 68.6");
    offset-rotate: 0deg; offset-distance: calc(var(--sxa-d) * 100%); opacity: clamp(0, min(var(--sxa-d) * 40, (1 - var(--sxa-d)) * 40), 1); }
  html.sx-on .sxa-why-pen.is-halo { fill: rgba(174,138,234,.26); stroke: none; }
  /* once the outline closes: the heart fills with one soft beat, then a slow halo breathes out of it */
  html.sx-on .sxa-why .sxa-why-fill { transform: scale(calc(.86 + var(--sxa-done) * .14)); transition: opacity 1.1s ease, transform 1.4s var(--sx-spring); }
  html.sx-on .sxa-why-glow { transform: scale(calc(.8 + var(--sxa-done) * .2)); transition: opacity 1.2s ease, transform 1.6s var(--sx-ease); }
  html.sx-on .sxa-why-halo, html.sx-on .sxa-why-beat { transition: opacity 1s ease .2s; }
  html.sx-on .sxa-why .sxa-why-ring { animation: sxa-wring 3.2s cubic-bezier(.2,.7,.3,1) 1s infinite both; }
  html.sx-on .sxa-why .sxa-why-ring.is-b { animation-delay: 1.35s; }
}
@keyframes sxa-wring { 0% { opacity: .75; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.32); } }

/* ================= 3. What we believe: dark stages ================= */
.sxa-bc > p { margin-bottom: 6px; }
.sxa-st { position: relative; margin-top: auto; height: 120px; border-radius: 16px; overflow: hidden; isolation: isolate;
  border: 1px solid #241F30;
  background: radial-gradient(ellipse 58% 95% at 50% 62%, rgba(108,43,217,.17), rgba(108,43,217,0) 72%), #110E18;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.sxa-st::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.075) .9px, rgba(255,255,255,0) 1.5px);
  background-size: 14px 14px; background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 20%, transparent 100%); }
.sxa-st svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
@media (max-width: 1080px) { .sxa-st { height: 104px; } }

/* shared stage parts */
.sxa-st .sxa-node { fill: #1A1624; stroke: #3A3350; stroke-width: 1.5; }
.sxa-st .sxa-ic, .sxa-st .sxa-ic path, .sxa-st .sxa-ic rect { fill: none; stroke: #C9B2F2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sxa-st .sxa-ic { vector-effect: non-scaling-stroke; }
.sxa-st .sxa-ic * { vector-effect: non-scaling-stroke; }
.sxa-st [class] { transform-box: fill-box; transform-origin: 50% 50%; }

/* icon box glow at each scene's key moment */
.sxa-ib { position: relative; }
.sxa-ib::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px rgba(174,138,234,.6), 0 0 22px 3px rgba(108,43,217,.55), inset 0 0 12px rgba(174,138,234,.25); }

/* 1 Local first */
.sxa-map path { fill: none; stroke: rgba(174,138,234,.13); stroke-width: 1.3; stroke-linecap: round; }
.sxa-pl { fill: #AE8AEA; opacity: .42; }
.sxa-rip { fill: none; stroke: #AE8AEA; stroke-width: 1.4; opacity: .28; transform: scale(2.1); }
.sxa-rip.is-b { opacity: 0; }
.sxa-shd { fill: rgba(108,43,217,.55); }
.sxa-pin-h { opacity: .55; }
.sxa-pin-b { stroke: #D9C6F8; stroke-width: .6; }
.sxa-pin .sxa-pin-i { fill: #FFFFFF; stroke: none; }
.sxa-st .sxa-pin { transform-origin: 50% 100%; }

/* 2 Straight to the charity */
.sxa-pipe { fill: none; stroke: rgba(255,255,255,.075); stroke-width: 8; stroke-linecap: round; }
.sxa-cur { fill: none; stroke: #AE8AEA; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .01 11; opacity: .5; }
.sxa-tip { fill: none; stroke: #AE8AEA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.sxa-hglow { opacity: .6; }
.sxa-ring { fill: none; stroke: rgba(174,138,234,.6); stroke-width: 1.4; opacity: 0; }
.sxa-send { fill: none; stroke: rgba(174,138,234,.55); stroke-width: 1.5; opacity: 0; }
.sxa-st .sxa-orb { transform-box: view-box; transform-origin: 0 0; transform: translate(214px, 60px); }
.sxa-core { fill: #FFFFFF; }
.sxa-st-2 .sxa-hrt .sxa-node { stroke: #4A3D6B; }

/* 3 The charity speaks for itself */
.sxa-av-r { fill: none; stroke: rgba(174,138,234,.5); stroke-width: 1.3; opacity: 0; }
.sxa-bub { fill: rgba(255,255,255,.035); stroke: #3F3657; stroke-width: 1.5; stroke-linejoin: round; }
.sxa-ln { fill: none; stroke: #C9B2F2; stroke-width: 5; stroke-linecap: round; opacity: .92; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.sxa-ln.is-2 { opacity: .66; }
.sxa-ln.is-3 { opacity: .44; }
.sxa-sw { opacity: 0; }

/* 4 The same deal for every business */
.sxa-post { fill: none; stroke: #3A3350; stroke-width: 3; stroke-linecap: round; }
.sxa-base { fill: #2A2438; }
.sxa-str { fill: none; stroke: rgba(174,138,234,.35); stroke-width: 1.2; stroke-linecap: round; }
.sxa-dish { fill: rgba(174,138,234,.1); stroke: #4A3D6B; stroke-width: 1.4; stroke-linejoin: round; }
.sxa-bm { fill: none; stroke: #4A3D6B; stroke-width: 4; stroke-linecap: round; }
.sxa-bm-lit { fill: none; stroke: #AE8AEA; stroke-width: 2; stroke-linecap: round; opacity: .55; }
.sxa-piv { fill: #1A1624; stroke: #AE8AEA; stroke-width: 1.6; }
.sxa-lv-g { opacity: .7; }
.sxa-st .sxa-beam { transform-box: view-box; transform-origin: 200px 30px; }

@media (prefers-reduced-motion: no-preference) {
  /* the scene settles in a beat after its card rises */
  html.sx-on .sx-card.sx-in .sxa-st svg { transition: opacity .9s ease calc(var(--sx-b, 0) * 90ms + .45s), transform 1.1s var(--sx-ease) calc(var(--sx-b, 0) * 90ms + .45s); }
  html.sx-on .sx-card:not(.sx-in) .sxa-st svg { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); }

  html.sx-on .sxa-ib::after { animation: sxa-ibg var(--sxa-ib-t, 6s) var(--sx-loop) var(--sxa-ib-d, 1s) infinite both; }
  .sxa-bc-1 { --sxa-ib-t: 5.6s; --sxa-ib-d: 1.46s; }
  .sxa-bc-2 { --sxa-ib-t: 4s; --sxa-ib-d: 1.9s; }
  .sxa-bc-3 { --sxa-ib-t: 7s; --sxa-ib-d: 1.55s; }
  .sxa-bc-4 { --sxa-ib-t: 7s; --sxa-ib-d: 3.7s; }

  /* 1 the pin lifts, taps down, ripples spread, nearby places glint as the ripple reaches them */
  html.sx-on .sxa-pin { animation: sxa-tap 5.6s var(--sx-loop) infinite both; }
  html.sx-on .sxa-shd { animation: sxa-shd 5.6s var(--sx-loop) infinite both; }
  html.sx-on .sxa-pin-h { animation: sxa-pinh 5.6s ease infinite both; }
  html.sx-on .sxa-rip { animation: sxa-rip 5.6s cubic-bezier(.2,.7,.3,1) infinite both; }
  html.sx-on .sxa-rip.is-b { animation-delay: .4s; }
  html.sx-on .sxa-pl { animation: sxa-pl 5.6s ease calc(var(--sxa-k, 1) * .2s) infinite both; }

  /* 2 orb rides business → heart; the heart takes it in */
  html.sx-on .sxa-cur { animation: sxa-cur 1.6s linear infinite; }
  html.sx-on .sxa-orb { animation: sxa-orb 4s cubic-bezier(.45,0,.55,1) infinite both; }
  html.sx-on .sxa-trail { transform-origin: 100% 50%; animation: sxa-tail 4s linear infinite both; }
  html.sx-on .sxa-send { animation: sxa-send 4s ease-out infinite both; }
  html.sx-on .sxa-ring { animation: sxa-halo 4s cubic-bezier(.2,.7,.3,1) 1.9s infinite both; }
  html.sx-on .sxa-ring.is-b { animation-delay: 2.1s; }
  html.sx-on .sxa-hglow { animation: sxa-hglow 4s ease-out 1.86s infinite both; }
  html.sx-on .sxa-hrt { animation: sxa-beat 4s var(--sx-spring) 1.86s infinite both; }
  html.sx-on .sxa-tip { animation: sxa-tip 4s ease 1.7s infinite both; }

  /* 3 the bubble's lines write in, a soft light passes, they clear and write again */
  html.sx-on .sxa-ln { animation: sxa-write 7s var(--sx-ease) infinite both; }
  html.sx-on .sxa-ln.is-2 { animation-delay: .45s; }
  html.sx-on .sxa-ln.is-3 { animation-delay: .9s; }
  html.sx-on .sxa-sw { animation: sxa-sweep 7s var(--sx-loop) infinite both; }
  html.sx-on .sxa-av-r { animation: sxa-avr 7s cubic-bezier(.2,.7,.3,1) infinite both; }

  /* 4 the balance settles level once, with one damped swing, and then holds level: "the same deal" must never
     be shown tipped for most of the time */
  html.sx-on .sxa-beam { animation: sxa-beam1 3.8s var(--sx-loop) .5s 1 both; }
  html.sx-on .sxa-pan.is-l { animation: sxa-pan-l1 3.8s var(--sx-loop) .5s 1 both; }
  html.sx-on .sxa-pan.is-r { animation: sxa-pan-r1 3.8s var(--sx-loop) .5s 1 both; }
  html.sx-on .sxa-lv-g, html.sx-on .sxa-bm-lit { animation: sxa-level1 4.6s ease .5s 1 both; }
}
@keyframes sxa-ibg { 0% { opacity: 0; } 9% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes sxa-tap { 0% { transform: none; } 14% { transform: translate3d(0, -9px, 0); animation-timing-function: cubic-bezier(.5,0,.9,.6); }
  26% { transform: none; animation-timing-function: ease-out; } 30% { transform: scale(1.04, .94); } 37%, 100% { transform: none; } }
@keyframes sxa-shd { 0% { transform: none; opacity: 1; } 14% { transform: scale(.55); opacity: .45; } 26%, 100% { transform: none; opacity: 1; } }
@keyframes sxa-pinh { 0%, 24% { opacity: .45; } 30% { opacity: 1; } 60%, 100% { opacity: .45; } }
@keyframes sxa-rip { 0%, 25% { opacity: 0; transform: scale(1); } 27% { opacity: .85; transform: scale(1.05); } 72%, 100% { opacity: 0; transform: scale(4.6); } }
@keyframes sxa-pl { 0%, 28% { opacity: .42; transform: none; } 33% { opacity: 1; transform: scale(1.9); } 52%, 100% { opacity: .42; transform: none; } }
@keyframes sxa-cur { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -11.01; } }
@keyframes sxa-orb { 0% { opacity: 0; transform: translate(108px, 60px); } 6% { opacity: 1; } 46% { opacity: 1; transform: translate(288px, 60px); }
  50%, 100% { opacity: 0; transform: translate(290px, 60px); } }
@keyframes sxa-tail { 0%, 4% { transform: scaleX(0); } 18%, 100% { transform: scaleX(1); } }
@keyframes sxa-send { 0% { opacity: .8; transform: scale(1); } 14%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sxa-halo { 0% { opacity: .8; transform: scale(.95); } 55%, 100% { opacity: 0; transform: scale(1.8); } }
@keyframes sxa-hglow { 0% { opacity: .5; transform: scale(.9); } 12% { opacity: 1; transform: scale(1.08); } 100% { opacity: .5; transform: scale(.9); } }
@keyframes sxa-beat { 0% { transform: none; } 7% { transform: scale(1.08); } 20%, 100% { transform: none; } }
@keyframes sxa-tip { 0% { opacity: .7; transform: none; } 6% { opacity: 1; transform: translate3d(2px, 0, 0); } 20%, 100% { opacity: .7; transform: none; } }
@keyframes sxa-write { 0%, 4% { stroke-dashoffset: 1.02; opacity: 1; } 22% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 0; } 94% { stroke-dashoffset: 1.02; opacity: 0; } 100% { stroke-dashoffset: 1.02; opacity: 1; } }
@keyframes sxa-sweep { 0%, 36% { opacity: 1; transform: translate3d(0, 0, 0); } 58% { opacity: 1; transform: translate3d(320px, 0, 0); } 59%, 100% { opacity: 0; transform: translate3d(320px, 0, 0); } }
@keyframes sxa-avr { 0%, 2% { opacity: 0; transform: scale(1); } 4% { opacity: .9; } 30%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sxa-beam { 0% { transform: rotate(7deg); } 6% { transform: rotate(-4.2deg); } 11% { transform: rotate(2.4deg); } 16% { transform: rotate(-1.2deg); }
  21% { transform: rotate(.5deg); } 26%, 46% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } 56% { transform: rotate(4.2deg); }
  61% { transform: rotate(-2.4deg); } 66% { transform: rotate(1.2deg); } 71% { transform: rotate(-.5deg); } 76%, 96% { transform: rotate(0deg); } 100% { transform: rotate(7deg); } }
@keyframes sxa-pan-l { 0% { transform: translate3d(0, -12.2px, 0); } 6% { transform: translate3d(0, 7.3px, 0); } 11% { transform: translate3d(0, -4.2px, 0); }
  16% { transform: translate3d(0, 2.1px, 0); } 21% { transform: translate3d(0, -.9px, 0); } 26%, 46% { transform: none; } 50% { transform: translate3d(0, 12.2px, 0); }
  56% { transform: translate3d(0, -7.3px, 0); } 61% { transform: translate3d(0, 4.2px, 0); } 66% { transform: translate3d(0, -2.1px, 0); } 71% { transform: translate3d(0, .9px, 0); }
  76%, 96% { transform: none; } 100% { transform: translate3d(0, -12.2px, 0); } }
@keyframes sxa-pan-r { 0% { transform: translate3d(0, 12.2px, 0); } 6% { transform: translate3d(0, -7.3px, 0); } 11% { transform: translate3d(0, 4.2px, 0); }
  16% { transform: translate3d(0, -2.1px, 0); } 21% { transform: translate3d(0, .9px, 0); } 26%, 46% { transform: none; } 50% { transform: translate3d(0, -12.2px, 0); }
  56% { transform: translate3d(0, 7.3px, 0); } 61% { transform: translate3d(0, -4.2px, 0); } 66% { transform: translate3d(0, 2.1px, 0); } 71% { transform: translate3d(0, -.9px, 0); }
  76%, 96% { transform: none; } 100% { transform: translate3d(0, 12.2px, 0); } }
@keyframes sxa-beam1 { 0% { transform: rotate(7deg); } 23% { transform: rotate(-4.2deg); } 42% { transform: rotate(2.4deg); }
  62% { transform: rotate(-1.2deg); } 81% { transform: rotate(.5deg); } 100% { transform: rotate(0deg); } }
@keyframes sxa-pan-l1 { 0% { transform: translate3d(0, -12.2px, 0); } 23% { transform: translate3d(0, 7.3px, 0); } 42% { transform: translate3d(0, -4.2px, 0); }
  62% { transform: translate3d(0, 2.1px, 0); } 81% { transform: translate3d(0, -.9px, 0); } 100% { transform: none; } }
@keyframes sxa-pan-r1 { 0% { transform: translate3d(0, 12.2px, 0); } 23% { transform: translate3d(0, -7.3px, 0); } 42% { transform: translate3d(0, 4.2px, 0); }
  62% { transform: translate3d(0, -2.1px, 0); } 81% { transform: translate3d(0, .9px, 0); } 100% { transform: none; } }
@keyframes sxa-level1 { 0%, 78% { opacity: .1; } 90% { opacity: 1; } 100% { opacity: .55; } }
@keyframes sxa-level { 0%, 24% { opacity: .1; } 30% { opacity: 1; } 46% { opacity: .55; } 50%, 74% { opacity: .1; } 80% { opacity: 1; } 96% { opacity: .55; } 100% { opacity: .1; } }

/* ================= 4. What we're building first: a rail through the numbers ================= */
/* Geometry (path, number holes, --sxa-t per number, --sxa-p0/--sxa-p1) comes from the inline script on about.html,
   which adds .is-on; without it (reduced motion, no JS) the section stays exactly as designed in dd-pages.css. */
.sxa-bf { position: relative; }
.sxa-rail { display: none; }
.sxa-bi { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxa-bf.is-on { --sxa-d: clamp(0, (var(--sx-p, 1) - var(--sxa-p0, 0)) / (var(--sxa-p1, 1) - var(--sxa-p0, 0)), 1); }
  html.sx-on .sxa-bf.is-on .dp-step-top, html.sx-on .sxa-rl-tick, html.sx-on .sxa-rl-node { --sxa-lit: clamp(0, (var(--sxa-d, 1) - var(--sxa-t, 0)) * 1000, 1); }
  html.sx-on .sxa-bf.is-on .sxa-rail { display: block; position: absolute; z-index: 2; pointer-events: none; overflow: visible; }

  .sxa-rl-base { fill: none; stroke: #CDB6F4; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 9; }
  .sxa-rl-lit, .sxa-rl-halo { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2;
    stroke-dashoffset: calc(1.002 - var(--sxa-d, 1) * 1.002); }
  .sxa-rl-lit { stroke: #8E5BE6; stroke-width: 2.2; }
  .sxa-rl-halo { stroke: #AE8AEA; stroke-width: 9; opacity: .16; }
  .sxa-rl-run { offset-rotate: auto; offset-anchor: 0 0; transform-box: view-box; transform-origin: 0 0;
    offset-distance: calc(var(--sxa-d, 1) * 100%); opacity: clamp(0, min(var(--sxa-d, 1) * 40, (1 - var(--sxa-d, 1)) * 40), 1); }
  .sxa-rl-head { fill: #FFFFFF; stroke: #AE8AEA; stroke-width: 1.2; }
  .sxa-rl-glow { fill: rgba(142,91,230,.28); }
  .sxa-rl-tick { fill: none; stroke: #8E5BE6; stroke-width: 2; stroke-linecap: round; opacity: calc(.25 + var(--sxa-lit) * .75); transition: opacity .5s ease; }
  .sxa-rl-node { fill: #FFFFFF; stroke: #CDB6F4; stroke-width: 2; }
  .sxa-rl-node { transform-box: fill-box; transform-origin: 50% 50%; transition: fill .4s ease, stroke .4s ease, transform .6s var(--sx-spring); }
  html.sx-on .sxa-rl-node { fill: color-mix(in srgb, #6C2BD9 calc(var(--sxa-lit) * 100%), #FFFFFF); stroke: color-mix(in srgb, #AE8AEA calc(var(--sxa-lit) * 100%), #CDB6F4);
    transform: scale(calc(1 + var(--sxa-lit) * .25)); }

  /* the lit node: a purple disc behind the numeral (the numeral stays real text on top) */
  html.sx-on .sxa-bf.is-on .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(--sxa-lit); transform: scale(calc(.5 + var(--sxa-lit) * .5)); transition: opacity .45s ease, transform .8s var(--sx-spring); }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    html.sx-on .sxa-bf.is-on .sx-card .dp-step-n {
      background: linear-gradient(100deg, #FFFFFF 0%, #FFFFFF 38%, #F1EAFD 48%, #DFD0F7 58%, #DFD0F7 100%)
                  calc((1 - var(--sxa-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 .sxa-bf.is-on .sx-card .dp-step-n::after { animation: none; border-color: rgba(174,138,234,.75);
    opacity: calc((1 - var(--sxa-lit)) * .85); transform: scale(calc(1 + var(--sxa-lit) * .75));
    transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1); }
  html.sx-on .sxa-bf.is-on .sx-card:not(.sx-in) .dp-step-n::after { opacity: 0; transform: scale(.6); }

  /* This section is the roadmap, so nothing may read as "done / not done": the rail stays a static dotted connector,
     every number keeps the same state, and there is no travelling light (rulebook: no progress or milestone imagery;
     claims must be true today). The scroll-driven light and lit discs above are switched off here. */
  html.sx-on .sxa-bf.is-on .dp-step-top, html.sx-on .sxa-rl-tick, html.sx-on .sxa-rl-node { --sxa-lit: 0; }
  html.sx-on .sxa-rl-lit, html.sx-on .sxa-rl-halo, html.sx-on .sxa-rl-run { display: none; }
  html.sx-on .sxa-bf.is-on .sx-card .dp-step-n::after { opacity: .5; transform: none; }

  /* icon micro-loops, each telling its own line */
  html.sx-on .sxa-bi { overflow: hidden; }
  html.sx-on .sxa-bi svg, html.sx-on .sxa-bi svg path { transform-box: fill-box; transform-origin: 50% 50%; }
  /* 1 matching: the glass searches, then settles on a find */
  html.sx-on .sxa-bf-1 .sxa-bi svg { animation: sxa-seek 6.4s var(--sx-loop) .4s infinite both; }
  /* 2 a giving plan: the plan's lines are written out */
  html.sx-on .sxa-bf-2 .sxa-bi svg path:nth-child(3) { stroke-dasharray: 1 2; animation: sxa-pen 6.4s var(--sx-ease) 1.2s infinite both; }
  /* 3 DGR checks: a soft scan passes over the shield before each payment (the tick itself never animates) */
  /* 4 the charity's updates: the bubble pops in from its tail and its lines appear */
  html.sx-on .sxa-bf-4 .sxa-bi svg { transform-origin: 22% 84%; animation: sxa-pop 7s var(--sx-ease) 2.4s infinite both; }
  html.sx-on .sxa-bf-4 .sxa-bi svg path:nth-child(2) { stroke-dasharray: 1 2; animation: sxa-pen2 7s var(--sx-ease) 2.4s infinite both; }
  /* 5 receipts in one place: the top sheet lifts and settles onto the stack */
  html.sx-on .sxa-bf-5 .sxa-bi svg path:nth-child(1) { animation: sxa-drop 6s var(--sx-loop) 3.2s infinite both; }
  html.sx-on .sxa-bf-5 .sxa-bi svg path:nth-child(2) { animation: sxa-give 6s var(--sx-loop) 3.2s infinite both; }
}
@keyframes sxa-seek { 0% { transform: none; } 18% { transform: translate3d(-1.6px, -1px, 0) rotate(-8deg); } 38% { transform: translate3d(1.6px, -1.4px, 0) rotate(6deg); }
  52% { transform: translate3d(0, 0, 0) scale(1.12); } 62%, 100% { transform: none; } }
@keyframes sxa-pen { 0% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; } 84% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; }
  96% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 1; } }
@keyframes sxa-pop { 0% { transform: none; } 6% { transform: scale(.84); } 15% { transform: scale(1.08); } 24%, 100% { transform: none; } }
@keyframes sxa-pen2 { 0%, 12% { stroke-dashoffset: 1; opacity: 1; } 34% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 93% { stroke-dashoffset: 0; opacity: 0; }
  97% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 1; } }
@keyframes sxa-drop { 0% { transform: none; } 14% { transform: translate3d(0, -3.5px, 0); animation-timing-function: cubic-bezier(.5,0,.9,.6); }
  24% { transform: translate3d(0, .8px, 0); animation-timing-function: ease-out; } 32%, 100% { transform: none; } }
@keyframes sxa-give { 0%, 22% { transform: none; } 26% { transform: translate3d(0, .9px, 0); } 36%, 100% { transform: none; } }

/* ================= contact.html: side-card accents (each sits in its card's icon row, right-aligned) ================= */
.sxa-ca { position: absolute; top: 28px; right: 28px; width: 150px; height: 52px; pointer-events: none; }
.sxa-ca svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sxa-ca [class] { transform-box: fill-box; transform-origin: 50% 50%; }
@media (max-width: 360px) { .sxa-ca { width: 122px; right: 22px; } }

/* 1 Businesses (dark): a glass looks over three charity tiles and settles on one, which lifts */
.sxa-ca-tb { fill: rgba(255,255,255,.04); stroke: #3A3350; stroke-width: 1.3; }
.sxa-ca-ti path { fill: none; stroke: #AE8AEA; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sxa-ca-tl { fill: rgba(108,43,217,.24); stroke: #8E5BE6; stroke-width: 1.3; }
.sxa-ca-t.is-2 { transform: translate3d(0, -2px, 0); }
.sxa-ca-ring { fill: none; stroke: rgba(174,138,234,.55); stroke-width: 1.3; }
.sxa-ca .sxa-ca-glass { transform-box: view-box; transform-origin: 0 0; transform: translate(75px, 24px); }
.sxa-ca-lens { fill: rgba(174,138,234,.14); stroke: #E6D9FB; stroke-width: 2; }
.sxa-ca-hdl { fill: none; stroke: #E6D9FB; stroke-width: 2.8; stroke-linecap: round; }

/* 2 Charities: a heart with a slow orbit around it, soft halos */
.sxa-ca-orb-b { fill: none; stroke: #DCCDF7; stroke-width: 1.3; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.sxa-ca-hb { fill: #F5F0FC; stroke: #DFD0F7; stroke-width: 1.2; }
.sxa-ca-hi path { fill: none; stroke: #6C2BD9; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.sxa-ca-halo { fill: none; stroke: #AE8AEA; stroke-width: 1.2; opacity: 0; }
.sxa-ca .sxa-ca-sat { fill: #FFFFFF; stroke: #8E5BE6; stroke-width: 1.6; transform-box: view-box; transform-origin: 0 0;
  offset-path: path("M144 26A50 15 0 0 1 44 26A50 15 0 0 1 144 26"); offset-rotate: 0deg; offset-distance: 30%; }
.sxa-ca .sxa-ca-sat.is-b { opacity: 0; }

/* 3 Email us: a paper plane glides along a dashed route, drawing it as it goes */
.sxa-ca-route { fill: none; stroke: #DCCDF7; stroke-width: 1.4; stroke-dasharray: 3 5; stroke-linecap: round; }
.sxa-ca-drawn { fill: none; stroke: #8E5BE6; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: .38; opacity: .7; }
.sxa-ca .sxa-ca-plane { transform-box: view-box; transform-origin: 0 0; offset-path: path("M8 44C40 46 52 22 76 26S112 44 140 12"); offset-rotate: auto; offset-distance: 62%; }
.sxa-ca-pl { fill: #F5F0FC; stroke: #6C2BD9; stroke-width: 1.4; stroke-linejoin: round; }
.sxa-ca-pf { fill: none; stroke: #6C2BD9; stroke-width: 1.2; stroke-linecap: round; }

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sx-card.sx-in .sxa-ca { transition: opacity .8s ease .5s, transform 1s var(--sx-ease) .5s; }
  html.sx-on .sx-card:not(.sx-in) .sxa-ca { opacity: 0; transform: translate3d(10px, 0, 0); }

  html.sx-on .sxa-ca .sxa-ca-glass { animation: sxa-glass 7s var(--sx-loop) .8s infinite both; }
  html.sx-on .sxa-ca-t.is-2 { animation: sxa-pick 7s var(--sx-ease) .8s infinite both; }
  html.sx-on .sxa-ca-tl { animation: sxa-pickb 7s ease .8s infinite both; }
  html.sx-on .sxa-ca-ring { animation: sxa-pickr 7s cubic-bezier(.2,.7,.3,1) .8s infinite both; }

  html.sx-on .sxa-ca .sxa-ca-sat { animation: sxa-orbit 9s linear infinite, sxa-front 9s linear infinite; }
  html.sx-on .sxa-ca .sxa-ca-sat.is-b { animation: sxa-orbit 9s linear infinite, sxa-back 9s linear infinite; }
  html.sx-on .sxa-ca-halo { animation: sxa-chalo 4.5s cubic-bezier(.2,.7,.3,1) 1s infinite both; }
  html.sx-on .sxa-ca-halo.is-b { animation-delay: 1.4s; }

  html.sx-on .sxa-ca .sxa-ca-plane { animation: sxa-fly 6.5s cubic-bezier(.45,0,.4,1) .6s infinite both; }
  html.sx-on .sxa-ca-drawn { animation: sxa-route 6.5s cubic-bezier(.45,0,.4,1) .6s infinite both; }
}
@keyframes sxa-glass { 0% { opacity: 0; transform: translate(29px, 24px); } 8% { opacity: 1; transform: translate(29px, 24px); }
  30% { transform: translate(121px, 24px); } 40% { transform: translate(121px, 24px); } 56%, 88% { opacity: 1; transform: translate(75px, 24px); }
  96%, 100% { opacity: 0; transform: translate(75px, 24px); } }
@keyframes sxa-pick { 0%, 54% { transform: none; } 62%, 88% { transform: translate3d(0, -2px, 0); } 96%, 100% { transform: none; } }
@keyframes sxa-pickb { 0%, 54% { opacity: 0; } 62%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes sxa-pickr { 0%, 56% { opacity: 0; transform: scale(.8); } 62% { opacity: 1; transform: scale(1); } 76%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes sxa-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes sxa-front { 0%, 49.5% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sxa-back { 0%, 49.5% { opacity: 0; } 50%, 100% { opacity: .55; } }
@keyframes sxa-chalo { 0% { opacity: .7; transform: scale(1); } 50%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes sxa-fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 68% { offset-distance: 100%; opacity: 1; } 76%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes sxa-route { 0% { stroke-dashoffset: 1; opacity: .7; } 68% { stroke-dashoffset: 0; opacity: .7; } 80% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }