/* Brand-coloured FlowButton: expanding circle, sliding arrows and rounded corners becoming a pill. */
body .flow-button,
body .flow-control {
  --flow-ink: #501315;
  --flow-light: #fff8ec;
  --flow-border: #50131566;
  position: relative !important;
  isolation: isolate;
  border: 1.5px solid var(--flow-border) !important;
  border-radius: var(--flow-radius, 100px) !important;
  background: transparent !important;
  color: var(--flow-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: border-color .6s cubic-bezier(.23,1,.32,1), border-radius .6s cubic-bezier(.23,1,.32,1), color .6s cubic-bezier(.23,1,.32,1), transform .6s cubic-bezier(.23,1,.32,1);
}
body .flow-button {
  --flow-radius: 16px;
  --flow-active-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  min-height: 46px;
  padding: 12px 38px !important;
  overflow: hidden;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
  transform: none;
}
body .flow-button::before, body .flow-button::after { content: none !important; }
body .flow-button > .flow-label {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  overflow-wrap: anywhere;
  transform: translateX(-10px);
  transition: transform .8s ease-out;
}
body .flow-button > .flow-label > span { color: inherit; font: inherit; }
body .flow-button > .flow-fill,
body .flow-control::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: var(--flow-ink);
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
  transition: clip-path .8s cubic-bezier(.19,1,.22,1);
}
body .flow-button > .flow-fill { z-index: 0; }
body .flow-control::before { z-index: -1; }
body .flow-button > .flow-arrow {
  position: absolute;
  z-index: 2;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  margin: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
  transition: left .8s cubic-bezier(.34,1.56,.64,1), right .8s cubic-bezier(.34,1.56,.64,1), opacity .6s;
}
body .flow-button > .flow-arrow-in { left: -25%; opacity: 0; }
body .flow-button > .flow-arrow-out { right: 16px; opacity: 1; }
body .flow-button > * { pointer-events: none; }

/* Focus and touch receive the same interaction without relying on hover. */
body :is(.flow-button,.flow-control):is(:focus-visible,:active):not(:disabled):not([aria-disabled=true]) {
  border-color: var(--flow-active-border, transparent) !important;
  border-radius: var(--flow-active-radius, 12px) !important;
  color: var(--flow-light) !important;
}
body .flow-button:is(:focus-visible,:active):not(:disabled):not([aria-disabled=true]) > .flow-fill,
body .flow-control:is(:focus-visible,:active):not(:disabled):not([aria-disabled=true])::before { clip-path: circle(150% at 50% 50%); }
body .flow-button:is(:focus-visible,:active):not(:disabled):not([aria-disabled=true]) > .flow-label { transform: translateX(10px); }
body .flow-button:is(:focus-visible,:active):not(:disabled):not([aria-disabled=true]) > .flow-arrow-in { left: 16px; opacity: 1; }
body .flow-button:is(:focus-visible,:active):not(:disabled):not([aria-disabled=true]) > .flow-arrow-out { right: -25%; opacity: 0; }
body :is(.flow-button,.flow-control):active:not(:disabled):not([aria-disabled=true]) { transform: scale(.95); }
body :is(.flow-button,.flow-control):focus-visible { outline: 2px solid #a36b3e; outline-offset: 4px; }
@media (hover:hover) and (pointer:fine) {
  body :is(.flow-button,.flow-control):hover:not(:disabled):not([aria-disabled=true]) {
    border-color: var(--flow-active-border, transparent) !important;
    border-radius: var(--flow-active-radius, 12px) !important;
    color: var(--flow-light) !important;
  }
  body .flow-button:hover:not(:disabled):not([aria-disabled=true]) > .flow-fill,
  body .flow-control:hover:not(:disabled):not([aria-disabled=true])::before { clip-path: circle(150% at 50% 50%); }
  body .flow-button:hover:not(:disabled):not([aria-disabled=true]) > .flow-label { transform: translateX(10px); }
  body .flow-button:hover:not(:disabled):not([aria-disabled=true]) > .flow-arrow-in { left: 16px; opacity: 1; }
  body .flow-button:hover:not(:disabled):not([aria-disabled=true]) > .flow-arrow-out { right: -25%; opacity: 0; }
}
body .flow-control:is([aria-pressed=true],[aria-selected=true],.is-selected) { color: var(--flow-light) !important; border-color: var(--flow-ink) !important; }
body .flow-control:is([aria-pressed=true],[aria-selected=true],.is-selected)::before { clip-path: circle(150% at 50% 50%); }
body :is(.flow-button,.flow-control):is(:disabled,[aria-disabled=true]) { opacity: .45; cursor: not-allowed; transform: none; }
body .flow-media { border-radius: 12px; transition: border-color .3s, box-shadow .3s; }
body .flow-media:is(:hover,:focus-visible,[aria-pressed=true]) { border-color: #a36b3e; box-shadow: 0 0 0 2px #a36b3e40; }

/* Keep existing responsive visibility, fixed utilities and form layouts. */
body .flow-control.n-list-toggle { position: fixed !important; background: var(--paper,#f9f1e5) !important; }
body :is(.n-close,.rq-close,.donation-close,.m-lightbox-close,.testimony-play).flow-control { position: absolute !important; }
body .testimony-play.flow-control { background: var(--paper,#f9f1e5) !important; }
body .testimony-play.flow-control:active { transform: translate(-50%,-50%) scale(.95); }
body .flow-button[hidden], body .flow-control[hidden] { display: none !important; }
body .site-header-modern > .flow-button { min-height: 44px; padding: 10px 32px !important; }
body .hero-actions .flow-button { background: #fff8ecb3 !important; }
/* Primary actions retain their solid wine background with the shared arrow animation. */
body :is(.site-header-modern > .support-button, .hero-actions > .primary-button, .menu-support).flow-button {
  --flow-radius: 16px;
  --flow-active-radius: 100px;
  --flow-border: var(--flow-ink);
  --flow-active-border: var(--flow-ink);
  background: var(--flow-ink) !important;
  color: var(--flow-light) !important;
}
body :is(.site-header-modern > .support-button, .hero-actions > .primary-button, .menu-support).flow-button > .flow-fill { display: none; }
body .n-card { cursor: pointer; }
body .n-card .flow-button { font-size: 14px; min-height: 40px; padding: 10px 32px !important; }
@media (max-width:760px) {
  body .site-header.site-header-modern > .support-button.flow-button { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  body .flow-button, body .flow-control, body .flow-media,
  body .flow-button > *, body .flow-control::before { transition: none !important; }
  body .flow-button > .flow-label { transform: none !important; }
  body :is(.flow-button,.flow-control):active { transform: none !important; }
}