/* ==================================================================
   FLEXIBLE FUNDING — styles for partials/funding-section.html
   Consumed by index.html and page/funding.html.

   Ported from update/updateRefranceUI/Funding.html, then updated to the
   stage-2 reference update/stage2/funding-section.html. Five deliberate
   deviations from those prototypes, all of them required by this site:

   1. CLASS NAMES. The prototype reused the mockup's bare .container,
      .eyebrow, .section-head, .btn and .btn-gold. Three of those are
      live Bootstrap 5 classes here (.container, .btn) and would have
      collided site-wide, so the section's own furniture is namespaced
      .rz-fund__*. Everything below is scoped under .rz-fund and cannot
      reach any other component.

   2. FONTS. The prototype loads Marcellus + Inter from Google Fonts.
      Neither covers Arabic and NFR-10 requires the site stay
      Arabic-ready, so both are replaced with the self-hosted
      'Ping AR + LT' the rest of www2026 uses. No webfont is fetched.

   3. TILES ARE ALWAYS A LIGHT PLATE. The prototype's own note says the
      dark variant is only safe when each brand supplies its REVERSE /
      WHITE mark. The artwork in image/payments/ is the primary colour
      set — Visa #1434CB, Amex #006FCF and UnionPay's #004889 all fall
      below usable contrast on Institutional Navy, and the Apple Pay mark
      is solid #000000, which is worse. So every tile carries a white
      plate in both themes. This keeps the marks legible without
      recolouring them, which the licences do not permit.

   4. FIVE PER ROW, AND THE SHORT ROW CENTRES. Nine tiles ship (see the
      inventory note in the partial): five card/wallet marks, then Google
      Pay and three line icons. Because nine does not divide by five, the
      row is flex rather than grid — §4 explains why grid cannot centre a
      short final row.

   5. THE SHELL FOLLOWS THE SITE THEME. The stage-2 reference ships
      light-only, because on ITS markup the navy Visa/Amex marks sit
      directly on the section background and fall to 2.0–2.9:1. That is
      not our situation — deviation 3 keeps a white plate under every
      mark in both themes — so the shell tracks the moon toggle like the
      rest of the page: navy by default, ivory in light theme. The
      reference's own .rz-fund--dark values supply the dark numbers.
      Its animated ambient glow is gone; the backdrop is now the static
      engraved rosette, which is why nothing here needs disabling under
      prefers-reduced-motion.

   Tokens resolve against :root in style.css; the mirror below only
   covers the three values style.css does not define.
   ================================================================== */

/* #region ------- ( 1- Scoped tokens + reset ) ---------- */
.rz-fund {
  --line-dark: rgba(214, 166, 28, 0.22);
  --line-light: #e4e1da;
  --text-muted-dark: rgba(248, 248, 248, 0.72);
  --text-muted-light: #5b5e66;
  --fund-max-w: 1240px;
}
.rz-fund,
.rz-fund *,
.rz-fund *::before,
.rz-fund *::after {
  box-sizing: border-box;
}
/* #endregion */

/* #region ------- ( 2- Section shell ) ---------- */
.rz-fund {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0;
  font-family:
    'Ping AR + LT',
    -apple-system,
    sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background: var(--royce-navy);
  color: var(--royce-ivory);
}

/* hairline seam, top edge */
.rz-fund::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--line-dark) 30%, rgba(214, 166, 28, 0.4) 50%, var(--line-dark) 70%, transparent);
}

.rz-fund__container {
  position: relative;
  z-index: 2;
  max-width: var(--fund-max-w);
  margin: 0 auto;
  padding: 0 40px;
}

/* engraved rosette — hairline concentric families struck slightly off-centre
   from one another so they interfere, the way a guilloché lathe cuts a security
   print. Static by design: engraving does not drift. Values below are the
   reference's DARK variant, because navy is this site's default theme; §5
   carries the light ones. */
.rz-fund__engraving {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.rz-fund__guilloche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
}
.rz-fund__guilloche .g-fam circle,
.rz-fund__guilloche .g-rays line {
  vector-effect: non-scaling-stroke;
}
.rz-fund__guilloche .g-fam {
  stroke: #d6a61c;
  stroke-width: 1;
  opacity: 0.3;
}
.rz-fund__guilloche .g-fam--offset {
  stroke: #c8c8c8;
  opacity: 0.1;
}
.rz-fund__guilloche .g-rays {
  stroke: #d6a61c;
  stroke-width: 1;
  opacity: 0.16;
}
/* #endregion */

