/* Site-wide editorial standard, inherited by every current and future public page.
   Keep these rules centralized: page/component styles must not redefine prose alignment.
   The final line remains natural; full justification never stretches short final lines. */
body :where(p, blockquote),
#main :where(p, li, blockquote),
footer :where(p) {
  text-align: justify !important;
  text-align-last: start !important;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}
#main :where(.prose, .editorial-intro, .team-biography, .president-letter) :where(p, li) {
  white-space: normal;
  text-wrap: wrap;
}
/* Interface labels, numeric displays and document identities keep a natural alignment. */
#main :where(nav, [role="navigation"]) :where(p, li),
#main :where(.adh-delay, .field-error, .confirm-dialog p),
footer .registration-reference {
  text-align: start !important;
  text-align-last: start !important;
}
#main :where(.att-name, .att-role, .member-journey li) {
  text-align: center !important;
  text-align-last: center !important;
}
/* One shared component for membership and donations. */
.payment-coordinates { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #dce6ec; border-radius: 16px; background: #f6f9fb; min-width: 0; }
.payment-coordinates h4 { margin: 0 0 1rem; color: #000; font-size: 1rem; font-weight: 700; line-height: 1.4; }
.payment-coordinates .payment-services { margin: 0; display: grid; gap: .7rem; }
.payment-coordinates .payment-service { --service-color: #ff7900; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .15rem .8rem; padding: .9rem 1rem; border: 1px solid #e1e8ed; border-inline-start: 3px solid var(--service-color); border-radius: 12px; background: #fff; min-width: 0; box-shadow: 0 2px 5px rgb(18 48 66 / 3%); }
.payment-coordinates .payment-service--mpesa { --service-color: #269c39; }
.payment-coordinates .payment-service--airtel { --service-color: #e4002b; }
.payment-coordinates .payment-service--equity { --service-color: #a32a2d; }
.payment-coordinates dt { display: contents; font-size: .78rem; letter-spacing: .01em; font-weight: 650; color: #000; }
.payment-service dt > span:last-child { grid-column: 2; align-self: end; }
.payment-service-logo { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 64px; min-height: 54px; align-self: center; }
.payment-service-logo img { display: block; object-fit: contain; max-width: 100%; flex-shrink: 0; }
.payment-coordinates dd { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; margin: 0; min-width: 0; text-align: start; }
.payment-coordinates .payment-number { user-select: all; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 1.13rem; line-height: 1.5; letter-spacing: .035em; font-weight: 750; color: #000; }
.payment-coordinates .payment-number--bank { font-size: .94rem; letter-spacing: .005em; overflow-wrap: anywhere; white-space: normal; word-break: normal; }
.payment-currency { display: inline-flex; padding: .15rem .45rem; border-radius: 5px; background: #f7eded; color: #8b292b; font-size: .65rem; line-height: 1.4; font-weight: 750; letter-spacing: .05em; }
@media (max-width: 480px) {
 .payment-coordinates { padding: .9rem; }
 .payment-coordinates .payment-service { grid-template-columns: 48px minmax(0, 1fr); padding: .8rem .65rem; column-gap: .6rem; }
 .payment-service-logo { width: 48px; }
 .payment-service-logo img { max-width: 46px; }
 .payment-coordinates .payment-number { font-size: 1.05rem; }
 .payment-coordinates .payment-number--bank { font-size: .82rem; }
}