/* ============================================
   REVAMP JOIN OPPORTUNITY
   The main "join" moment — vertical phased timeline.
   Distinct silhouette from the tabbed problem-interactive:
   all three phases visible at once as rows running down
   the page, with a hairline timeline rail on the left,
   a numbered marker, the animated glyph, and the comp
   breakdown. Visual family (gold-on-dark, plates over
   lifestyle imagery, Cormorant accents) preserved.
   ============================================ */

.rjoa {
  position: relative;
  overflow: hidden;
  /* New stacking context so the bg-image pseudo can sit at z-index 0
     without escaping the section. */
  isolation: isolate;
}

/* Background image — rendered into a pseudo-element with a fixed,
   intentionally-large height so it doesn't recalculate when the
   section's own height changes from accordions opening. The section's
   `overflow: hidden` clips the bottom of the image to the section's
   current height; when an accordion expands and the section grows
   taller, more of the already-sized image is simply revealed at the
   bottom rather than the image rescaling.
   The pseudo is anchored to the top so the top of the image stays
   visually pinned and new vertical space is added at the bottom. */
.rjoa.has-bg-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Tall enough to outlast any plausible accordion-expanded height. */
  height: 300vh;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Color overlay — sits between the background image and the content,
   tinted by the admin's overlay_color + overlay_opacity settings. */
.rjoa.has-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--overlay-color, #000);
  opacity: var(--overlay-opacity, 0.4);
  pointer-events: none;
}

.rjoa > * {
  position: relative;
  z-index: 2;
}

.rjoa__anchor {
  display: block;
  height: 0;
  scroll-margin-top: 80px;
}

/* ─── Editorial header — alignment is data-driven (left / center / right).
   Default is left, matching the original Revamp Join Opportunity look. */
.rjoa__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-md);
  max-width: 56ch;
  margin: 0 0 var(--space-3xl);
}

.rjoa__header[data-align="center"] {
  align-items: center;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.rjoa__header[data-align="right"] {
  align-items: flex-end;
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}

@media (min-width: 1024px) {
  .rjoa__header {
    gap: var(--space-lg);
    margin-bottom: var(--space-4xl);
  }
}

.rjoa__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-brand-accent);
  line-height: 1.4;
}

.rjoa__heading {
  margin: 0;
  font-size: clamp(2rem, 5vw + 0.5rem, 5rem);
  line-height: 0.96;
  letter-spacing: 0.015em;
  color: var(--clr-text-inverse);
  display: flex;
  flex-direction: column;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.rjoa__heading-line1 {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-text-inverse);
}

.rjoa__heading-line2 {
  display: block;
  font-weight: 400;
  /* Upright Cormorant — never italic */
  color: var(--clr-brand-accent);
  letter-spacing: 0;
  font-size: 0.85em;
  line-height: 1.05;
  margin-top: var(--space-xs);
}

.rjoa__lead {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.65;
  color: var(--clr-text-inverse);
  opacity: 0.86;
  text-wrap: pretty;
  max-width: 52ch;
}

@media (min-width: 1024px) {
  .rjoa__lead { font-size: var(--font-size-lg); }
}

.rjoa__lead p { margin: 0 0 var(--space-sm); }
.rjoa__lead p:last-child { margin-bottom: 0; }

.rjoa__manifesto {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.625rem);
  font-weight: 400;
  /* Upright Cormorant — never italic */
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--clr-brand-accent);
  text-wrap: balance;
  max-width: 36ch;
  padding-left: var(--space-md);
  border-left: 1px solid rgba(181, 168, 130, 0.4);
}

/* ============================================
   Vertical timeline — phases as glass plates
   Each phase is one full-width dark-glass card containing
   the glyph + content. A vertical hairline connector runs
   in the gap between consecutive cards.
   Mobile: stacked column, glyph above content.
   Desktop: 2-col within each card — glyph left, content right.
   ============================================ */
.rjoa__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Mobile: single column (vertical stack). Tablet+ becomes a 2-wide grid. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  position: relative;
}

@media (min-width: 768px) {
  .rjoa__timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .rjoa__timeline { gap: var(--space-2xl); }
}

@media (min-width: 1024px) {
  .rjoa__timeline { gap: var(--space-3xl); }
}

/* ─── Phase accordion shell ─────────────────────────────
   Wrapper <li> carries no visual; the <div class="...-details">
   inside is the frosted-glass card itself, toggled open/closed
   via aria-expanded by the inline script at the section's foot. */
.rjoa__phase {
  position: relative;
  list-style: none;
}