/* #region ------- ( 3- Section head + CTA ) ---------- */
.rz-fund__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--royce-gold);
  margin-bottom: 16px;
}
.rtl .rz-fund__eyebrow {
  letter-spacing: normal;
}

.rz-fund__head {
  max-width: 660px;
  margin: 0 auto 56px;
  text-align: center;
}
.rz-fund__head h2 {
  font-family: 'Ping AR + LT', serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}
.rtl .rz-fund__head h2 {
  letter-spacing: normal;
}
.rz-fund__head p {
  font-size: 0.98rem;
  margin: 0;
  color: var(--text-muted-dark);
}

.rz-fund__cta {
  margin-top: 32px;
  text-align: center;
}
/* Colour and motion; the box is css/buttons.css's, and so is the RTL tracking
   reset that used to sit under this rule. */
.rz-fund__btn {
  border-color: var(--royce-gold);
  background: var(--royce-gold);
  color: var(--royce-black);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.rz-fund__btn:hover,
.rz-fund__btn:focus-visible {
  background: var(--royce-gold-hover);
  border-color: var(--royce-gold-hover);
  color: var(--royce-black);
}
.rz-fund a:focus-visible {
  outline: 2px solid var(--royce-gold);
  outline-offset: 3px;
}
/* #endregion */

/* #region ------- ( 4- Payment grid ) ---------- */
/* Flex, not grid, and that is load-bearing. Nine tiles fill five columns then
   four, and CSS Grid has no way to centre a short final row — the four would
   sit left-aligned under the five with a hole on the right. Flex wrap +
   justify-content does centre it. The basis reproduces the old five-column
   track exactly, so nothing else moves.
   The gap lives in a custom property because .rz-pay's basis has to subtract
   it; the 1180px breakpoint retunes both by setting the one value. */
.rz-pay-grid {
  --rz-pay-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rz-pay-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Light plate in both themes — see deviation 3 in the header note. */
.rz-pay {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - 4 * var(--rz-pay-gap, 16px)) / 5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 118px;
  padding: 26px 14px;
  background: #ffffff;
  border: 1px solid var(--line-light);
  transition:
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

/* fixed-height box → zero layout shift, whatever the asset's aspect */
.rz-pay__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 34px;
}
.rz-pay__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: var(--cap, 26px); /* per-brand optical height */
  max-width: 100%;
  /* no opacity, no filter, no recolour — marks render exactly as supplied */
}
.rz-pay__icon {
  width: 32px;
  height: 32px;
  color: var(--royce-grey);
  transition: color 0.3s ease;
}
.rz-pay__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* fallback when an asset is absent — js/funding.js swaps the <img> for this */
.rz-pay__textmark {
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--royce-grey);
  transition: color 0.3s ease;
}
.rz-pay__label {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: #6e727c; /* 4.62:1 on the white plate */
  transition: color 0.3s ease;
}
.rtl .rz-pay__label {
  letter-spacing: normal;
}
.rz-pay.is-textmark .rz-pay__label {
  display: none;
}

/* hover — container illuminates; the artwork itself is never touched */
@media (hover: hover) and (pointer: fine) {
  .rz-pay:hover {
    border-color: var(--royce-gold);
    background: #ffffff;
    box-shadow:
      0 14px 30px -18px rgba(17, 17, 17, 0.5),
      0 0 0 1px rgba(214, 166, 28, 0.22);
    transform: translateY(-3px);
  }
  .rz-pay:hover .rz-pay__icon,
  .rz-pay:hover .rz-pay__textmark,
  .rz-pay:hover .rz-pay__label {
    color: #8e6e0d; /* 4.79:1 on the white plate */
  }
}
.rz-pay:active {
  border-color: var(--royce-gold);
}

.rz-pay-disclosure {
  margin: 40px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.65;
  color: rgba(248, 248, 248, 0.55);
}
.rz-pay-disclosure__marks {
  display: block;
  margin-top: 8px;
  color: rgba(248, 248, 248, 0.54);
}
/* #endregion */

/* #region ------- ( 5- Light theme shell ) ----------
   The site's moon toggle drops data-bs-theme="dark" from <html>. The tiles
   do not change — only the shell around them. Mirrors .rz-fund--light in
   the reference prototype. */
