/* DigiDonate v3 — How it works: bespoke section layer (every class and keyframe is prefixed sxw-).
   Loads after sx.css and sx-kit.css. Builds on the engine hooks (.sx-in, .sx-loop/.sx-run, --sx-i, --sx-ld)
   and never re-implements an observer; the only script is the small inline rail driver at the end of
   how-it-works.html (a no-op under reduced motion or when the engine is off).

   S1 #steps · the journey rail. The three step cards carry the kit Match / Give / Show scenes. A rail
      connects the three step numbers: horizontal through the number row on desktop (3 columns), vertical
      along the cards' left edge when the cards stack. A glowing orb rides it as the visitor scrolls
      (scroll-scrubbed, eased, with a speed-based comet trail); each station ring lights as the orb
      reaches it, the numeral fills with purple, and a soft light follows the orb inside the card it is
      crossing. The orb marks the step being read; it is not money, and no DigiDonate node is on the rail.
   S2 #never · "What we never do". The tint card widens into a calm two-column moment: the list on one
      side, an aria-hidden panel on the other (above the list on phones): the DigiDonate app tile sits
      inside a slowly turning dashed boundary, and below it, on a separate straight pipe, orbs ride from
      a business node to a heart. The pipe never touches the boundary. Each list row gets a soft lilac
      wash, one row after another, as the engine reveals it.

   S3 #gap · "Without / With DigiDonate" (assets/sx-bridge.js). Without: businesses and charities each
      wander off with their own questions. With: every line meets in one DigiDonate hub, a current runs
      along them and the hub pops in. The caption under the picture swaps with it.
   S4 #money · the three lanes come alive: on the gift lane a coin rides from the business to the charity
      and a receipt slides back; on the fee lane an invoice rides to DigiDonate; on the partner lane a
      quarter slice rides on. A dashed gap between the gift lane and the others keeps them apart.
   S5 #app · each role card opens with a small textless app window: the owner picks a cause and sets a
      monthly amount, the charity gets a heart notification, ticks the gift and posts its update, the
      marketer turns the update into posts and a video script and approves them.

   Still frame = the base rules (reduced motion, print, no JS): kit scenes complete, the never panel
   complete with an orb mid-pipe, no rail. Motion lives in (prefers-reduced-motion: no-preference). */

/* =======================================================================================
   S1 · #steps
   ======================================================================================= */

.sxw-steps .dp-grid { position: relative; }

