/* ============================================================
   Pay Your Invoice — page-specific styles.
   Loaded AFTER home-v2.css + about-us.css. Reuses the shared .rd-about-hero /
   .rd-hero-std hero system (photo + purple square + dot grid) so this page matches
   every other interior page, and the shared .rd-btn system for the CTA.
   R5b: rebuilt from the legacy Bedford template, which still carried the OLD site's
   design and navigation and had an empty content block — no payment action at all.
   Copy and the Stripe destination are the client's, supplied 8 Sep 2026.
   ============================================================ */

.rd-pay-hero { background: #F4F7FF; }
/* Join the centred-hero group used by the industry pages, so the copy sits beside the
   photo rather than at the top of a tall media column. */
.rd-page .rd-pay-hero.rd-hero-std .rd-about-hero-inner { align-items: center; }
.rd-page .rd-pay-hero.rd-hero-std .rd-about-hero-copy h1 { max-width: 470px; margin-bottom: 0; }
/* R6: the decorative square was overlapping the top menu bar. Cause was mine — trimming this
   hero's empty band, I had zeroed the media column's shared `margin-top: 93px` and cut
   padding-top to 168px, which lifted the square 108px and pushed it up behind the nav
   (clearance -66px vs +42px on every other hero). Both shared values are restored, so this
   hero now clears the nav by the same 42px as /report, /about-us and /careers. Only the
   BOTTOM padding stays trimmed, which is what actually caused the empty band — this page's
   copy is a heading with no body paragraph beneath it. */
.rd-page .rd-pay-hero.rd-hero-std { padding-bottom: 84px; }

/* ---- Payment section ---- */
.rd-pay-body { padding: 86px 0 96px; background: #fff; }
.rd-pay-body-inner { max-width: 860px; }
.rd-pay-body p {
  font: 400 18px/1.65 var(--v2-font);
  color: var(--v2-text);
  margin: 0 0 34px;
}
.rd-page .rd-pay-btn { background: var(--v2-purple); color: #fff; }
.rd-page .rd-pay-btn:hover { background: var(--v2-purple-hover); }

@media (max-width: 980px) {
  .rd-pay-hero .rd-about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .rd-pay-hero .rd-about-hero-media img { width: 100%; }
  .rd-pay-hero .rd-about-hero-square,
  .rd-pay-hero .rd-about-hero-dots { display: none; }
  .rd-pay-body { padding: 56px 0 64px; }
  .rd-pay-body p { font-size: 17px; }
}
@media (max-width: 640px) {
  .rd-page .rd-pay-btn { width: 100%; justify-content: center; }
}