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

   1. "You don't need to be big…"   charity tiles of clearly different sizes, each with the same heart, lift and
                                     glow in turn with exactly the same treatment (no ticks, no ranking).
   2. Six reasons grid               each existing .dp-icon draws on at reveal, then plays a small loop that fits
                                     its card (orb straight into the arrow, receipt slides out, lines write…).
   3. What we ask / never ask        a phone button gets tapped (ripple) + a calendar page turns; a one-way
                                     business → charity line with nothing coming back.
   4. The charity's monthly update   the example card writes itself once: tag, words, divider, soft glow; then rests.
   5. Final CTA                      a heart node with soft halo rings radiating around the buttons.

   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,
   stroke-dashoffset and one-shot clip-path animate. */

/* ================= 1. Every size, same treatment ================= */
.sxc-sz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 56px; align-items: center; }
.sxc-sz > .dp-head { min-width: 0; }
.sxc-sz-ill { min-width: 0; }
.sxc-sz-stage { position: relative; width: 100%; aspect-ratio: 100 / 45; container-type: inline-size; isolation: isolate;
  border-radius: 24px; overflow: hidden; border: 1px solid #ECE4F8;
  background: radial-gradient(ellipse 60% 70% at 50% 58%, rgba(174,138,234,.17), rgba(174,138,234,0) 72%),
              linear-gradient(180deg, #FCFAFF 0%, #F5EFFD 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 30px 60px -44px rgba(78,27,165,.45); }
.sxc-sz-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(108,43,217,.15) .9px, rgba(108,43,217,0) 1.4px);
  background-size: 14px 14px; background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 62% 80% at 50% 50%, #000 10%, rgba(0,0,0,0) 92%);
          mask-image: radial-gradient(ellipse 62% 80% at 50% 50%, #000 10%, rgba(0,0,0,0) 92%); }

/* a tile: --s size and --x / --y centre, all in % of the stage width / height (px fallback first) */
.sxc-t { position: absolute; display: block;
  width: calc(var(--s) * 4.4px); height: calc(var(--s) * 4.4px);
  left: calc(var(--x) * 1% - var(--s) * 2.2px); top: calc(var(--y) * 1% - var(--s) * 2.2px);
  width: calc(var(--s) * 1cqw); height: calc(var(--s) * 1cqw);
  left: calc(var(--x) * 1% - var(--s) * .5cqw); top: calc(var(--y) * 1% - var(--s) * .5cqw); }
.sxc-t > span, .sxc-t-b > span { position: absolute; display: block; }
.sxc-t-b { inset: 0; border-radius: 27%; background: #FFFFFF; border: 1px solid #E5DCF4;
  box-shadow: 0 1px 2px rgba(78,27,165,.06), 0 12px 22px -14px rgba(78,27,165,.34); }
.sxc-t-sh { left: 14%; right: 14%; top: calc(100% + 6%); height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(78,27,165,.16), rgba(78,27,165,0)); }
.sxc-t-lit, .sxc-t-ring { inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; }
.sxc-t-lit { border: 2px solid #AE8AEA;
  box-shadow: 0 0 0 4px rgba(174,138,234,.2), 0 0 22px rgba(174,138,234,.55), 0 18px 30px -12px rgba(108,43,217,.55); }
.sxc-t-ring { border: 1.5px solid rgba(108,43,217,.42); }
.sxc-t-h { left: 24%; top: 24%; width: 52%; height: 52%; border-radius: 50%; background: #F5F0FC; border: 1px solid #E4D7F8;
  display: flex !important; align-items: center; justify-content: center; }
.sxc-t-h svg { width: 58%; height: 58%; fill: none; stroke: #6C2BD9; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.sxc-t-h.is-on { opacity: 0; border-color: transparent;
  background: radial-gradient(circle at 50% 30%, #8C58EE 0%, #6C2BD9 60%, #5A21BD 100%);
  box-shadow: 0 6px 14px -6px rgba(108,43,217,.8); }
.sxc-t-h.is-on svg { fill: #FFFFFF; stroke: #FFFFFF; }

@media (max-width: 1080px) {
  .sxc-sz { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sxc-sz-ill { width: 100%; max-width: 560px; }
}
@media (max-width: 700px) {
  .sxc-sz { gap: 32px; }
  .sxc-sz-stage { border-radius: 18px; aspect-ratio: 100 / 50; }
}

@media (prefers-reduced-motion: no-preference) {
  /* entrance: the stage fades up, the tiles settle in one by one */
  html.sx-on .sxc-sz-ill.sx-in { transition: opacity .9s ease .1s, transform 1.1s var(--sx-ease) .1s; }
  html.sx-on .sxc-sz-ill:not(.sx-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
  html.sx-on .sxc-sz-ill.sx-in .sxc-t { transition: opacity .6s ease calc(.35s + var(--k) * 110ms), transform .9s var(--sx-spring) calc(.35s + var(--k) * 110ms); }
  html.sx-on .sxc-sz-ill:not(.sx-in) .sxc-t { opacity: 0; transform: translate3d(0, 16px, 0) scale(.7); }

  /* the loop: one tile at a time, identical lift, glow, ring and heart beat (7.5 s cycle, 1.5 s apart) */
  html.sx-on .sxc-sz-ill.sx-in .sxc-t > *, html.sx-on .sxc-sz-ill.sx-in .sxc-t-b > * {
    animation-duration: 7.5s; animation-iteration-count: infinite; animation-fill-mode: both;
    animation-delay: calc(1.5s + var(--k) * 1.5s); }
  html.sx-on .sxc-sz-ill.sx-in .sxc-t-b { animation-name: sxc-lift; animation-timing-function: var(--sx-loop); }
  html.sx-on .sxc-sz-ill.sx-in .sxc-t-sh { animation-name: sxc-shadow; animation-timing-function: var(--sx-loop); }
  html.sx-on .sxc-sz-ill.sx-in .sxc-t-lit { animation-name: sxc-lit; animation-timing-function: ease; }
  html.sx-on .sxc-sz-ill.sx-in .sxc-t-ring { animation-name: sxc-ring; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  html.sx-on .sxc-sz-ill.sx-in .sxc-t-h.is-on { animation-name: sxc-heart; animation-timing-function: ease; }
}
@keyframes sxc-lift { 0% { transform: translate3d(0, 0, 0); } 6%, 17% { transform: translate3d(0, -8px, 0); } 25%, 100% { transform: translate3d(0, 0, 0); } }
@keyframes sxc-shadow { 0% { transform: none; opacity: 1; } 6%, 17% { transform: scale(.76, .9); opacity: .5; } 25%, 100% { transform: none; opacity: 1; } }
@keyframes sxc-lit { 0% { opacity: 0; } 5%, 17% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes sxc-ring { 0%, 4% { opacity: 0; transform: scale(1); } 6% { opacity: .85; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.36); } }
@keyframes sxc-heart { 0% { opacity: 0; transform: scale(.9); } 5% { opacity: 1; transform: scale(1); } 8% { transform: scale(1.14); }
  11% { transform: scale(1); } 17% { opacity: 1; transform: scale(1); } 25%, 100% { opacity: 0; transform: scale(1); } }

/* ================= 2. Six reasons: a bespoke moment for each existing icon ================= */
/* The icons keep their own shapes; each stroke draws on when its card is revealed, then a small loop plays:
   1 coins: a light passes over the intact stack · 2 arrow: an orb rides straight into the arrowhead ·
   3 receipt: the slip slides out and its lines write · 4 bubble: its plain lines rewrite · 5 shield: a soft light runs
   round the edge (the tick is never drawn or animated) · 6 sparkle: a quiet twinkle, a small one comes and goes.
   Movement is done on HTML layers (the svg element, orb, trail, rings) so it stays on the compositor; only the short
   line rewrites and edge lights animate inside the svg. */
.sxc-ic { position: relative; overflow: hidden; isolation: isolate; }
.sxc-ic svg { position: relative; }
.sxc-ic > i { position: absolute; display: block; pointer-events: none; }
.sxc-ic-g { inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(174,138,234,.6), rgba(174,138,234,0) 70%); }
.sxc-ic-sheen { top: -20%; bottom: -20%; left: 0; width: 46%; opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9) 50%, rgba(255,255,255,0));
  transform: translateX(-140%) skewX(-18deg); }
.sxc-ic .sxc-rim, .sxc-ic .sxc-glint { opacity: 0; }
.sxc-ic .sxc-rim { stroke: #FFFFFF; stroke-width: 1.1; stroke-dasharray: .2 .8; }
.sxc-ic .sxc-glint { stroke: #B896EE; stroke-width: 4.8; stroke-dasharray: .18 .82; }
.sxc-ic .sxc-paper { fill: #FFFFFF; stroke: none; }
/* arrow: orb + trail + arrival ring, positioned from the icon centre (svg 24px, arrow shaft at its middle) */
.sxc-ic-orb { left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -12px; border-radius: 50%; opacity: 0;
  background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #6C2BD9, 0 0 6px 1px rgba(174,138,234,.9); }
.sxc-ic-tr { left: 50%; top: 50%; width: 12px; height: 3px; margin: -1.5px 0 0 -21px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, rgba(174,138,234,0), #B896EE); transform-origin: 100% 50%; }
.sxc-ic-tip { left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 1px; border-radius: 50%; opacity: 0;
  border: 1.2px solid #AE8AEA; }
/* sparkle: the small companion, bottom right */
.sxc-ic-mini { right: 9px; bottom: 9px; width: 9px; height: 9px; opacity: 0; }
.sxc-ic-mini svg { display: block; width: 100%; height: 100%; fill: #FFFFFF; stroke: #6C2BD9; stroke-width: 2.2; }
.sxc-ic-6 > svg { transform-origin: 50% 43.75%; }

@media (prefers-reduced-motion: no-preference) {
  /* reveal: the box settles, every stroke draws on (the shield's tick and the paper only fade in) */
  html.sx-on .sx-card.sx-in .sxc-ic { transition: transform .9s var(--sx-spring) calc(var(--sx-b, 0) * 90ms + .3s); }
  html.sx-on .sx-card:not(.sx-in) .sxc-ic { transform: scale(.78); }
  html.sx-on .sxc-ic .sxc-d { stroke-dasharray: 1 2; }
  html.sx-on .sx-card.sx-in .sxc-ic .sxc-d { transition: stroke-dashoffset 1.15s var(--sx-ease) calc(var(--sx-b, 0) * 90ms + .4s + var(--sxc-k, 0) * 160ms); }
  html.sx-on .sx-card:not(.sx-in) .sxc-ic .sxc-d { stroke-dashoffset: 1.05; }
  html.sx-on .sx-card.sx-in .sxc-ic .sxc-paper, html.sx-on .sx-card.sx-in .sxc-ic .sxc-still { transition: opacity .7s ease calc(var(--sx-b, 0) * 90ms + 1s); }
  html.sx-on .sx-card:not(.sx-in) .sxc-ic .sxc-paper, html.sx-on .sx-card:not(.sx-in) .sxc-ic .sxc-still { opacity: 0; }

  /* loops start once drawn, staggered card to card (--sx-i is the card's place in the grid) */
  html.sx-on .sx-card.sx-in .sxc-ic { --sxc-l: calc(var(--sx-b, 0) * 90ms + 2.1s + var(--sx-i, 0) * 700ms); }
  html.sx-on .sx-card.sx-in .sxc-ic > *, html.sx-on .sx-card.sx-in .sxc-ic svg > * {
    animation-delay: var(--sxc-l); animation-iteration-count: infinite; animation-fill-mode: none; animation-duration: var(--sxc-dur); }
  html.sx-on .sx-card.sx-in .sxc-ic .sxc-ic-g { animation: sxc-glow var(--sxc-dur) ease calc(var(--sxc-l) + var(--sxc-gm)) infinite; }

  /* 1 (the coin stack) and 5 (the ticked shield) only draw on: no loops, no glow. A recurring shine on a pile of
     coins, or a glint round a ticked shield, would put the emphasis on exactly the imagery the rulebook rules out. */
  html.sx-on .sx-card.sx-in .sxc-ic-1 .sxc-ic-g, html.sx-on .sx-card.sx-in .sxc-ic-5 .sxc-ic-g { animation: none; }
  .sxc-ic-1 { --sxc-dur: 6s; --sxc-gm: 2.8s; }

  .sxc-ic-2 { --sxc-dur: 4.8s; --sxc-gm: 1.75s; }
  html.sx-on .sx-card.sx-in .sxc-ic-2 .sxc-ic-orb { animation-name: sxc-orb; animation-timing-function: linear; }
  html.sx-on .sx-card.sx-in .sxc-ic-2 .sxc-ic-tr { animation-name: sxc-trail; animation-timing-function: linear; }
  html.sx-on .sx-card.sx-in .sxc-ic-2 > svg { animation-name: sxc-nudge; animation-timing-function: ease; }
  html.sx-on .sx-card.sx-in .sxc-ic-2 .sxc-ic-tip { animation-name: sxc-tip; animation-timing-function: cubic-bezier(.2,.7,.3,1); }

  .sxc-ic-3 { --sxc-dur: 6.5s; --sxc-gm: 5.5s; }
  html.sx-on .sx-card.sx-in .sxc-ic-3 > svg { animation-name: sxc-slip; animation-timing-function: linear; }
  html.sx-on .sx-card.sx-in .sxc-ic-3 .sxc-lines { animation-name: sxc-rewrite; animation-timing-function: linear; }

  .sxc-ic-4 { --sxc-dur: 5.6s; --sxc-gm: 4.9s; }
  html.sx-on .sx-card.sx-in .sxc-ic-4 .sxc-lines { animation-name: sxc-retype; animation-timing-function: linear; }
  html.sx-on .sx-card.sx-in .sxc-ic-4 > svg { animation-name: sxc-pop; animation-timing-function: ease; }

  .sxc-ic-5 { --sxc-dur: 6.4s; --sxc-gm: 2.5s; }

  .sxc-ic-6 { --sxc-dur: 6s; --sxc-gm: 3.5s; }
  html.sx-on .sx-card.sx-in .sxc-ic-6 > svg { animation-name: sxc-twinkle; animation-timing-function: linear; }
  html.sx-on .sx-card.sx-in .sxc-ic-6 .sxc-ic-mini { animation-name: sxc-mini; animation-timing-function: ease; }
}
@keyframes sxc-glow { 0% { opacity: 0; } 8% { opacity: .9; } 30%, 100% { opacity: 0; } }
@keyframes sxc-sheen { 0%, 38% { opacity: 1; transform: translateX(-140%) skewX(-18deg); } 64%, 100% { opacity: 1; transform: translateX(330%) skewX(-18deg); } }
@keyframes sxc-rim { 0%, 40% { opacity: 0; stroke-dashoffset: .25; } 46% { opacity: 1; } 62% { opacity: 1; } 68%, 100% { opacity: 0; stroke-dashoffset: -.75; } }
@keyframes sxc-orb { 0% { opacity: 0; transform: translateX(0); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  5% { opacity: 1; } 32% { opacity: 1; transform: translateX(14px); } 37%, 100% { opacity: 0; transform: translateX(14px); } }
@keyframes sxc-trail { 0% { opacity: 0; transform: translateX(0) scaleX(.2); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  5% { opacity: 1; } 32% { opacity: 1; transform: translateX(14px) scaleX(1); } 38%, 100% { opacity: 0; transform: translateX(14px) scaleX(.3); } }
@keyframes sxc-nudge { 0%, 31% { transform: none; } 37% { transform: translate3d(1.5px, 0, 0); } 50%, 100% { transform: none; } }
@keyframes sxc-tip { 0%, 31% { opacity: 0; transform: scale(.6); } 34% { opacity: .9; transform: scale(.8); } 62%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sxc-slip { 0%, 56% { opacity: 1; transform: none; } 62% { opacity: 0; transform: translate3d(0, -3px, 0); }
  63% { opacity: 0; transform: translate3d(0, 36px, 0); } 65% { opacity: 1; transform: translate3d(0, 36px, 0); animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  84%, 100% { opacity: 1; transform: none; } }
@keyframes sxc-rewrite { 0%, 58% { stroke-dashoffset: 0; } 60%, 76% { stroke-dashoffset: 1.05; animation-timing-function: cubic-bezier(.4,0,.2,1); } 94%, 100% { stroke-dashoffset: 0; } }
@keyframes sxc-retype { 0%, 54% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.4,0,.6,1); } 63% { stroke-dashoffset: -1.05; animation-timing-function: step-end; }
  66% { stroke-dashoffset: 1.05; animation-timing-function: cubic-bezier(.4,0,.2,1); } 86%, 100% { stroke-dashoffset: 0; } }
@keyframes sxc-pop { 0%, 85% { transform: none; } 90% { transform: scale(1.08); } 97%, 100% { transform: none; } }
@keyframes sxc-glint { 0% { opacity: 0; stroke-dashoffset: .1; } 6% { opacity: 1; } 34% { opacity: 1; } 40%, 100% { opacity: 0; stroke-dashoffset: -.95; } }
@keyframes sxc-guard { 0%, 34% { transform: none; } 41% { transform: scale(1.08); } 52%, 100% { transform: none; } }
@keyframes sxc-twinkle { 0%, 48% { transform: none; animation-timing-function: cubic-bezier(.45,0,.3,1); } 64% { transform: rotate(90deg) scale(1.14); animation-timing-function: ease-out; }
  76%, 100% { transform: rotate(90deg) scale(1); } }
@keyframes sxc-mini { 0%, 56% { opacity: 0; transform: scale(.3) rotate(-45deg); } 68% { opacity: 1; transform: scale(1) rotate(0deg); }
  86%, 100% { opacity: 0; transform: scale(.4) rotate(30deg); } }

/* ================= 3. What we ask / What we never ask ================= */
/* ask: a phone button gets tapped (ripple, no tick) and a calendar page turns (no numbers).
   never ask: one way only — an orb rides straight from a business to the charity; nothing comes back. */
.sxc-st { position: relative; display: block; width: 100%; box-sizing: border-box; flex-shrink: 0; border-radius: 16px; overflow: hidden;
  isolation: isolate; background: linear-gradient(180deg, #FCFAFF 0%, #F5EFFD 100%); border: 1px solid #ECE4F8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95); margin-bottom: 6px; }
.sxc-st::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(108,43,217,.15) .9px, rgba(108,43,217,0) 1.4px); background-size: 14px 14px; background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 58% 82% at 50% 50%, #000 10%, rgba(0,0,0,0) 92%);
          mask-image: radial-gradient(ellipse 58% 82% at 50% 50%, #000 10%, rgba(0,0,0,0) 92%); }
.sxc-st::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 46% 74% at 50% 60%, rgba(174,138,234,.15), rgba(174,138,234,0) 72%); }
.sxc-st-svg { display: block; width: 100%; height: auto; aspect-ratio: 320 / 120; max-height: 136px; overflow: hidden; }
.sxc-st-svg * { transform-box: fill-box; transform-origin: 50% 50%; }
.sxc-shd { fill: #4E1BA5; fill-opacity: .08; }
/* phone */
.sxc-ph-b { fill: #FFFFFF; stroke: #DCCDF4; stroke-width: 1.3; }
.sxc-ph-s { fill: #FBF8FF; }
.sxc-ph-sp { fill: #E6DCF8; }
.sxc-ph-l { fill: #E4D8F8; }
.sxc-ph-l.is-2 { fill: #EEE6FB; }
.sxc-btn-b { fill: #6C2BD9; }
.sxc-btn-f { fill: #FFFFFF; opacity: 0; }
.sxc-btn-l { fill: rgba(255,255,255,.78); }
.sxc-touch { fill: rgba(108,43,217,.14); stroke: rgba(108,43,217,.42); stroke-width: 1.2; opacity: 0; }
.sxc-rip { fill: none; stroke: #AE8AEA; stroke-width: 1.6; opacity: 0; }
/* calendar */
.sxc-cal { fill: #FFFFFF; stroke: #DCCDF4; stroke-width: 1.3; }
.sxc-cal-h { fill: #8E5BE6; }
.sxc-cal-d { fill: #E3D6F8; }
.sxc-cal-on { fill: #6C2BD9; }
.sxc-day { fill: none; stroke: #AE8AEA; stroke-width: 1.4; opacity: 0; }
.sxc-ring { fill: #FFFFFF; stroke: #CDB6F4; stroke-width: 1.4; }
.sxc-pg { transform-origin: 50% 0; }
.sxc-pg-shade { fill: #EFE6FC; opacity: 0; }
/* never ask */
.sxc-pipe { stroke: rgba(108,43,217,.08); stroke-width: 10; stroke-linecap: round; }
.sxc-cur { stroke: #AE8AEA; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .01 9; opacity: .75; }
.sxc-chev { fill: none; stroke: #AE8AEA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sxc-biz-b { fill: #FFFFFF; stroke: #DCCDF4; stroke-width: 1.3; }
.sxc-st-svg .sxc-biz-ic, .sxc-st-svg .sxc-cha-h { transform-box: view-box; transform-origin: 0 0; }
.sxc-biz-ic path { fill: none; stroke: #6C2BD9; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sxc-send { fill: none; stroke: rgba(174,138,234,.7); stroke-width: 1.5; opacity: 0; }
.sxc-orbg { opacity: 0; }
.sxc-otr { fill: url(#sxcNvTrail); transform-origin: 100% 50%; }
.sxc-orb2 { fill: #FFFFFF; stroke: #6C2BD9; stroke-width: 1.6; }
.sxc-cha-h { fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 1.4; stroke-linejoin: round; }
.sxc-cha-halo { fill: none; stroke: rgba(174,138,234,.7); stroke-width: 1.4; opacity: 0; }
.sxc-cha-glow { opacity: .55; }

@media (prefers-reduced-motion: no-preference) {
  /* entrance with the card */
  html.sx-on .sx-card.sx-in .sxc-ph, html.sx-on .sx-card.sx-in .sxc-calg, html.sx-on .sx-card.sx-in .sxc-biz, html.sx-on .sx-card.sx-in .sxc-cha {
    transition: opacity .7s ease calc(var(--sx-b, 0) * 90ms + var(--sxc-e, .35s)), transform 1s var(--sx-spring) calc(var(--sx-b, 0) * 90ms + var(--sxc-e, .35s)); }
  .sxc-calg, .sxc-cha { --sxc-e: .5s; }
  html.sx-on .sx-card:not(.sx-in) .sxc-ph, html.sx-on .sx-card:not(.sx-in) .sxc-calg,
  html.sx-on .sx-card:not(.sx-in) .sxc-biz, html.sx-on .sx-card:not(.sx-in) .sxc-cha { opacity: 0; transform: translate3d(0, 12px, 0) scale(.9); }
  html.sx-on .sx-card.sx-in .sxc-pipe, html.sx-on .sx-card.sx-in .sxc-cur, html.sx-on .sx-card.sx-in .sxc-chev { transition: opacity .8s ease calc(var(--sx-b, 0) * 90ms + .75s); }
  html.sx-on .sx-card:not(.sx-in) .sxc-pipe, html.sx-on .sx-card:not(.sx-in) .sxc-cur, html.sx-on .sx-card:not(.sx-in) .sxc-chev { opacity: 0; }

  /* ask: 7 s loop — tap, ripple, then the page turns and this month's day glows */
  html.sx-on .sx-card.sx-in .sxc-ask * { animation-duration: 7s; animation-iteration-count: infinite; animation-fill-mode: both;
    animation-delay: calc(var(--sx-b, 0) * 90ms + 1.2s); }
  html.sx-on .sx-card.sx-in .sxc-touch { animation-name: sxc-touch; animation-timing-function: var(--sx-ease); }
  html.sx-on .sx-card.sx-in .sxc-btn { animation-name: sxc-press; animation-timing-function: ease; }
  html.sx-on .sx-card.sx-in .sxc-btn-f { animation-name: sxc-flash; animation-timing-function: ease; }
  html.sx-on .sx-card.sx-in .sxc-rip { animation-name: sxc-rip; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  html.sx-on .sx-card.sx-in .sxc-rip.is-2 { animation-name: sxc-rip2; }
  html.sx-on .sx-card.sx-in .sxc-pg { animation-name: sxc-turn; animation-timing-function: linear; }
  html.sx-on .sx-card.sx-in .sxc-pg-shade { animation-name: sxc-shade; animation-timing-function: ease-out; }
  html.sx-on .sx-card.sx-in .sxc-day { animation-name: sxc-day; animation-timing-function: cubic-bezier(.2,.7,.3,1); }

  /* never ask: 4.4 s loop, one way only */
  html.sx-on .sx-card.sx-in .sxc-never * { animation-duration: 4.4s; animation-iteration-count: infinite; animation-fill-mode: both;
    animation-delay: calc(var(--sx-b, 0) * 90ms + 1.3s); }
  html.sx-on .sx-card.sx-in .sxc-never .sxc-cur { animation: sxc-march 1.4s linear infinite; }
  html.sx-on .sx-card.sx-in .sxc-orbg { animation-name: sxc-ride; animation-timing-function: linear; }
  html.sx-on .sx-card.sx-in .sxc-otr { animation-name: sxc-otr; animation-timing-function: linear; }
  html.sx-on .sx-card.sx-in .sxc-send { animation-name: sxc-send; animation-timing-function: ease-out; }
  html.sx-on .sx-card.sx-in .sxc-cha-n { animation-name: sxc-bump; animation-timing-function: ease; }
  html.sx-on .sx-card.sx-in .sxc-cha-glow { animation-name: sxc-cglow; animation-timing-function: ease-out; }
  html.sx-on .sx-card.sx-in .sxc-cha-halo { animation-name: sxc-halo; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  html.sx-on .sx-card.sx-in .sxc-cha-halo.is-2 { animation-name: sxc-halo2; }
}
@keyframes sxc-touch { 0%, 8% { opacity: 0; transform: translate(14px, 18px); } 17% { opacity: 1; transform: none; } 19% { transform: scale(.84); }
  23% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translate(8px, 12px); } }
@keyframes sxc-press { 0%, 18% { transform: none; } 20% { transform: scale(.93); } 25%, 100% { transform: none; } }
@keyframes sxc-flash { 0%, 19% { opacity: 0; } 22% { opacity: .32; } 34%, 100% { opacity: 0; } }
@keyframes sxc-rip { 0%, 19% { opacity: 0; transform: scale(1); } 20% { opacity: .95; transform: scale(1); } 42%, 100% { opacity: 0; transform: scale(2.7); } }
@keyframes sxc-rip2 { 0%, 23% { opacity: 0; transform: scale(1); } 24% { opacity: .6; transform: scale(1); } 48%, 100% { opacity: 0; transform: scale(3.4); } }
@keyframes sxc-turn { 0%, 50% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55,0,.75,.3); }
  58% { opacity: 1; transform: translate(0, -1px) scale(1, .45); animation-timing-function: cubic-bezier(.2,.6,.4,1); }
  63% { opacity: .9; transform: translate(0, -3px) scale(1, .02); } 64% { opacity: 0; transform: translate(0, -3px) scale(1, .02); }
  65% { opacity: 0; transform: none; } 92% { opacity: 0; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes sxc-shade { 0%, 50% { opacity: 0; } 55%, 63% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes sxc-day { 0%, 63% { opacity: 0; transform: scale(.6); } 66% { opacity: 1; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sxc-march { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -9.01; } }
@keyframes sxc-ride { 0% { opacity: 0; transform: translateX(0); animation-timing-function: cubic-bezier(.45,0,.55,1); } 5% { opacity: 1; }
  40% { opacity: 1; transform: translateX(128px); } 44%, 100% { opacity: 0; transform: translateX(128px); } }
@keyframes sxc-otr { 0%, 3% { transform: scaleX(0); } 16%, 100% { transform: scaleX(1); } }
@keyframes sxc-send { 0% { opacity: .85; transform: scale(1); } 16%, 100% { opacity: 0; transform: scale(1.28); } }
@keyframes sxc-bump { 0%, 39% { transform: none; } 43% { transform: scale(1.08); } 52%, 100% { transform: none; } }
@keyframes sxc-cglow { 0%, 39% { opacity: .55; transform: scale(.9); } 44% { opacity: 1; transform: scale(1.08); } 80%, 100% { opacity: .55; transform: scale(.9); } }
@keyframes sxc-halo { 0%, 40% { opacity: 0; transform: scale(1); } 41% { opacity: .85; transform: scale(1); } 76%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes sxc-halo2 { 0%, 45% { opacity: 0; transform: scale(1); } 46% { opacity: .6; transform: scale(1); } 84%, 100% { opacity: 0; transform: scale(1.85); } }

/* ================= 4. The charity's monthly update: the example writes itself once ================= */
/* chip, then the date tag sweeps in, then each line word by word (the words are spans; the text is unchanged),
   the divider draws between the lines, a soft glow settles round the card. Then it rests, fully written. */
.sxc-upd .sxc-w { display: inline-block; }
.sxc-upd-l.is-2 { position: relative; }
.sxc-upd-l.is-2::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 1px; background: #EEE9F5; transform-origin: 0 50%; }
.sxc-upd-glow { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .5;
  box-shadow: 0 0 0 1px rgba(174,138,234,.5), 0 28px 60px -30px rgba(108,43,217,.55), 0 0 46px -8px rgba(174,138,234,.6); }

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxc-upd { --sxc-u: calc(var(--sx-b, 0) * 90ms); }
  html.sx-on .sxc-upd.sx-in .dx-example { transition: opacity .5s ease calc(var(--sxc-u) + .3s), transform .8s var(--sx-spring) calc(var(--sxc-u) + .3s); }
  html.sx-on .sxc-upd:not(.sx-in) .dx-example { opacity: 0; transform: scale(.82); }
  html.sx-on .sxc-upd.sx-in .dx-tag { clip-path: inset(-30% -2% -30% 0);
    transition: clip-path 1s var(--sx-ease) calc(var(--sxc-u) + .5s), opacity .4s ease calc(var(--sxc-u) + .5s); }
  html.sx-on .sxc-upd:not(.sx-in) .dx-tag { opacity: 0; clip-path: inset(-30% 100% -30% 0); }

  html.sx-on .sxc-upd .sxc-upd-l { --sxc-s: calc(var(--sxc-u) + 1s); }
  html.sx-on .sxc-upd .sxc-upd-l.is-2 { --sxc-s: calc(var(--sxc-u) + 2.45s); }
  html.sx-on .sxc-upd.sx-in .sxc-w { transition: opacity .5s ease calc(var(--sxc-s) + var(--i) * 72ms), transform .7s var(--sx-ease) calc(var(--sxc-s) + var(--i) * 72ms); }
  html.sx-on .sxc-upd:not(.sx-in) .sxc-w { opacity: 0; transform: translate3d(0, .42em, 0); }
  html.sx-on .sxc-upd.sx-in .sxc-upd-l .dp-draft { transition: opacity .5s ease calc(var(--sxc-u) + 1.95s), transform .8s var(--sx-spring) calc(var(--sxc-u) + 1.95s); }
  html.sx-on .sxc-upd:not(.sx-in) .sxc-upd-l .dp-draft { opacity: 0; transform: translate3d(0, 4px, 0) scale(.86); }
  html.sx-on .sxc-upd.sx-in .sxc-upd-l.is-2::before { transition: transform .9s var(--sx-ease) calc(var(--sxc-u) + 2.15s); }
  html.sx-on .sxc-upd:not(.sx-in) .sxc-upd-l.is-2::before { transform: scaleX(0); }
  html.sx-on .sxc-upd:not(.sx-in) .sxc-upd-glow { opacity: 0; }
  html.sx-on .sxc-upd.sx-in .sxc-upd-glow { animation: sxc-uglow 2.4s ease calc(var(--sxc-u) + 3.5s) both; }
}
@keyframes sxc-uglow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: .5; } }

/* ================= 5. Final CTA: a heart node with soft halo rings around the buttons ================= */
.sxc-cta-sec .dp-actions { position: relative; z-index: 1; }
.sxc-cta { position: relative; width: 72px; height: 72px; margin: 0 auto 36px; pointer-events: none; }
.sxc-cta-rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sxc-cta-rings i { position: absolute; left: -320px; top: -320px; width: 640px; height: 640px; border-radius: 50%;
  border: 1.2px solid rgba(174,138,234,.62); opacity: 0; transform: scale(.12); }
.sxc-cta-rings i:nth-child(1) { opacity: .4; transform: scale(.3); }
.sxc-cta-rings i:nth-child(2) { opacity: .22; transform: scale(.52); }
.sxc-cta-rings i:nth-child(3) { opacity: .1; transform: scale(.76); }
.sxc-cta-node { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #8C58EE 0%, #6C2BD9 58%, #4E1BA5 100%);
  box-shadow: 0 0 0 1px rgba(174,138,234,.5), 0 0 0 9px rgba(174,138,234,.09), 0 18px 40px -10px rgba(108,43,217,.85), 0 0 56px rgba(108,43,217,.5); }
.sxc-cta-node svg { position: relative; width: 30px; height: 30px; fill: #FFFFFF; stroke: #FFFFFF; stroke-width: 1.6; stroke-linejoin: round; }
.sxc-cta-glow { position: absolute; inset: -22px; border-radius: 50%; opacity: .5;
  background: radial-gradient(closest-side, rgba(174,138,234,.5), rgba(174,138,234,0)); }
@media (max-width: 700px) {
  .sxc-cta { width: 60px; height: 60px; margin-bottom: 30px; }
  .sxc-cta-node svg { width: 26px; height: 26px; }
  .sxc-cta-rings i { left: -230px; top: -230px; width: 460px; height: 460px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxc-cta:not(.sx-in) .sxc-cta-node { opacity: 0; transform: scale(.6); }
  html.sx-on .sxc-cta.sx-in .sxc-cta-node { transition: opacity .6s ease .1s, transform 1s var(--sx-spring) .1s; }
  html.sx-on .sxc-cta:not(.sx-in) .sxc-cta-rings i { opacity: 0; }
  /* a ring leaves the heart every 2 s and widens past the buttons; the heart beats as each one leaves */
  html.sx-on .sxc-cta.sx-in .sxc-cta-rings i { opacity: 0; animation: sxc-cta-ring 6s cubic-bezier(.2,.6,.35,1) infinite both; }
  html.sx-on .sxc-cta.sx-in .sxc-cta-rings i:nth-child(1) { animation-delay: .7s; }
  html.sx-on .sxc-cta.sx-in .sxc-cta-rings i:nth-child(2) { animation-delay: 2.7s; }
  html.sx-on .sxc-cta.sx-in .sxc-cta-rings i:nth-child(3) { animation-delay: 4.7s; }
  html.sx-on .sxc-cta.sx-in .sxc-cta-node svg { animation: sxc-cta-beat 2s ease .7s infinite both; }
  html.sx-on .sxc-cta.sx-in .sxc-cta-glow { animation: sxc-cta-glow 2s ease-out .7s infinite both; }
}
@keyframes sxc-cta-ring { 0% { opacity: 0; transform: scale(.12); } 6% { opacity: .9; } 100% { opacity: 0; transform: scale(1); } }
@keyframes sxc-cta-beat { 0% { transform: scale(1); } 8% { transform: scale(1.12); } 16% { transform: scale(.98); } 24%, 100% { transform: scale(1); } }
@keyframes sxc-cta-glow { 0% { opacity: .45; transform: scale(.92); } 10% { opacity: 1; transform: scale(1.06); } 100% { opacity: .45; transform: scale(.92); } }