/* The accordion card itself — frosted glass with admin-controlled
   blur / tint / opacity / radius via CSS variables (set inline). */
.rjoa__phase-details {
  position: relative;
  isolation: isolate;
  border-radius: var(--rjoa-frosted-radius, 16px);
  border: 1px solid rgba(253, 252, 250, 0.18);
  overflow: hidden;
}

/* Frosted layer — colored tint + backdrop-filter on a pseudo-element so
   the opacity doesn't bleed into text content above it. */
.rjoa__phase-details::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--rjoa-frosted-color, #ffffff);
  opacity: var(--rjoa-frosted-opacity, 0.18);
  backdrop-filter: blur(var(--rjoa-frosted-blur, 16px));
  -webkit-backdrop-filter: blur(var(--rjoa-frosted-blur, 16px));
  pointer-events: none;
}

/* Vertical connector between cards (kept from v1 — runs down the timeline). */
.rjoa__phase::after {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  width: 1px;
  height: calc(var(--space-xl) - 8px);
  background: rgba(181, 168, 130, 0.42);
  pointer-events: none;
}

/* Connector line is a vertical-stack decoration only. Once the timeline
   becomes a 2-wide grid (tablet+), the connector no longer makes
   visual sense, so it's hidden at that breakpoint and up. */
@media (min-width: 768px) {
  .rjoa__phase::after { display: none; }
}

.rjoa__phase:last-child::after { display: none; }

/* ─── Summary (always visible row) ────────────────────
   Icon | Titles (centered vertically) | Rate | Toggle chevron.
   Whole row is clickable to expand. */
.rjoa__phase-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  /* Tightened horizontal padding + column gap so the icon hugs the
     left edge and the rate + chevron hug the right edge — freeing up
     middle space for the title and time horizon. Vertical padding is
     unchanged so card height stays balanced. */
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  cursor: pointer;
  /* Reset native <button> defaults so the summary inherits the
     phase card's surface seamlessly. */
  width: 100%;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.rjoa__phase-summary:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 2px;
}

@media (min-width: 1024px) {
  .rjoa__phase-summary {
    gap: var(--space-md);
    padding: var(--space-xl) var(--space-lg);
  }
}


/* ─── Icon cell ───────────────────────────────────────
   Square slot for the uploaded SVG/PNG or the fallback character. */
.rjoa__phase-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--clr-brand-accent);
}

@media (min-width: 1024px) {
  .rjoa__phase-icon { width: 72px; height: 72px; }
}

.rjoa__phase-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fallback character — sized to roughly match the icon footprint so
   1–2 digits / characters read as a visual replacement for the icon. */
.rjoa__phase-icon-fallback {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--clr-brand-accent);
}

@media (min-width: 1024px) {
  .rjoa__phase-icon-fallback { font-size: 42px; }
}

/* ─── Title group — centered vertically against the icon ─── */
.rjoa__phase-titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.rjoa__phase-title {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--clr-text-inverse);
  line-height: 1.05;
}

.rjoa__phase-horizon {
  margin: 0;
  font-size: clamp(1.125rem, 1vw + 0.5rem, 1.375rem);
  font-weight: 400;
  /* Upright Cormorant — never italic */
  line-height: 1.3;
  color: var(--clr-brand-accent);
}

.rjoa__phase-rate {
  /* +15px breathing room from the toggle, applied as right margin so
     the + icon (which sits in the next grid column) stays where it is
     and only the rate shifts left. */
  margin: 0 15px 0 0;
  /* Just barely bigger than the title (which maxes at 40px / 2.5rem)
     so the rate reads as a peer rather than a hero number. Scales
     responsively the same way the title does. */
  font-size: clamp(1.75rem, 2.65vw + 0.5rem, 2.75rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.01em;
  /* Upright Cormorant — never italic */
  color: var(--clr-brand-accent);
  flex-shrink: 0;
}

/* ─── Toggle icon — + sign that rotates 45° into × when expanded.
   Matches the accordion pattern from revamp-product-hero-single. */
.rjoa__phase-toggle {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--clr-brand-accent);
  transition: transform 0.3s ease;
}

.rjoa__phase-details[aria-expanded="true"] .rjoa__phase-toggle {
  transform: rotate(45deg);
}

/* ─── Expandable content — animates height smoothly via the
   grid-template-rows 0fr → 1fr trick so the open/close looks fluid
   without needing to know the body's pixel height. */
.rjoa__phase-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.rjoa__phase-details[aria-expanded="true"] .rjoa__phase-content {
  grid-template-rows: 1fr;
}

.rjoa__phase-content-inner {
  overflow: hidden;
}

