/* Donate: closing call to action. Phosphor icons drift around the text (donate.js).
   .finale is the light backdrop that shows at the sides while the card expands to full width. */
.finale { position: relative; z-index: 7; margin-top: calc(var(--radius-xl) * -1); background: var(--paper); }
.donate {
  --inset: 0px; --round-t: var(--radius-xl); --round-b: 0px;
  position: relative; overflow: clip; isolation: isolate;
  margin-inline: var(--inset);
  border-radius: var(--round-t) var(--round-t) var(--round-b) var(--round-b);
  background:
    radial-gradient(46rem 30rem at 50% 108%, rgb(73 248 57 / .16), transparent 70%),
    radial-gradient(40rem 28rem at 50% -10%, rgb(48 48 136 / .7), transparent 70%),
    var(--navy);
  padding-block: calc(var(--section-y) * 1.1);
  text-align: center;
}
.donate__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.75rem; }
.donate__title { font-size: clamp(2.5rem, 1rem + 6.4vw, 6.25rem); max-width: 12ch; }
/* Under 340px the 40px minimum leaves the widest line (about 278px) no slack in a 280px box. */
@media (max-width: 339px) { .donate__title { font-size: 2.25rem; } }
.donate__lede { max-width: 36rem; }
.donate__cta { display: grid; justify-items: center; gap: 1.25rem; margin-top: .5rem; }
.donate__cta .micro { margin: 0; }
.on-dark .donate__cta .micro { color: var(--on-dark-soft); }

/* Icons never touch the text (24px or more at any width, including the float and parallax drift).
   Narrow: two bands, above the title and below the note, which the extra padding makes room for.
   Wide: two side lanes, as wide as the space left beside the title (about 7.6em wide, the widest line)
   and sized to fit it; --t places an icon inside its lane, 0 at the card edge and 1 next to the text. */
.donate__icons {
  --el: max(1.25rem, env(safe-area-inset-left)); --er: max(1.25rem, env(safe-area-inset-right));
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.gx {
  --w: clamp(2.5rem, calc(var(--s) * .55), 2.75rem);
  position: absolute; width: var(--w); aspect-ratio: 1;
  left: clamp(var(--el), var(--mx), calc(100% - var(--w) - var(--er)));
  top: var(--mt, auto); bottom: var(--mb, auto);
}
.gx__in {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 32%; rotate: var(--r);
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 20px 40px -20px rgb(0 0 0 / .6);
  color: var(--lime); font-size: calc(var(--w) * .5);
  backdrop-filter: blur(4px);
}
@media (max-width: 719px) {
  .donate { padding-block: calc(var(--section-y) * 1.1 + 1.5rem); }
}
@media (min-width: 720px) {
  .donate { --lane: max(0px, calc(25.7vw - 7.4rem)); }
  .gx {
    --edge: var(--el);
    --w: min(var(--s), calc(var(--lane) - var(--edge)));
    --free: calc(var(--lane) - var(--edge) - var(--w));
    top: clamp(4rem, var(--y), calc(100% - var(--w) - 4rem)); bottom: auto;
    left: calc(var(--edge) + var(--t) * var(--free));
  }
  .gx--r { --edge: var(--er); left: auto; right: calc(var(--edge) + var(--t) * var(--free)); }
}

/* Footer */
.footer { background: var(--navy-900); padding-block: 2.5rem max(2.5rem, calc(1.25rem + env(safe-area-inset-bottom))); font-size: .9688rem; color: var(--on-dark-soft); }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; }
.footer a { color: var(--white); text-underline-offset: 3px; padding-block: .875rem; }   /* vertical padding on an inline link: 44px touch target, no layout change, wraps with the text */