html:not([data-bs-theme='dark']) .rz-fund {
  background: var(--royce-ivory);
  color: var(--royce-grey);
}
html:not([data-bs-theme='dark']) .rz-fund::before {
  background: linear-gradient(90deg, transparent, var(--line-light) 30%, rgba(214, 166, 28, 0.45) 50%, var(--line-light) 70%, transparent);
}
html:not([data-bs-theme='dark']) .rz-fund__head h2 {
  color: var(--royce-black);
}
html:not([data-bs-theme='dark']) .rz-fund__head p,
html:not([data-bs-theme='dark']) .rz-pay-disclosure {
  color: var(--text-muted-light);
}
html:not([data-bs-theme='dark']) .rz-pay-disclosure__marks {
  color: #6e727c;
}
/* engraving reads harder on ivory — the reference's light values */
html:not([data-bs-theme='dark']) .rz-fund__guilloche .g-fam {
  opacity: 0.42;
}
html:not([data-bs-theme='dark']) .rz-fund__guilloche .g-fam--offset {
  stroke: #2e3137;
  opacity: 0.13;
}
html:not([data-bs-theme='dark']) .rz-pay {
  background: #ffffff;
}
/* #endregion */

/* #region ------- ( 6- Standalone /funding page ) ----------
   The homepage reaches this section after a hero. On /funding it is the first
   thing under a position:fixed navbar (.header-inner is min-height:78px), so
   the page variant reserves that clearance itself. */
.rz-fund--page {
  padding-top: calc(96px + 78px);
}
@media (max-width: 900px) {
  .rz-fund--page {
    padding-top: calc(68px + 78px);
  }
}
/* #endregion */

/* #region ------- ( 7- Entrance ) ----------
   Fade + rise, staggered by column, once only. */