/* ─── Body — sits below the divider line, padded inside the inner
   wrap (the line is the top border of this wrap, only visible when open). */
.rjoa__phase-body-wrap {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid rgba(253, 252, 250, 0.18);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

@media (min-width: 1024px) {
  .rjoa__phase-body-wrap {
    padding: var(--space-lg) var(--space-2xl) var(--space-xl);
  }
}

.rjoa__phase-body {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 300;
  line-height: 1.65;
  color: var(--clr-text-inverse);
  opacity: 0.86;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .rjoa__phase-body { font-size: var(--font-size-lg); }
}

.rjoa__phase-body ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rjoa__phase-body li {
  margin-bottom: var(--space-sm);
}

.rjoa__phase-body li:last-child { margin-bottom: 0; }

.rjoa__phase-body strong {
  color: var(--clr-brand-accent);
  font-weight: 600;
  font-family: var(--font-primary);
  font-size: 1.05em;
  letter-spacing: 0.015em;
}

.rjoa__phase-footnote {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clr-brand-accent);
  opacity: 0.85;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .rjoa__phase-footnote { font-size: 12px; }
}


/* ─── Bottom row: closing + CTA ─── */
.rjoa__closing-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(253, 252, 250, 0.22);
}

@media (min-width: 768px) {
  .rjoa__closing-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  .rjoa__closing-row { margin-top: var(--space-4xl); }
}

.rjoa__closing {
  margin: 0;
  font-size: clamp(1.375rem, 2vw + 0.5rem, 2.25rem);
  font-weight: 400;
  /* Upright Cormorant — never italic */
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--clr-brand-accent);
  text-wrap: balance;
  max-width: 28ch;
}

.rjoa__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 14px var(--space-xl);
  background: var(--clr-text-inverse);
  color: var(--clr-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 300ms ease, transform 300ms ease;
  flex-shrink: 0;
}

.rjoa__cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.rjoa__cta:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 3px;
}