/* the rail layer (built by the inline driver; hidden unless the driver runs) */
.sxw-rail { display: none; }
html.sxw-rail-on .sxw-rail { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; }
.sxw-rail-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.sxw-rail-track { fill: none; stroke: #E7DDF8; stroke-width: 2; stroke-linecap: round; }
.sxw-rail-dots { fill: none; stroke: #A47EE8; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .01 9; opacity: .7; }
.sxw-stub { fill: none; stroke: #B79AEE; stroke-width: 2; stroke-linecap: round; }
.sxw-rail-mp { fill: none; stroke: #FFFFFF; stroke-width: 40; stroke-linecap: butt; }

/* stations: a ring around each step number */
.sxw-st-ring { fill: none; stroke: #DCCDF5; stroke-width: 1.5; stroke-dasharray: 2.2 4.6; stroke-linecap: round; }
.sxw-st-lit { fill: none; stroke: #8E5BE6; stroke-width: 2; opacity: 0;
  filter: drop-shadow(0 0 4px rgba(174,138,234,.85)); }
.sxw-st-burst { fill: none; stroke: #AE8AEA; stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }

/* the travelling head (HTML, so it moves on the compositor). It is a light streak along the rail, like the
   homepage and About rails, never a round orb: round glowing orbs stand for money on this site, and this light
   travels through DigiDonate's steps, which money never does. */
.sxw-orb, .sxw-trail { position: absolute; left: 0; top: 0; will-change: transform; }
.sxw-orb i { position: absolute; border-radius: 4px; }
.sxw-orb-halo { left: -24px; top: -9px; width: 48px; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(174,138,234,.5), rgba(174,138,234,.18) 60%, rgba(174,138,234,0)); }
.sxw-orb-core { left: -12px; top: -3.5px; width: 24px; height: 7px; background: #FFFFFF; box-sizing: border-box;
  border: 1.2px solid #A47EE8; box-shadow: 0 0 4px rgba(174,138,234,.95), 0 0 12px rgba(108,43,217,.55); }
.sxw-v .sxw-orb-halo { left: -9px; top: -24px; width: 18px; height: 48px; }
.sxw-v .sxw-orb-core { left: -3.5px; top: -12px; width: 7px; height: 24px; }
.sxw-trail { width: 110px; height: 8px; margin: -4px 0 0 -110px; transform-origin: 100% 50%; opacity: 0;
  background: linear-gradient(90deg, rgba(185,150,242,0), rgba(164,126,232,.5) 60%, #8B5CE6);
  clip-path: polygon(0 50%, 100% 0, 100% 100%); }

/* soft light that follows the orb inside the card it crosses (under the card content) */
.sxw-cg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.sxw-cg i { position: absolute; left: 0; top: 0; width: 460px; height: 300px; margin: -150px 0 0 -230px; border-radius: 50%;
  opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, rgba(174,138,234,.24), rgba(174,138,234,.1) 52%, rgba(174,138,234,0)); }
.sxw-v .sxw-cg i { width: 320px; height: 300px; margin: -150px 0 0 -160px; }

@media (prefers-reduced-motion: no-preference) {
  /* the rail draws on once the cards have landed */
  html.sxw-rail-on .sxw-rail { opacity: 0; transition: opacity .6s ease; }
  html.sxw-rail-on .sxw-rail.sxw-show { opacity: 1; }
  .sxw-rail-mp { transition: stroke-dashoffset 1.5s cubic-bezier(.65,0,.35,1); }

  .sxw-st { --sxw-sd: calc(var(--sxw-i, 0) * 260ms + 300ms); }
  .sxw-st-ring { transform-box: fill-box; transform-origin: 50% 50%;
    transition: opacity .5s ease var(--sxw-sd), transform .9s var(--sx-spring, ease) var(--sxw-sd), stroke .4s ease; }
  .sxw-st:not(.sxw-in) .sxw-st-ring { opacity: 0; transform: scale(.4); }
  .sxw-st-lit { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(.82);
    transition: opacity .5s ease, transform .8s cubic-bezier(.34,1.56,.64,1); }
  .sxw-st.sxw-lit .sxw-st-lit { opacity: 1; transform: none; }
  .sxw-st.sxw-lit .sxw-st-ring { stroke: #C9B2F2; }
  .sxw-st.sxw-lit .sxw-st-burst { animation: sxw-burst 1.3s cubic-bezier(.2,.7,.3,1) both; }
  .sxw-stub { stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
  .sxw-st.sxw-lit .sxw-stub { stroke-dashoffset: 0; }

  .sxw-orb-halo { animation: sxw-breathe 2.8s cubic-bezier(.65,0,.35,1) infinite alternate; }

  /* the active card: a lilac edge while its step is the one being read */
  html.sx-on .sxw-steps .dp-step.sxw-act { border-color: #DFD0F7;
    box-shadow: 0 1px 2px rgba(20,18,25,.04), 0 30px 60px -40px rgba(78,27,165,.42); }

  /* the step numerals: pale until the orb reaches them, then filled with purple (replaces the engine's
     one-shot sweep and ring on these three numbers only, so the two never fight) */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    html.sx-on.sxw-rail-on .sxw-steps .dp-step.sx-card .dp-step-n {
      background: linear-gradient(90deg, #4E1BA5 0%, #6C2BD9 26%, #8E5BE6 42%, #DFD0F7 58%, #DFD0F7 100%) 100% 0 / 250% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
      animation: none; transition: background-position 1s cubic-bezier(.65,0,.35,1); }
    html.sx-on.sxw-rail-on .sxw-steps.sxw-v .dp-step.sx-card .dp-step-n {
      background-image: linear-gradient(180deg, #4E1BA5 0%, #6C2BD9 26%, #8E5BE6 42%, #DFD0F7 58%, #DFD0F7 100%);
      background-position: 0 100%; background-size: 100% 250%; }
    html.sx-on.sxw-rail-on .sxw-steps .dp-step.sx-card.sxw-lit .dp-step-n { background-position: 0 0; }
  }
  html.sx-on.sxw-rail-on .sxw-steps .dp-step.sx-card.sx-in .dp-step-n::after { animation: none; }
}

@keyframes sxw-burst { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes sxw-breathe { from { transform: scale(.8); opacity: .7; } to { transform: scale(1.18); opacity: 1; } }

/* =======================================================================================
   S2 · #never
   ======================================================================================= */
.sxw-nv { position: relative; display: block; box-sizing: border-box; width: 100%; margin: 6px 0 4px; border-radius: 20px;
  overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%); border: 1px solid #E2D5F7;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 48px -36px rgba(78,27,165,.4); }
.sxw-nv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(108,43,217,.14) 0.9px, rgba(108,43,217,0) 1.4px); background-size: 14px 14px;
  background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, #000 10%, rgba(0,0,0,0) 92%);
          mask-image: radial-gradient(ellipse 62% 70% at 50% 50%, #000 10%, rgba(0,0,0,0) 92%); }
.sxw-nv-svg { display: block; width: 100%; height: auto; aspect-ratio: 400 / 340; }

/* DigiDonate inside its own boundary */
.sxw-nv-spin, .sxw-nv-top, .sxw-nv-app, .sxw-nv-biz, .sxw-nv-send, .sxw-nv-cha, .sxw-nv-beat, .sxw-nv-glow, .sxw-nv-hglow,
.sxw-nv-pipe, .sxw-nv-br, .sxw-nv-hr { transform-box: fill-box; transform-origin: 50% 50%; }
.sxw-nv-bound { fill: none; stroke: #A985EA; stroke-width: 1.7; stroke-linecap: round; stroke-dasharray: 5 8.4; }
.sxw-nv-dots { fill: none; stroke: #C5ADF2; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .01 10.45; opacity: .75; }
.sxw-nv-inner { fill: #FFFFFF; fill-opacity: .55; stroke: #EADFFB; stroke-width: 1; }
.sxw-nv-tile { filter: drop-shadow(0 10px 14px rgba(78,27,165,.28)) drop-shadow(0 2px 3px rgba(78,27,165,.18)); }
.sxw-nv-tile-hl { fill: none; stroke: #FFFFFF; stroke-opacity: .22; stroke-width: 1.2; }
.sxw-nv-ic { fill: none; stroke: #FFFFFF; stroke-linecap: round; stroke-linejoin: round; }
.sxw-nv-glow { opacity: .9; }

/* the direct pipe (kit parts: .sx-k-pipe, .sx-k-cur, orb, nodes) */
.sxw-nv-pipe { transform-origin: 0% 50%; }
.sxw-nv-orb.is-1 { transform: translateX(206px); }
.sxw-nv-orb.is-2 { opacity: 0; }
.sxw-nv-tr { transform-box: fill-box; transform-origin: 100% 50%; }
.sxw-nv-hglow { opacity: .6; }

/* phones: the panel sits between the heading and the list */
@media (max-width: 900px) {
  .sxw-nv { max-width: 440px; margin: 4px 0 6px; }
}
/* desktop: list beside the panel */
@media (min-width: 901px) {
  .sxw-never .dp-card.sxw-nvcard { max-width: none !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    gap: 16px clamp(40px, 5vw, 72px); align-items: start; padding: 52px 56px; }
  .sxw-nvcard > h2 { grid-column: 1; grid-row: 1; }
  .sxw-nvcard > .dp-xlist { grid-column: 1; grid-row: 2; }
  .sxw-nvcard > .sxw-nv { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; }
}

/* list rows: room for the wash */
.sxw-nvcard .dp-xlist > li { position: relative; isolation: isolate; }

@media (prefers-reduced-motion: no-preference) {
  /* loops (paused by the engine while off screen) */
  .sxw-nv-spin.is-a { animation: sxw-spin 56s linear infinite; }
  .sxw-nv-spin.is-b { animation: sxw-spin 96s linear infinite reverse; }
  .sxw-nv-glow { animation: sxw-nv-breathe 7s cubic-bezier(.65,0,.35,1) infinite alternate; }
  .sxw-nv-cur { animation: sxw-march 1.15s linear infinite; }
  .sxw-nv-orb { animation: sxw-nv-ride 6s infinite both; }
  .sxw-nv-orb.is-2 { animation-delay: -3s; }
  .sxw-nv-tr { animation: sxw-nv-trail 6s ease-in-out infinite both; }
  .sxw-nv-orb.is-2 .sxw-nv-tr { animation-delay: -3s; }
  .sxw-nv-hr.is-1 { animation: sxw-nv-ring 6s cubic-bezier(.2,.8,.2,1) infinite both; }
  .sxw-nv-hr.is-2 { animation: sxw-nv-ring 6s cubic-bezier(.2,.8,.2,1) -3s infinite both; }
  .sxw-nv-br { animation: sxw-nv-send 3s cubic-bezier(.2,.8,.2,1) infinite both; }
  .sxw-nv-send { animation: sxw-nv-bump 3s cubic-bezier(.65,0,.35,1) infinite both; }
  .sxw-nv-beat { animation: sxw-nv-beat 3s cubic-bezier(.65,0,.35,1) infinite both; }
  .sxw-nv-hglow { animation: sxw-nv-hglow 3s ease-in-out infinite both; }

  /* entrance: once, when the card lands */
  html.sx-on .sxw-nvcard .sxw-nv { transition: opacity .9s ease .25s, transform 1.2s var(--sx-ease, ease) .25s; }
  html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv { opacity: 0; transform: translate3d(0, 18px, 0) scale(.97); }
  html.sx-on .sxw-nvcard .sxw-nv-top { transition: opacity .9s ease .45s, transform 1.3s cubic-bezier(.34,1.4,.64,1) .45s; }
  html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv-top { opacity: 0; transform: scale(.78); }
  html.sx-on .sxw-nvcard .sxw-nv-app { transition: opacity .6s ease .7s, transform 1s cubic-bezier(.34,1.56,.64,1) .7s; }
  html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv-app { opacity: 0; transform: scale(.5) rotate(-10deg); }
  html.sx-on .sxw-nvcard .sxw-nv-biz { transition: opacity .6s ease .9s, transform .9s cubic-bezier(.34,1.56,.64,1) .9s; }
  html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv-biz { opacity: 0; transform: scale(.6); }
  html.sx-on .sxw-nvcard .sxw-nv-pipe { transition: opacity .5s ease 1.05s, transform 1s cubic-bezier(.65,0,.35,1) 1.05s; }
  html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv-pipe { opacity: 0; transform: scaleX(0); }
  html.sx-on .sxw-nvcard .sxw-nv-cha { transition: opacity .6s ease 1.45s, transform .9s cubic-bezier(.34,1.56,.64,1) 1.45s; }
  html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv-cha { opacity: 0; transform: scale(.6); }
  html.sx-on .sxw-nvcard .sxw-nv-orbs { transition: opacity .8s ease 1.9s; }
  html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv-orbs, html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv-br,
  html.sx-on .sxw-nvcard:not(.sx-in) .sxw-nv-hr { opacity: 0; }

  /* each "never" row: a soft lilac wash sweeps across it, one row after another */
  html.sx-on .sxw-nvcard .dp-xlist > li { clip-path: inset(-6px -14px -6px -14px round 12px); }
  html.sx-on .sxw-nvcard .dp-xlist > li::after { content: ""; position: absolute; left: -14px; top: -6px; bottom: -6px; width: 72%;
    z-index: -1; pointer-events: none; opacity: 0; transform: translate3d(-101%, 0, 0);
    background: linear-gradient(90deg, rgba(174,138,234,0) 0%, rgba(174,138,234,.2) 35%, rgba(174,138,234,.3) 55%, rgba(174,138,234,0) 100%); }
  html.sx-on .sxw-nvcard .dp-xlist.sx-in > li::after {
    animation: sxw-wash 1.7s cubic-bezier(.45,0,.35,1) calc(var(--sx-lb, 300ms) + var(--sx-i, 0) * 260ms + 520ms) both; }
}

@keyframes sxw-spin { to { transform: rotate(360deg); } }
@keyframes sxw-march { to { stroke-dashoffset: -7.51; } }
@keyframes sxw-nv-breathe { from { transform: scale(.92); opacity: .7; } to { transform: scale(1.06); opacity: 1; } }
@keyframes sxw-nv-ride {
  0% { transform: translateX(80px); opacity: 0; animation-timing-function: ease-out; }
  5% { transform: translateX(92px); opacity: 1; animation-timing-function: cubic-bezier(.45,0,.3,1); }
  40% { transform: translateX(310px); opacity: 1; animation-timing-function: ease-in; }
  45%, 100% { transform: translateX(322px); opacity: 0; } }
@keyframes sxw-nv-trail { 0%, 5% { transform: scaleX(0); } 16% { transform: scaleX(.7); } 28% { transform: scaleX(1); }
  38% { transform: scaleX(.35); } 42%, 100% { transform: scaleX(0); } }
@keyframes sxw-nv-ring { 0%, 40% { opacity: 0; transform: scale(1); } 41% { opacity: .75; transform: scale(1); }
  62%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes sxw-nv-send { 0% { opacity: .65; transform: scale(1); } 22%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes sxw-nv-bump { 0% { transform: scale(1.06); } 14%, 100% { transform: scale(1); } }
@keyframes sxw-nv-beat { 0%, 79% { transform: scale(1); } 85% { transform: scale(1.09); } 93%, 100% { transform: scale(1); } }
@keyframes sxw-nv-hglow { 0%, 76% { opacity: .5; transform: scale(.92); } 86% { opacity: 1; transform: scale(1.08); } 100% { opacity: .5; transform: scale(.92); } }
@keyframes sxw-wash { 0% { opacity: 0; transform: translate3d(-101%, 0, 0); } 14%, 78% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(240%, 0, 0); } }

/* =======================================================================================
   S3 · #gap · Without / With DigiDonate
   ======================================================================================= */
.sxw-br { background: #FFFFFF; border: 1px solid #EAE6F1; border-radius: 28px; padding: 28px;
  box-shadow: 0 30px 60px -40px rgba(20,18,25,.28); }
.sxw-br-seg { display: inline-flex; padding: 5px; border-radius: 999px; background: #FAFAF8; border: 1px solid #EAE6F1; gap: 4px; }
.sxw-br-seg[hidden] { display: none; }
.sxw-br-seg button { height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: #56526A;
  font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.sxw-br-seg button[aria-pressed="true"] { background: #6C2BD9; color: #FFFFFF; box-shadow: 0 8px 20px -10px #6C2BD9; }
.sxw-br-seg button:focus-visible { outline: 2px solid #6C2BD9; outline-offset: 2px; }
.sxw-br-svg { display: block; width: 100%; height: auto; margin-top: 18px; }
.sxw-br-svg text { font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif; }
.sxw-br-t { font-size: 14.5px; font-weight: 600; fill: #8B8698; }
.sxw-br-t.is-end { text-anchor: end; }
.sxw-br-t.is-lab { font-size: 14px; font-weight: 700; fill: #141219; }
.sxw-br-q circle { fill: #F4F2EF; stroke: #DCD7E6; stroke-width: 1.5; }
.sxw-br-qm { font-size: 15px; font-weight: 800; fill: #8B8698; text-anchor: middle; }
.sxw-br-wander { fill: none; stroke: #CFC9DA; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 7; }
.sxw-br-base { fill: none; stroke: #DFD0F7; stroke-width: 3; }
.sxw-br-flow { fill: none; stroke: #6C2BD9; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 10; }
.sxw-br-pulse { fill: none; stroke: #AE8AEA; stroke-width: 1.5; opacity: 0; }
.sxw-br-hub circle { fill: #6C2BD9; }
.sxw-br-hubt { font-size: 16px; font-weight: 800; fill: #141219; text-anchor: middle; }
.sxw-br-hubs { font-size: 13.5px; font-weight: 600; fill: #6C2BD9; text-anchor: middle; }
.sxw-br-biz rect { fill: #6C2BD9; }
.sxw-br-cha circle { fill: #FFFFFF; stroke: #DFD0F7; stroke-width: 2; }
.sxw-br-without, .sxw-br-with { transition: opacity .6s ease; }
.sxw-br-with, .sxw-br.is-with .sxw-br-without { opacity: 0; }
.sxw-br.is-with .sxw-br-with { opacity: 1; }
.sxw-br-legend { display: none; gap: 10px 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; font-weight: 700; color: #141219; }
.sxw-br-legend span { display: inline-flex; align-items: center; gap: 8px; }
.sxw-br-legend i { width: 14px; height: 14px; border-radius: 5px; background: #6C2BD9; }
.sxw-br-legend i.is-cha { border-radius: 999px; background: #FFFFFF; border: 2px solid #DFD0F7; }
.sxw-br-caps { display: grid; margin-top: 12px; }
.sxw-br-caps p { grid-area: 1 / 1; margin: 0; font-size: 16px; line-height: 1.6; color: #56526A; max-width: 780px; transition: opacity .5s ease; }
.sxw-br-caps p b { color: #141219; }
.sxw-br-caps p:first-child, .sxw-br.is-with .sxw-br-caps p:first-child { opacity: 0; visibility: hidden; }
.sxw-br:not(.is-with) .sxw-br-caps p:first-child { opacity: 1; visibility: visible; }
.sxw-br:not(.is-with) .sxw-br-caps p:last-child { opacity: 0; visibility: hidden; }
.sxw-br-svg.is-narrow { display: none; max-width: 340px; margin-left: auto; margin-right: auto; }
.sxw-br-legend i.is-hub { border-radius: 999px; }
.sxw-br-lhub { transition: opacity .5s ease; }
.sxw-br:not(.is-with) .sxw-br-lhub { opacity: .35; }
@media (max-width: 760px) {
  .sxw-br { padding: 20px; }
  .sxw-br-seg { display: flex; }
  .sxw-br-seg button { flex: 1 1 0; padding: 0 10px; font-size: 13px; }
  .sxw-br-svg.is-wide { display: none; }
  .sxw-br-svg.is-narrow { display: block; }
  .sxw-br-legend { display: flex; flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  html.sx-on .sxw-br-flow { animation: sxw-br-dash 1.1s linear infinite; }
  html.sx-on .sxw-br-q { transform-box: fill-box; transform-origin: center; animation: sxw-br-bob 2.4s ease-in-out var(--d, 0s) infinite; }
  html.sx-on .sxw-br-pulse { transform-box: fill-box; transform-origin: center; animation: sxw-br-ring 1.8s ease-out infinite; }
  html.sx-on .sxw-br-hub { transform-box: fill-box; transform-origin: center; }
  html.sx-on .sxw-br.is-with .sxw-br-hub { animation: sxw-br-pop .6s cubic-bezier(.3,1.6,.5,1) both; }
}
@keyframes sxw-br-dash { to { stroke-dashoffset: -13; } }
@keyframes sxw-br-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sxw-br-ring { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes sxw-br-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }

/* =======================================================================================
   S4 · #money · the lanes come alive (the words and the diagram's description are unchanged)
   ======================================================================================= */
/* a dashed divider with a small shield between the gift lane and the fee lanes: they never touch */
.sxw-wall { position: relative; height: 2px; margin: -6px 18px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(90deg, #CDBDF0 0 7px, transparent 7px 13px); }
.sxw-wall svg { width: 22px; height: 22px; padding: 4px; border-radius: 999px; background: #FAFAF8; border: 1px solid #DFD0F7;
  fill: #F5F0FC; stroke: #6C2BD9; stroke-width: 1.8; stroke-linejoin: round; }
/* each token rides a full-width track along the lane's line (transform only) */
.sxw-ride { position: absolute; left: 0; right: 6px; bottom: -6px; height: 14px; pointer-events: none; }
.sxw-ride i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.sxw-ride i::before { content: ""; position: absolute; left: -7px; top: 0; width: 14px; height: 14px; border-radius: 999px; }
.sxw-ride.is-coin i::before { background: #FFFFFF; box-shadow: 0 0 0 2.5px #15803D, 0 0 12px 3px rgba(21,128,61,.45); }
.sxw-ride.is-back { bottom: -6px; }
.sxw-ride.is-back i::before { left: -6px; width: 12px; height: 14px; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 0 1.5px #15803D, 0 4px 10px -4px rgba(21,128,61,.6);
  background-image: linear-gradient(#15803D, #15803D), linear-gradient(#9AD1AE, #9AD1AE); background-repeat: no-repeat;
  background-size: 6px 1.5px, 4px 1.5px; background-position: 3px 4px, 3px 8px; }
.sxw-ride.is-doc i::before { left: -6px; width: 12px; height: 15px; top: -1px; border-radius: 2px; background: #6C2BD9;
  box-shadow: 0 0 0 2px #F5F0FC, 0 0 12px 2px rgba(108,43,217,.4); }
.sxw-ride.is-slice i::before { background: conic-gradient(#6C2BD9 0 25%, #E6D9FB 25% 100%); box-shadow: 0 0 0 2px #FFFFFF, 0 0 10px 2px rgba(108,43,217,.35); }
.sxw-flow .dp-flow-node { position: relative; }
.sxw-flow .dp-flow-node::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 4px rgba(108,43,217,.18); }
.sxw-flow .is-gift .dp-flow-node::after { box-shadow: 0 0 0 4px rgba(21,128,61,.2); }

@media (prefers-reduced-motion: no-preference) {
  /* one 9s clock for all three lanes: gift there (0–24%), receipt back (30–48%), fee (42–62%), partner share (66–84%) */
  html.sx-on .sxw-ride.is-coin i { animation: sxw-coin 9s cubic-bezier(.45,0,.4,1) infinite; }
  html.sx-on .sxw-ride.is-back i { animation: sxw-back 9s cubic-bezier(.45,0,.4,1) infinite; }
  html.sx-on .sxw-ride.is-doc i { animation: sxw-doc 9s cubic-bezier(.45,0,.4,1) infinite; }
  html.sx-on .sxw-ride.is-slice i { animation: sxw-slice 9s cubic-bezier(.45,0,.4,1) infinite; }
  html.sx-on .sxw-flow .is-gift .dp-flow-node:last-child::after { animation: sxw-hit 9s ease-out infinite; --a: 24%; }
  html.sx-on .sxw-flow .is-gift .dp-flow-node:first-child::after { animation: sxw-hit2 9s ease-out infinite; }
  html.sx-on .sxw-flow .is-fee .dp-flow-node:last-child::after { animation: sxw-hit3 9s ease-out infinite; }
  html.sx-on .sxw-flow .is-partner .dp-flow-node:last-child::after { animation: sxw-hit4 9s ease-out infinite; }
  html.sx-on .sxw-wall svg { animation: sxw-guard 9s ease-in-out infinite; }
}
@keyframes sxw-coin { 0%, 2% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 22% { opacity: 1; }
  24%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes sxw-back { 0%, 29% { transform: translateX(100%); opacity: 0; } 31% { opacity: 1; } 46% { opacity: 1; }
  48%, 100% { transform: translateX(0); opacity: 0; } }
@keyframes sxw-doc { 0%, 41% { transform: translateX(0); opacity: 0; } 43% { opacity: 1; } 60% { opacity: 1; }
  62%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes sxw-slice { 0%, 65% { transform: translateX(0); opacity: 0; } 67% { opacity: 1; } 82% { opacity: 1; }
  84%, 100% { transform: translateX(100%); opacity: 0; } }
@keyframes sxw-hit { 0%, 22% { opacity: 0; } 25% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes sxw-hit2 { 0%, 46% { opacity: 0; } 49% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes sxw-hit3 { 0%, 60% { opacity: 0; } 63% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes sxw-hit4 { 0%, 82% { opacity: 0; } 85% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes sxw-guard { 0%, 36%, 64%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* =======================================================================================
   S5 · #app · a small textless app window on each role card
   ======================================================================================= */
.sxw-role { gap: 14px; }
.sxw-app { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: #FAFAF8; border: 1px solid #EAE6F1;
  box-shadow: 0 14px 30px -24px rgba(20,18,25,.4); }
.sxw-app-bar { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: #FFFFFF; border-bottom: 1px solid #EFECF4; }
.sxw-app-bar i { width: 7px; height: 7px; border-radius: 999px; background: #E4E0DA; }
.sxw-app-bar span { flex: 1; height: 8px; margin-left: 8px; border-radius: 999px; background: #F4F2EF; max-width: 120px; }
.sxw-app-body { position: absolute; inset: 24px 0 0; padding: 12px 14px; }
.sxw-row { display: flex; align-items: center; gap: 7px; height: 16px; }
.sxw-row b { width: 14px; height: 14px; border-radius: 5px; background: #E4E0DA; flex-shrink: 0; }
.sxw-row span { height: 5px; border-radius: 999px; background: #DDD8E6; width: 52%; }
.sxw-row em { width: 12px; height: 12px; border-radius: 999px; margin-left: auto; background: #6C2BD9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; }
/* the owner: picks a cause, sees matched charities, sets an amount and how often */
.sxw-o-chips { display: flex; gap: 6px; }
.sxw-o-chips i { height: 14px; width: 30%; border-radius: 999px; background: #FFFFFF; border: 1px solid #DDD8E6; }
.sxw-o-chips i { position: relative; overflow: hidden; }
.sxw-o-chips i.is-pick::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: #6C2BD9; }
.sxw-o-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sxw-o-rows .is-pick b { background: #6C2BD9; }
.sxw-o-set { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sxw-o-track { position: relative; flex: 1; height: 6px; border-radius: 999px; background: #E4E0DA; overflow: hidden; }
.sxw-o-track i { position: absolute; inset: 0; border-radius: inherit; background: #6C2BD9; transform-origin: 0 50%; transform: scaleX(.66); }
.sxw-o-tog { position: relative; width: 26px; height: 15px; border-radius: 999px; background: #DDD8E6; flex-shrink: 0; }
.sxw-o-tog::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #6C2BD9; }
.sxw-o-tog i { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 999px; background: #FFFFFF; transform: translateX(11px); }
/* the charity: hears a business wants to give, confirms the gift, posts its update */
.sxw-c-note, .sxw-c-gift { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 8px; border-radius: 9px; background: #FFFFFF; border: 1px solid #EFECF4; }
.sxw-c-note b, .sxw-c-gift b { height: 5px; width: 36%; border-radius: 999px; background: #C9C3D4; }
.sxw-c-note span, .sxw-c-gift span { height: 5px; width: 22%; border-radius: 999px; background: #E4E0DA; }
.sxw-c-bell { width: 18px; height: 18px; border-radius: 999px; background: #6C2BD9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sxw-c-bell svg { width: 11px; height: 11px; fill: #FFFFFF; }
.sxw-c-gift { margin-top: 7px; }
.sxw-c-ring { width: 18px; height: 18px; flex-shrink: 0; transform: rotate(-90deg); }
.sxw-c-ring circle { fill: none; stroke: #E4E0DA; stroke-width: 4; }
.sxw-c-ring circle.is-fill { stroke: #15803D; stroke-dasharray: 100 100; }
.sxw-c-ring .is-tick { fill: none; stroke: #15803D; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transform-origin: 18px 18px; }
.sxw-c-post { position: relative; margin-top: 8px; padding: 8px 9px; border-radius: 10px; background: #F5F0FC; border: 1px solid #DFD0F7; display: flex; flex-direction: column; gap: 5px; }
.sxw-c-post i { height: 5px; border-radius: 999px; background: #AE8AEA; transform-origin: 0 50%; }
.sxw-c-post i:nth-child(1) { width: 78%; background: #6C2BD9; } .sxw-c-post i:nth-child(2) { width: 64%; } .sxw-c-post i:nth-child(3) { width: 44%; }
.sxw-c-post em { position: absolute; right: 8px; top: 8px; width: 13px; height: 13px; border-radius: 999px; background: #6C2BD9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; }
/* the marketer: the update becomes posts and a video script, ready to approve */
.sxw-app-body.is-marketer { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto 1fr; gap: 9px 12px; }
.sxw-m-src { grid-row: 1 / 3; padding: 8px; border-radius: 10px; background: #F5F0FC; border: 1px solid #DFD0F7; display: flex; flex-direction: column; gap: 5px; }
.sxw-m-src i { height: 5px; border-radius: 999px; background: #AE8AEA; }
.sxw-m-src i:nth-child(1) { background: #6C2BD9; width: 86%; } .sxw-m-src i:nth-child(3) { width: 58%; }
.sxw-m-out { display: flex; align-items: flex-end; gap: 6px; height: 40px; }
.sxw-m-out span { border-radius: 5px; background: #FFFFFF; border: 1px solid #DDD8E6; box-shadow: inset 0 -5px 0 #E6D9FB; }
.sxw-m-out .is-sq { width: 28px; height: 28px; } .sxw-m-out .is-wide { width: 40px; height: 24px; } .sxw-m-out .is-tall { width: 22px; height: 38px; }
.sxw-m-script { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; align-content: flex-start; }
.sxw-m-play { width: 16px; height: 16px; border-radius: 999px; background: #141219; position: relative; flex-shrink: 0; }
.sxw-m-play::after { content: ""; position: absolute; left: 6px; top: 4.5px; border-left: 6px solid #FFFFFF; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; }
.sxw-m-script i { height: 5px; border-radius: 999px; background: #C9C3D4; width: calc(100% - 24px); transform-origin: 0 50%; }
.sxw-m-script i:last-child { width: 60%; margin-left: 22px; }
.sxw-m-ok { position: absolute; right: 12px; bottom: 10px; width: 26px; height: 26px; border-radius: 999px; background: #6C2BD9;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px #6C2BD9; }
.sxw-m-ok svg { width: 15px; height: 15px; fill: none; stroke: #FFFFFF; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  /* each window plays an 8s story on loop; the three start a beat apart */
  html.sx-on .sxw-role:nth-child(2) .sxw-app { --o: .7s; }
  html.sx-on .sxw-role:nth-child(3) .sxw-app { --o: 1.4s; }
  html.sx-on .sxw-o-chips i.is-pick::after { animation: sxw-o-pick 8s ease var(--o, 0s) infinite both; }
  html.sx-on .sxw-o-rows .sxw-row { animation: sxw-in 8s var(--sx-ease) var(--o, 0s) infinite both; }
  html.sx-on .sxw-o-rows .sxw-row:nth-child(2) { animation-name: sxw-in2; }
  html.sx-on .sxw-o-rows .sxw-row:nth-child(3) { animation-name: sxw-in3; }
  html.sx-on .sxw-o-rows .is-pick b, html.sx-on .sxw-o-rows .is-pick em { animation: sxw-o-row 8s ease var(--o, 0s) infinite both; }
  html.sx-on .sxw-o-track i { animation: sxw-o-amt 8s cubic-bezier(.3,.7,.3,1) var(--o, 0s) infinite both; }
  html.sx-on .sxw-o-tog::before { animation: sxw-o-tog 8s ease var(--o, 0s) infinite both; }
  html.sx-on .sxw-o-tog i { animation: sxw-o-knob 8s ease var(--o, 0s) infinite both; }
  html.sx-on .sxw-c-note { animation: sxw-c-note 8s cubic-bezier(.34,1.56,.64,1) var(--o, 0s) infinite both; }
  html.sx-on .sxw-c-gift { animation: sxw-in2 8s var(--sx-ease) var(--o, 0s) infinite both; }
  html.sx-on .sxw-c-ring circle.is-fill { animation: sxw-c-ring 8s ease-in-out var(--o, 0s) infinite both; }
  html.sx-on .sxw-c-ring .is-tick { animation: sxw-c-tick 8s ease var(--o, 0s) infinite both; }
  html.sx-on .sxw-c-post i { animation: sxw-type 8s ease var(--o, 0s) infinite both; }
  html.sx-on .sxw-c-post i:nth-child(2) { animation-name: sxw-type2; }
  html.sx-on .sxw-c-post i:nth-child(3) { animation-name: sxw-type3; }
  html.sx-on .sxw-c-post em { animation: sxw-pop 8s cubic-bezier(.34,1.56,.64,1) var(--o, 0s) infinite both; }
  html.sx-on .sxw-m-out span { animation: sxw-fan 8s cubic-bezier(.34,1.4,.64,1) var(--o, 0s) infinite both; }
  html.sx-on .sxw-m-out .is-wide { animation-name: sxw-fan2; }
  html.sx-on .sxw-m-out .is-tall { animation-name: sxw-fan3; }
  html.sx-on .sxw-m-script i { animation: sxw-type2 8s ease var(--o, 0s) infinite both; }
  html.sx-on .sxw-m-script i:last-child { animation-name: sxw-type3; }
  html.sx-on .sxw-m-ok { animation: sxw-ok 8s cubic-bezier(.34,1.56,.64,1) var(--o, 0s) infinite both; }
}
@keyframes sxw-o-pick { 0%, 8% { opacity: 0; } 12%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sxw-in { 0%, 14% { opacity: 0; transform: translateY(6px); } 20%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-in2 { 0%, 19% { opacity: 0; transform: translateY(6px); } 25%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-in3 { 0%, 24% { opacity: 0; transform: translateY(6px); } 30%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-o-row { 0%, 36% { opacity: 0; transform: scale(.4); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-o-amt { 0%, 48% { transform: scaleX(.04); } 64%, 92% { transform: scaleX(.66); } 100% { transform: scaleX(.04); } }
@keyframes sxw-o-tog { 0%, 70% { opacity: 0; } 74%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sxw-o-knob { 0%, 70% { transform: translateX(0); } 74%, 92% { transform: translateX(11px); } 100% { transform: translateX(0); } }
@keyframes sxw-c-note { 0%, 6% { opacity: 0; transform: translateY(-10px) scale(.9); } 12%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-c-ring { 0%, 26% { stroke-dashoffset: 100; } 44%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } }
@keyframes sxw-c-tick { 0%, 44% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sxw-type { 0%, 52% { transform: scaleX(0); } 60%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sxw-type2 { 0%, 58% { transform: scaleX(0); } 66%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sxw-type3 { 0%, 64% { transform: scaleX(0); } 72%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes sxw-pop { 0%, 76% { opacity: 0; transform: scale(.3); } 82%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-fan { 0%, 14% { opacity: 0; transform: translateX(-30px) scale(.6); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-fan2 { 0%, 20% { opacity: 0; transform: translateX(-40px) scale(.6); } 28%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-fan3 { 0%, 26% { opacity: 0; transform: translateX(-50px) scale(.6); } 34%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes sxw-ok { 0%, 78% { transform: scale(.5); opacity: .25; } 84%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(.5); opacity: .25; } }