.rz-fund__head,
.rz-pay,
.rz-pay-disclosure,
.rz-fund__cta {
  opacity: 0;
  transform: translateY(24px);
}
.rz-fund.is-inview .rz-fund__head,
.rz-fund.is-inview .rz-pay,
.rz-fund.is-inview .rz-pay-disclosure,
.rz-fund.is-inview .rz-fund__cta {
  animation: rz-rise 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.rz-fund.is-inview .rz-fund__head {
  animation-delay: 0ms;
}
/* both rows sweep left→right together: 160 + 4 × 56ms + 520ms ≈ 905ms total */
.rz-fund.is-inview .rz-pay {
  animation-delay: calc(160ms + var(--col, 0) * 56ms);
}
.rz-fund.is-inview .rz-pay-disclosure {
  animation-delay: 600ms;
}
.rz-fund.is-inview .rz-fund__cta {
  animation-delay: 660ms;
}
@keyframes rz-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* #endregion */

/* #region ------- ( 8- Responsive ) ---------- */
@media (max-width: 1180px) {
  .rz-pay-grid {
    --rz-pay-gap: 14px;
  }
}
@media (max-width: 900px) {
  .rz-fund {
    padding: 68px 0;
  }
  .rz-fund__container {
    padding: 0 24px;
  }
  .rz-fund__head {
    margin-bottom: 40px;
  }
}
/* Edge-fade widths, registered so they can be TRANSITIONED. Unregistered
   custom properties are untyped and snap between values, which is why the
   rail's fades used to pop the moment a swipe reached either end — three
   whole mask-image declarations were being swapped by class. One declaration
   now reads these two lengths and the classes only move the lengths, so the
   fade opens and closes instead of appearing. Must sit at the top level:
   @property inside @media is invalid and is dropped.

   A browser without @property still gets the correct rail — it just returns
   to the instant swap, which is what shipped before. */
@property --rz-fade-start {
  syntax: '<length>';
  inherits: false;
  initial-value: 24px;
}
@property --rz-fade-end {
  syntax: '<length>';
  inherits: false;
  initial-value: 24px;
}

@media (max-width: 600px) {
  /* horizontal swipe rail, scrollbar hidden, edge fade */
  .rz-pay-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Mandatory, aligned to the tile's leading edge. `proximity` let a flick
       settle anywhere, so tiles came to rest half-under the edge fade and the
       rail read as loose; the snap now always resolves to a tile. */
    scroll-snap-type: x mandatory;
    /* Keeps a snapped tile clear of the 24px fade instead of landing beneath
       it — the reason the first tile looked clipped after a swipe. */
    scroll-padding-inline: 24px;
    /* Stops a horizontal flick from chaining into the page and, on iOS, into
       the browser's back-swipe. This is most of what made the rail feel like
       it was fighting the user. */
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    --rz-fade-start: 24px;
    --rz-fade-end: 24px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rz-fade-start), #000 calc(100% - var(--rz-fade-end)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--rz-fade-start), #000 calc(100% - var(--rz-fade-end)), transparent 100%);
    transition:
      --rz-fade-start 180ms ease,
      --rz-fade-end 180ms ease;
  }
  /* Only the reached edge loses its fade. The gradient is physical (90deg), so
     RTL — where the rail starts at the right — maps to the opposite end. */
  .rz-pay-scroller.is-start {
    --rz-fade-start: 0px;
  }
  .rz-pay-scroller.is-end {
    --rz-fade-end: 0px;
  }
  .rtl .rz-pay-scroller.is-start {
    --rz-fade-start: 24px;
    --rz-fade-end: 0px;
  }
  .rtl .rz-pay-scroller.is-end {
    --rz-fade-start: 0px;
    --rz-fade-end: 24px;
  }
  .rz-pay-scroller::-webkit-scrollbar {
    display: none;
  }
  /* Back to grid for the swipe rail — display:grid makes .rz-pay's flex basis
     inert, so the fixed 132px track wins and the tiles stop stretching. */
  .rz-pay-grid {
    --rz-pay-gap: 12px;
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 132px;
    /* THE RAIL DOES NOT WORK WITHOUT THIS. The base rule centres the tiles
       (justify-content: center, line 210) — correct for the wrapping flex
       grid, fatal for a scroller. Once the tracks are wider than the
       container, centring splits the overflow across BOTH sides, and the half
       that lands to the left of the scroll origin cannot be scrolled to:
       scrollLeft 0 already starts mid-rail, so the first column is
       permanently unreachable. Switching display to grid does not reset it —
       justify-content stays valid and keeps centring the tracks. */
    justify-content: start;
  }
  .rz-pay {
    min-height: 104px;
    padding: 20px 10px;
    /* Leading-edge, to match the mandatory snap above. A 132px tile centred
       in a ~330px scrollport has its centre 66px in, so under `center` no
       snap position resolves at scrollLeft 0 and the rail cannot rest at its
       own start. (The unreachable first column was the grid's centred
       overflow, not this — see justify-content on .rz-pay-grid above.) */
    scroll-snap-align: start;
  }
  /* The marquee runs at every width — its rules are region 10, not here. What
     IS mobile-only is suppressing the scroller's own edge mask when the
     marquee is up: the marquee carries its own, and two masks over the same
     pixels double the fade. */
  .rz-pay-scroller.rz-has-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rz-pay-disclosure {
    margin-top: 28px;
  }
  /* Full width on mobile. Expressed as a width rather than `display: block`,
     which css/buttons.css overrides with the shared inline-flex that centres
     every label — this way the button still goes full-bleed and stays centred. */
  .rz-fund__btn {
    width: 100%;
  }
  /* fade only — no vertical travel on mobile */
  .rz-fund .rz-pay {
    transform: none;
  }
  .rz-fund.is-inview .rz-pay {
    animation-name: rz-fade;
    animation-duration: 400ms;
  }
  @keyframes rz-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Mobile stagger, tightened. The desktop ladder ends at 660 + 520 ≈ 1.18s,
     which is a long wait for the CTA on a viewport this section nearly fills —
     and the last two tile columns spend it off the right edge of the rail
     where the fade cannot be seen anyway. Same order, ~40% shorter.

     The rise also drops from 24px to 14px: at this width the travel was
     covering more of the card than it revealed. */
  .rz-fund .rz-fund__head,
  .rz-fund .rz-pay-disclosure,
  .rz-fund .rz-fund__cta {
    transform: translateY(14px);
  }
  .rz-fund.is-inview .rz-fund__head,
  .rz-fund.is-inview .rz-pay-disclosure,
  .rz-fund.is-inview .rz-fund__cta {
    animation-duration: 440ms;
  }
  .rz-fund.is-inview .rz-pay {
    animation-delay: calc(120ms + var(--col, 0) * 40ms);
  }
  .rz-fund.is-inview .rz-pay-disclosure {
    animation-delay: 380ms;
  }
  .rz-fund.is-inview .rz-fund__cta {
    animation-delay: 440ms;
  }
  @keyframes rz-rise-sm {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .rz-fund.is-inview .rz-fund__head,
  .rz-fund.is-inview .rz-pay-disclosure,
  .rz-fund.is-inview .rz-fund__cta {
    animation-name: rz-rise-sm;
  }
}
/* #endregion */