.rjoa__cta svg {
  width: 14px;
  height: 14px;
  display: block;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rjoa__cta:hover svg { transform: translateX(2px); }

/* ============================================
   LIGHT BACKGROUND VARIANTS — gold → primary olive
   Per design guide §4, gold accents are dark-bg only.
   ============================================ */
.rjoa.bg-white .rjoa__eyebrow,
.rjoa.bg-page .rjoa__eyebrow,
.rjoa.bg-surface .rjoa__eyebrow,
.rjoa.bg-card-primary .rjoa__eyebrow,
.rjoa.bg-card-secondary .rjoa__eyebrow,
.rjoa.bg-accent-soft .rjoa__eyebrow,
.rjoa.bg-accent-warm .rjoa__eyebrow,
.rjoa.bg-neutral-light .rjoa__eyebrow,
.rjoa.bg-neutral-lighter .rjoa__eyebrow { color: var(--clr-primary); }

.rjoa.bg-white .rjoa__heading,
.rjoa.bg-page .rjoa__heading,
.rjoa.bg-surface .rjoa__heading,
.rjoa.bg-card-primary .rjoa__heading,
.rjoa.bg-card-secondary .rjoa__heading,
.rjoa.bg-accent-soft .rjoa__heading,
.rjoa.bg-accent-warm .rjoa__heading,
.rjoa.bg-neutral-light .rjoa__heading,
.rjoa.bg-neutral-lighter .rjoa__heading,
.rjoa.bg-white .rjoa__heading-line1,
.rjoa.bg-page .rjoa__heading-line1,
.rjoa.bg-surface .rjoa__heading-line1,
.rjoa.bg-card-primary .rjoa__heading-line1,
.rjoa.bg-card-secondary .rjoa__heading-line1,
.rjoa.bg-accent-soft .rjoa__heading-line1,
.rjoa.bg-accent-warm .rjoa__heading-line1,
.rjoa.bg-neutral-light .rjoa__heading-line1,
.rjoa.bg-neutral-lighter .rjoa__heading-line1,
.rjoa.bg-white .rjoa__heading-line2,
.rjoa.bg-page .rjoa__heading-line2,
.rjoa.bg-surface .rjoa__heading-line2,
.rjoa.bg-card-primary .rjoa__heading-line2,
.rjoa.bg-card-secondary .rjoa__heading-line2,
.rjoa.bg-accent-soft .rjoa__heading-line2,
.rjoa.bg-accent-warm .rjoa__heading-line2,
.rjoa.bg-neutral-light .rjoa__heading-line2,
.rjoa.bg-neutral-lighter .rjoa__heading-line2 { color: var(--clr-primary); }

.rjoa.bg-white .rjoa__lead,
.rjoa.bg-page .rjoa__lead,
.rjoa.bg-surface .rjoa__lead,
.rjoa.bg-card-primary .rjoa__lead,
.rjoa.bg-card-secondary .rjoa__lead,
.rjoa.bg-accent-soft .rjoa__lead,
.rjoa.bg-accent-warm .rjoa__lead,
.rjoa.bg-neutral-light .rjoa__lead,
.rjoa.bg-neutral-lighter .rjoa__lead { color: var(--clr-text-secondary); opacity: 1; }

.rjoa.bg-white .rjoa__manifesto,
.rjoa.bg-page .rjoa__manifesto,
.rjoa.bg-surface .rjoa__manifesto,
.rjoa.bg-card-primary .rjoa__manifesto,
.rjoa.bg-card-secondary .rjoa__manifesto,
.rjoa.bg-accent-soft .rjoa__manifesto,
.rjoa.bg-accent-warm .rjoa__manifesto,
.rjoa.bg-neutral-light .rjoa__manifesto,
.rjoa.bg-neutral-lighter .rjoa__manifesto {
  color: var(--clr-brand-alt);
  border-left-color: rgba(60, 66, 46, 0.32);
}

/* Connector line + phase plate on light bg */
.rjoa.bg-white .rjoa__phase,
.rjoa.bg-page .rjoa__phase,
.rjoa.bg-surface .rjoa__phase,
.rjoa.bg-card-primary .rjoa__phase,
.rjoa.bg-card-secondary .rjoa__phase,
.rjoa.bg-accent-soft .rjoa__phase,
.rjoa.bg-accent-warm .rjoa__phase,
.rjoa.bg-neutral-light .rjoa__phase,
.rjoa.bg-neutral-lighter .rjoa__phase {
  background: rgba(253, 252, 250, 0.72);
  border-color: rgba(60, 66, 46, 0.28);
}

.rjoa.bg-white .rjoa__phase::after,
.rjoa.bg-page .rjoa__phase::after,
.rjoa.bg-surface .rjoa__phase::after,
.rjoa.bg-card-primary .rjoa__phase::after,
.rjoa.bg-card-secondary .rjoa__phase::after,
.rjoa.bg-accent-soft .rjoa__phase::after,
.rjoa.bg-accent-warm .rjoa__phase::after,
.rjoa.bg-neutral-light .rjoa__phase::after,
.rjoa.bg-neutral-lighter .rjoa__phase::after { background: rgba(60, 66, 46, 0.4); }

.rjoa.bg-white .rjoa__phase-title,
.rjoa.bg-page .rjoa__phase-title,
.rjoa.bg-surface .rjoa__phase-title,
.rjoa.bg-card-primary .rjoa__phase-title,
.rjoa.bg-card-secondary .rjoa__phase-title,
.rjoa.bg-accent-soft .rjoa__phase-title,
.rjoa.bg-accent-warm .rjoa__phase-title,
.rjoa.bg-neutral-light .rjoa__phase-title,
.rjoa.bg-neutral-lighter .rjoa__phase-title { color: var(--clr-primary); }

.rjoa.bg-white .rjoa__phase-horizon,
.rjoa.bg-page .rjoa__phase-horizon,
.rjoa.bg-surface .rjoa__phase-horizon,
.rjoa.bg-card-primary .rjoa__phase-horizon,
.rjoa.bg-card-secondary .rjoa__phase-horizon,
.rjoa.bg-accent-soft .rjoa__phase-horizon,
.rjoa.bg-accent-warm .rjoa__phase-horizon,
.rjoa.bg-neutral-light .rjoa__phase-horizon,
.rjoa.bg-neutral-lighter .rjoa__phase-horizon { color: var(--clr-brand-alt); }

.rjoa.bg-white .rjoa__phase-rate,
.rjoa.bg-page .rjoa__phase-rate,
.rjoa.bg-surface .rjoa__phase-rate,
.rjoa.bg-card-primary .rjoa__phase-rate,
.rjoa.bg-card-secondary .rjoa__phase-rate,
.rjoa.bg-accent-soft .rjoa__phase-rate,
.rjoa.bg-accent-warm .rjoa__phase-rate,
.rjoa.bg-neutral-light .rjoa__phase-rate,
.rjoa.bg-neutral-lighter .rjoa__phase-rate { color: var(--clr-primary); }

/* Light-bg variant: re-target the accordion's divider line (now the
   top border of .rjoa__phase-body-wrap) so it remains legible. */
.rjoa.bg-white .rjoa__phase-body-wrap,
.rjoa.bg-page .rjoa__phase-body-wrap,
.rjoa.bg-surface .rjoa__phase-body-wrap,
.rjoa.bg-card-primary .rjoa__phase-body-wrap,
.rjoa.bg-card-secondary .rjoa__phase-body-wrap,
.rjoa.bg-accent-soft .rjoa__phase-body-wrap,
.rjoa.bg-accent-warm .rjoa__phase-body-wrap,
.rjoa.bg-neutral-light .rjoa__phase-body-wrap,
.rjoa.bg-neutral-lighter .rjoa__phase-body-wrap { border-top-color: rgba(60, 66, 46, 0.22); }

.rjoa.bg-white .rjoa__phase-body,
.rjoa.bg-page .rjoa__phase-body,
.rjoa.bg-surface .rjoa__phase-body,
.rjoa.bg-card-primary .rjoa__phase-body,
.rjoa.bg-card-secondary .rjoa__phase-body,
.rjoa.bg-accent-soft .rjoa__phase-body,
.rjoa.bg-accent-warm .rjoa__phase-body,
.rjoa.bg-neutral-light .rjoa__phase-body,
.rjoa.bg-neutral-lighter .rjoa__phase-body { color: var(--clr-text-secondary); opacity: 1; }

.rjoa.bg-white .rjoa__phase-body strong,
.rjoa.bg-page .rjoa__phase-body strong,
.rjoa.bg-surface .rjoa__phase-body strong,
.rjoa.bg-card-primary .rjoa__phase-body strong,
.rjoa.bg-card-secondary .rjoa__phase-body strong,
.rjoa.bg-accent-soft .rjoa__phase-body strong,
.rjoa.bg-accent-warm .rjoa__phase-body strong,
.rjoa.bg-neutral-light .rjoa__phase-body strong,
.rjoa.bg-neutral-lighter .rjoa__phase-body strong { color: var(--clr-primary); }

.rjoa.bg-white .rjoa__phase-footnote,
.rjoa.bg-page .rjoa__phase-footnote,
.rjoa.bg-surface .rjoa__phase-footnote,
.rjoa.bg-card-primary .rjoa__phase-footnote,
.rjoa.bg-card-secondary .rjoa__phase-footnote,
.rjoa.bg-accent-soft .rjoa__phase-footnote,
.rjoa.bg-accent-warm .rjoa__phase-footnote,
.rjoa.bg-neutral-light .rjoa__phase-footnote,
.rjoa.bg-neutral-lighter .rjoa__phase-footnote { color: var(--clr-brand-alt); opacity: 1; }


.rjoa.bg-white .rjoa__closing-row,
.rjoa.bg-page .rjoa__closing-row,
.rjoa.bg-surface .rjoa__closing-row,
.rjoa.bg-card-primary .rjoa__closing-row,
.rjoa.bg-card-secondary .rjoa__closing-row,
.rjoa.bg-accent-soft .rjoa__closing-row,
.rjoa.bg-accent-warm .rjoa__closing-row,
.rjoa.bg-neutral-light .rjoa__closing-row,
.rjoa.bg-neutral-lighter .rjoa__closing-row { border-top-color: rgba(60, 66, 46, 0.22); }

.rjoa.bg-white .rjoa__closing,
.rjoa.bg-page .rjoa__closing,
.rjoa.bg-surface .rjoa__closing,
.rjoa.bg-card-primary .rjoa__closing,
.rjoa.bg-card-secondary .rjoa__closing,
.rjoa.bg-accent-soft .rjoa__closing,
.rjoa.bg-accent-warm .rjoa__closing,
.rjoa.bg-neutral-light .rjoa__closing,
.rjoa.bg-neutral-lighter .rjoa__closing { color: var(--clr-brand-alt); }

.rjoa.bg-white .rjoa__cta,
.rjoa.bg-page .rjoa__cta,
.rjoa.bg-surface .rjoa__cta,
.rjoa.bg-card-primary .rjoa__cta,
.rjoa.bg-card-secondary .rjoa__cta,
.rjoa.bg-accent-soft .rjoa__cta,
.rjoa.bg-accent-warm .rjoa__cta,
.rjoa.bg-neutral-light .rjoa__cta,
.rjoa.bg-neutral-lighter .rjoa__cta {
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
}


/* ─── Reduced motion — disable transitions on hover/toggle elements
   and on the accordion height animation. */
@media (prefers-reduced-motion: reduce) {
  .rjoa__cta,
  .rjoa__cta svg,
  .rjoa__phase-toggle,
  .rjoa__phase-content {
    transition: none !important;
  }
}