/* #region ------- ( 9- Marquee ) ----------
   js/funding.js §6 rebuilds the tile grid into two tracks and drifts them in
   opposite directions, looping, AT EVERY WIDTH. The tiles are MOVED, not
   copied, so the accessible inventory stays exactly one deep; every repeat
   past the first is cloned and aria-hidden.

   It replaces the layout it is built from rather than joining it: the grid is
   emptied and hidden, so below 600px the swipe rail stops overflowing and
   initMobileRail() retires its own tabindex and edge classes, and above 600px
   the centred wrapping flex row simply has nothing left to lay out.

   Under prefers-reduced-motion the marquee is never built, and what ships is
   the untouched original — the wrapping grid on desktop, the manual snap rail
   on mobile. That fallback is why every rule those two depend on stays.

   TILE WIDTH IS FIXED PER BREAKPOINT and cannot be fluid: the loop resets on
   a measured multiple of the tile pitch, so a tile that resizes between
   measurements desynchronises the seam. js/funding.js re-measures on resize
   for exactly this reason. */
.rz-pay-grid[hidden] {
  display: none;
}
.rz-pay-marquee {
  --rz-marquee-tile: 216px;
  --rz-marquee-gap: 16px;
  display: grid;
  gap: var(--rz-marquee-gap);
  /* Both ends fade so tiles enter and leave rather than being clipped by the
     container edge. Replaces the scroller's mask, which is suppressed while
     the marquee is up — see .rz-has-marquee in region 8. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.rz-pay-marquee__row {
  overflow: hidden;
}
.rz-pay-marquee__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: rz-pay-marquee var(--rz-marquee-dur, 40s) linear infinite;
}
/* Spacing MUST be margin, not gap. The loop resets at translateX(-50%), and
   that is only exactly half the track when every tile occupies the same
   width + spacing; `gap` puts one fewer gap than tiles into the track and the
   seam slips by that much on every lap. */
.rz-pay-marquee__track > .rz-pay {
  flex: 0 0 var(--rz-marquee-tile);
  margin-inline-end: var(--rz-marquee-gap);
}
.rz-pay-marquee__row--reverse .rz-pay-marquee__track {
  animation-direction: reverse;
}
/* Physical transform, so RTL swaps which row runs which way to keep the
   motion mirrored rather than identical. */
.rtl .rz-pay-marquee__track {
  animation-direction: reverse;
}
.rtl .rz-pay-marquee__row--reverse .rz-pay-marquee__track {
  animation-direction: normal;
}
@keyframes rz-pay-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/* Press and hold to stop it. :active covers touch and mouse; :focus-within
   covers the keyboard, since the tiles are not themselves focusable but a
   future link inside one would be. */
.rz-pay-marquee:active .rz-pay-marquee__track,
.rz-pay-marquee:focus-within .rz-pay-marquee__track {
  animation-play-state: paused;
}
/* Tile pitch per breakpoint. The static grid sizes tiles fluidly —
   calc((100% - 4 * gap) / 5), which lands on ~219px at the 1240px container —
   and a marquee cannot: a percentage width inside a max-content track is
   cyclic, and a tile that resizes mid-loop desynchronises the seam. These are
   fixed values chosen to sit close to what that formula resolves to at the
   same widths, so turning the marquee off changes the motion without visibly
   changing the tile. */
@media (max-width: 1180px) {
  .rz-pay-marquee {
    --rz-marquee-tile: 184px;
    --rz-marquee-gap: 14px;
  }
}
@media (max-width: 900px) {
  .rz-pay-marquee {
    --rz-marquee-tile: 152px;
  }
}
@media (max-width: 600px) {
  .rz-pay-marquee {
    --rz-marquee-tile: 132px;
    --rz-marquee-gap: 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  }
}
/* #endregion */

/* #region ------- ( 10- Reduced motion ) ---------- */
/* The engraving is static, so only the entrance needs neutralising here. */
@media (prefers-reduced-motion: reduce) {
  /* js/funding.js does not build the marquee under this query at all; this is
     the belt-and-braces half, for the case where the preference is turned on
     after the tracks are already running. */
  .rz-pay-marquee__track {
    animation: none;
  }
  .rz-fund .rz-fund__head,
  .rz-fund .rz-pay,
  .rz-fund .rz-pay-disclosure,
  .rz-fund .rz-fund__cta {
    transform: none;
  }
  .rz-fund.is-inview .rz-fund__head,
  .rz-fund.is-inview .rz-pay,
  .rz-fund.is-inview .rz-pay-disclosure,
  .rz-fund.is-inview .rz-fund__cta {
    animation: rz-fade-only 200ms linear forwards;
    animation-delay: 0ms !important;
  }
  @keyframes rz-fade-only {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .rz-fund *,
  .rz-fund *::before,
  .rz-fund *::after {
    transition: none !important;
  }
  .rz-pay:hover {
    transform: none;
  }
}
/* #endregion */