/* =========================================================================
   RBCCM CTA Band - shared component
   Deploy path: /assets/rbccm/css/components/rbccm-cta-band.css

   Purpose
   =========================================================================
   Reusable CTA banner section. Section-level dark bg (or a dark card
   inside a light section) with an optional eyebrow, a heading (with an
   optional highlighted span), body copy, and 1-2 buttons.

   Variants
   =========================================================================
     .rbccm-cta-band--maas-mata
       Full-bleed dark navy band (own gradient). Yellow eyebrow with
       centered gold underline, big serif heading with a yellow-highlight
       last word, single "Request a demo" yellow pill. PIXEL-FAITHFUL PORT
       of MAAS+MATA .rbccm-maas-mata__demo - same type ramp, same tight
       body margin, same shine sweep + arrow flyby.

     .rbccm-cta-band--us-credentials
       Same big serif heading treatment as above, but heading WRAPS at
       desktop (longer copy, no CMS char cap), NO eyebrow slot, wider
       inner (758px), single primary CTA. Solid navy #001E3C matches the
       flat treatment used across the US Credentials page.

     .rbccm-cta-band--strategy-and-economics
       Deep-navy band on its own, small serif heading (28px), body copy,
       two buttons (primary yellow + secondary outlined ghost). Used on
       S&E's "Explore RBC insights" band.

   Modifier
   =========================================================================
     .rbccm-cta-band--bg-transparent
       Add alongside a variant when the band sits inside a wrapper that
       already paints its own bg / gradient (e.g. MAAS+MATA's .deep-band
       runs a continuous gradient across three siblings). Kills the
       variant's own background so the wrapper reads through unbroken.

   Palette + typography live on the base block via custom properties so
   variants only swap the tokens they need.
   ========================================================================= */


/* ---------- Base block --------------------------------------------------- */
.rbccm-cta-band {
  --rbccm-cta-band-navy:       #003168;
  --rbccm-cta-band-navy-deep:  #002144;
  --rbccm-cta-band-gold:       #FFC72C;
  --rbccm-cta-band-white:      #FFFFFF;
  --rbccm-cta-band-gray:       #D7D7D7;
  --rbccm-cta-band-serif:      RBCDisplay, Georgia, Times, serif; /* same stack as --rbccm-hero-serif */
  --rbccm-cta-band-sans:       Roboto, Arial, sans-serif;

  /* Variant-swappable tokens. */
  --rbccm-cta-band-bg-color:      transparent; /* section outer bg */
  --rbccm-cta-band-card-bg:       transparent; /* inner card bg */
  --rbccm-cta-band-card-radius:   0;           /* card corner radius */
  --rbccm-cta-band-card-padding:  0;           /* card inner padding */
  --rbccm-cta-band-heading-color: var(--rbccm-cta-band-white);
  --rbccm-cta-band-body-color:    var(--rbccm-cta-band-white);

  background: var(--rbccm-cta-band-bg-color);
  box-sizing: border-box;
  overflow: hidden;
  padding: 60px 23px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.rbccm-cta-band *,
.rbccm-cta-band *::before,
.rbccm-cta-band *::after { box-sizing: border-box; }

/* Pre-hide any element that opts in to a scroll-triggered animation.
   Duplicates the rule that rbccm-animate.js injects at runtime, but
   ships in this render-blocking stylesheet so it applies before the
   browser paints the section. Without this, the buttons briefly flash
   at full opacity between initial paint and rbccm-animate.js class
   injection - the "jump" the eye sees on scroll-in. Once
   .rbccm-anim-ready lands on <body> and animate__animated lands on
   the element, opacity flips back to 1 and animate.css takes over. */
.rbccm-cta-band [data-animate],
.rbccm-cta-band [data-animate-hero],
.rbccm-cta-band [data-stagger-parent] > * {
  opacity: 0;
}
.rbccm-anim-ready .rbccm-cta-band [data-animate].animate__animated,
.rbccm-anim-ready .rbccm-cta-band [data-animate-hero].animate__animated,
.rbccm-anim-ready .rbccm-cta-band [data-stagger-parent] > .animate__animated {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .rbccm-cta-band [data-animate],
  .rbccm-cta-band [data-animate-hero],
  .rbccm-cta-band [data-stagger-parent] > * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* Font-family lock on tag-pickable heading and its lead/highlight
   spans. Defends against unified.css tag-level rules stripping
   RBCDisplay on h1..h6, and the site's global `* { font-family:
   Roboto }` rule, which hits the inner spans directly and beats
   inheritance from the heading. Same approach as the hero's
   __title / __title-line lock. */
.rbccm-cta-band .rbccm-cta-band__heading,
.rbccm-cta-band .rbccm-cta-band__heading span {
  font-family: var(--rbccm-cta-band-serif) !important;
  letter-spacing: 0 !important;
}

/* Tag-agnostic margin/padding reset on tag-pickable text nodes. */
h1.rbccm-cta-band__heading, h2.rbccm-cta-band__heading,
h3.rbccm-cta-band__heading, h4.rbccm-cta-band__heading,
h5.rbccm-cta-band__heading, h6.rbccm-cta-band__heading,
p.rbccm-cta-band__heading,  div.rbccm-cta-band__heading,
h1.rbccm-cta-band__body, h2.rbccm-cta-band__body,
h3.rbccm-cta-band__body, h4.rbccm-cta-band__body,
h5.rbccm-cta-band__body, h6.rbccm-cta-band__body,
p.rbccm-cta-band__body,  div.rbccm-cta-band__body,
h1.rbccm-cta-band__eyebrow, h2.rbccm-cta-band__eyebrow,
h3.rbccm-cta-band__eyebrow, h4.rbccm-cta-band__eyebrow,
h5.rbccm-cta-band__eyebrow, h6.rbccm-cta-band__eyebrow,
p.rbccm-cta-band__eyebrow,  div.rbccm-cta-band__eyebrow {
  padding: 0 !important;
  margin: 0 !important;
}


/* ---------- Container / card -------------------------------------------- */
/* Inner acts as either a plain container (maas-mata /
   us-credentials) or a full dark card (strategy-and-economics), driven by
   the variant custom properties above. */
.rbccm-cta-band__inner {
  align-items: center;
  align-self: stretch;
  background: var(--rbccm-cta-band-card-bg);
  border-radius: var(--rbccm-cta-band-card-radius);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1140px;
  padding: var(--rbccm-cta-band-card-padding);
  position: relative;
  text-align: center;
  width: 100%;
}


/* Optional heading + body grouping. Nested inside .__inner when a
   variant needs tighter spacing between heading and body than the
   inner's own gap (strategy-and-economics: gap 12 here, gap 32 on inner). */
.rbccm-cta-band__intro {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* ---------- Eyebrow ----------------------------------------------------- */
/* Small gold uppercase label with a short centered underline via ::after.
   Base treatment; maas-mata variant overrides for the MAAS/MATA
   spec (sentence-case, letter-spacing 3, gap-15 underline). */
.rbccm-cta-band__eyebrow {
  color: var(--rbccm-cta-band-gold) !important;
  font-family: var(--rbccm-cta-band-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.25em !important;
  line-height: 1 !important;
  margin: 0 0 22px 0 !important;
  padding: 0 !important;
  position: relative;
  text-transform: uppercase !important;
}
.rbccm-cta-band__eyebrow::after {
  background: var(--rbccm-cta-band-gold);
  content: "";
  display: block;
  height: 2px;
  margin: 12px auto 0;
  width: 32px;
}


/* ---------- Heading ----------------------------------------------------- */
.rbccm-cta-band__heading {
  color: var(--rbccm-cta-band-heading-color) !important;
  font-family: var(--rbccm-cta-band-serif) !important;
  font-size: 36px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 120% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}
.rbccm-cta-band__heading-highlight {
  color: var(--rbccm-cta-band-gold);
  font-style: normal;
}


/* ---------- Body -------------------------------------------------------- */
.rbccm-cta-band__body {
  color: var(--rbccm-cta-band-body-color) !important;
  font-family: var(--rbccm-cta-band-sans) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  margin: 0 0 24px 0 !important;
  max-width: 640px;
  padding: 0 !important;
}


/* ---------- Actions ----------------------------------------------------- */
.rbccm-cta-band__actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}


/* ---------- Buttons ----------------------------------------------------- */
/* Shared button shell. */
.rbccm-cta-band__btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--rbccm-cta-band-sans);
  font-size: 15px;
  font-weight: 500;
  gap: 12px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  /* opacity intentionally NOT !important here - animate.css's
     fadeInUp keyframe needs to own opacity while the reveal runs.
     `footer a { opacity: 0.98 }` bleed from unified.css:2764 lands
     at 0.98 which is imperceptible; if it ever matters, escalate via
     a heavier selector chain rather than !important. */
  overflow: hidden; /* clip the fly-by arrow */
  padding: 12px 24px;
  position: relative;
  text-decoration: none !important; /* beat site-wide `footer a { text-decoration: underline }` */
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0 !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Primary: warm-yellow fill, navy text. Ported hover behavior from
   .rbccm-maas-mata__btn--yellow - shine-sweep pseudo-element passes
   diagonally across the button while the arrow icon flies out to
   the right and returns from the left. `isolation: isolate` +
   overflow-hidden clip the pseudo to the pill shape. */
.rbccm-cta-band__btn--primary {
  background: var(--rbccm-cta-band-gold) !important;
  color: var(--rbccm-cta-band-navy) !important;
  isolation: isolate;
}
.rbccm-cta-band__btn--primary:hover,
.rbccm-cta-band__btn--primary:focus-visible {
  background: #E5B325 !important; /* one shade deeper than the base gold */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  color: var(--rbccm-cta-band-navy) !important;
}
/* Shine-sweep pseudo: soft white diagonal band at rest sits at
   left: -60% (off-screen); animates across on hover / focus. */
.rbccm-cta-band__btn--primary::before {
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  bottom: 0;
  content: "";
  left: -60%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: skewX(-18deg);
  width: 40%;
  z-index: 0;
}
/* Content sits above the shine layer. */
.rbccm-cta-band__btn--primary > * {
  position: relative;
  z-index: 1;
}
.rbccm-cta-band__btn--primary:hover::before,
.rbccm-cta-band__btn--primary:focus-visible::before {
  animation: rbccm-ctab-shine-sweep 600ms ease-out;
}
@keyframes rbccm-ctab-shine-sweep {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* Secondary: outlined ghost on dark bg. */
.rbccm-cta-band__btn--secondary {
  background: transparent !important;
  border-color: var(--rbccm-cta-band-white);
  color: var(--rbccm-cta-band-white) !important;
}
.rbccm-cta-band__btn--secondary:hover,
.rbccm-cta-band__btn--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--rbccm-cta-band-white);
  color: var(--rbccm-cta-band-white) !important;
}

/* Icon inside a button. currentColor lets the SVG pick up the
   button's text color for consistent theming. `will-change` hints
   to the browser that transform + opacity animate on hover, so
   the fly-by keyframe runs smoothly (matches MAAS+MATA). */
.rbccm-cta-band__btn-icon {
  color: currentColor;
  display: inline-block;
  flex-shrink: 0;
  height: 16px;
  transition: transform 200ms ease, opacity 200ms ease;
  will-change: transform, opacity;
  width: 16px;
}

/* Arrow fly-by on hover: arrow flies right + fades, teleports to
   left, glides back to origin. Same easing/timing as MAAS+MATA's
   `.__btn-icon` and `.rbccm-leading-experts__cta svg`. */
.rbccm-cta-band__btn--primary:hover .rbccm-cta-band__btn-icon,
.rbccm-cta-band__btn--primary:focus-visible .rbccm-cta-band__btn-icon {
  animation: rbccm-ctab-arrow-flyby 550ms cubic-bezier(0.55, 0, 0.1, 1) both;
}
@keyframes rbccm-ctab-arrow-flyby {
  0%   { transform: translateX(0);     opacity: 1; }
  45%  { transform: translateX(32px);  opacity: 0; }
  46%  { transform: translateX(-32px); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}


/* -------- Tablet+ (>=640) ------------------------------------------------ */
@media (min-width: 640px) {
  .rbccm-cta-band__actions {
    flex-direction: row;
    gap: 16px;
  }
}


/* -------- Desktop (>=992) ----------------------------------------------- */
@media (min-width: 992px) {
  .rbccm-cta-band {
    padding: 80px 23px;
  }
  .rbccm-cta-band .rbccm-cta-band__heading {
    font-size: 42px !important;
    line-height: 125% !important;
  }
}


/* =========================================================================
   Variant: Talk with an expert
   =========================================================================
   Pixel-faithful port of MAAS+MATA .rbccm-maas-mata__demo. Deep-navy
   section with yellow eyebrow + centered gold underline, huge serif
   heading with a yellow-highlight span, body copy pulled tight to the
   heading via negative top margin, single yellow pill button with
   shine-sweep + arrow-flyby on hover.
   ========================================================================= */
.rbccm-cta-band--maas-mata {
  /* MAAS+MATA's .__demo runs inside a .deep-band wrapper with a
     top-to-bottom navy gradient (#082043 -> #061730) that also
     covers assets + market-insights above; standalone we paint the
     same gradient directly on the section so it reads identically.
     When the CTA band sits INSIDE a wrapper that owns the gradient
     (e.g. .deep-band), add .rbccm-cta-band--bg-transparent so the
     wrapper shows through. */
  --rbccm-cta-band-heading-color: var(--rbccm-cta-band-white);
  --rbccm-cta-band-body-color:    var(--rbccm-cta-band-white);

  /* Section: Figma spec - flex column, centered, gap 10, 50/0 mobile.
     Overrides the base --bg-color custom-prop path with a direct
     `background` so the gradient sticks. */
  align-items: center;
  background: linear-gradient(180deg, #082043 0%, #061730 100%);
  color: #fff;
  gap: 10px;
  justify-content: center;
  padding: 50px 0;
  text-align: center;
}
@media (min-width: 992px) {
  .rbccm-cta-band--maas-mata {
    padding: 100px 0;
  }
}

/* Inner content stack: Figma 690 max wide, gap 41 between children,
   23px horizontal gutter (page-safe on narrow viewports). */
.rbccm-cta-band--maas-mata .rbccm-cta-band__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 41px;
  justify-content: center;
  max-width: 690px;
  padding: 0 23px;
  width: 100%;
}

/* Eyebrow: gold Roboto 14 / letter-spacing 3, followed by a 45x2
   gold underline set 15px below the text via a flex-column + ::after. */
.rbccm-cta-band--maas-mata .rbccm-cta-band__eyebrow {
  align-items: center !important;
  color: #FFC72C !important;
  display: flex !important;
  flex-direction: column !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  gap: 15px !important;
  letter-spacing: 3px !important;
  line-height: 120% !important;
  margin: 0 !important;
  padding: 0 35px !important;
  text-transform: none !important; /* MAAS+MATA emits sentence-case */
}
.rbccm-cta-band--maas-mata .rbccm-cta-band__eyebrow::after {
  background: #FFC72C;
  content: "";
  display: block;
  height: 2px;
  margin: 0; /* gap on the flex parent handles spacing */
  width: 45px;
}
@media (min-width: 992px) {
  /* +5 bottom margin so the eyebrow rule sits a touch further from
     the heading below. Matches MAAS+MATA. */
  .rbccm-cta-band--maas-mata .rbccm-cta-band__eyebrow {
    margin-bottom: 5px !important;
  }
}

/* Heading: RBCDisplay 50/100% mobile -> 75/110% desktop, weight 500,
   white, centered. Wraps on whitespace at mobile; forces nowrap at
   desktop (MAAS+MATA caps the CMS at ~25 chars so a single line fits). */
.rbccm-cta-band--maas-mata .rbccm-cta-band__heading {
  color: #FFFFFF !important;
  font-family: var(--rbccm-cta-band-serif) !important;
  font-size: 50px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 100% !important;
  margin: 0 !important;
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center !important;
  white-space: normal;
  width: 100%;
  word-break: normal;
}
@media (min-width: 992px) {
  .rbccm-cta-band--maas-mata .rbccm-cta-band__heading {
    font-size: 75px !important;
    line-height: 110% !important; /* 82.5px */
    white-space: nowrap;
  }
}
.rbccm-cta-band--maas-mata .rbccm-cta-band__heading-highlight {
  color: #FFC72C;
  font-style: normal;
}

/* Body: Roboto 16/150% weight 400, white, centered. Negative top
   margin pulls it up under the heading so the pair reads tighter
   than the parent's 41 gap. */
.rbccm-cta-band--maas-mata .rbccm-cta-band__body {
  align-self: stretch;
  color: #fff !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  margin: -27px 0 0 !important;
  max-width: 100%;
  text-align: center !important;
  width: 100%;
}

/* Actions row: MAAS+MATA doesn't stack - there's only one button -
   so no gap overrides needed. Keep default action layout. */

/* Primary "Request a demo" button: MAAS+MATA production spec.
   Type (19.507 / 500 / 29.26) matches what the MAAS+MATA defense
   block enforces on every .__btn--yellow across breakpoints; only
   the pill dimensions shift mobile -> desktop (40 -> 50 tall).
   Border 1px transparent so the yellow fill can transition to
   another button style later without a layout shift. Icon fills
   navy #061730 to match. */
.rbccm-cta-band--maas-mata .rbccm-cta-band__btn--primary {
  background: #FFC72C !important;
  border: 1px solid transparent;
  border-radius: 100px;
  color: #061730 !important;
  font-family: Roboto, Arial, sans-serif;
  font-size: 19.507px;
  font-weight: 500;
  gap: 10px;
  height: 40px;
  isolation: isolate;
  line-height: 29.26px;
  overflow: hidden;
  padding: 20px 35px;
  position: relative;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.rbccm-cta-band--maas-mata .rbccm-cta-band__btn--primary .rbccm-cta-band__btn-icon {
  aspect-ratio: 1 / 1;
  fill: #061730;
  height: 18px;
  transition: transform 200ms ease, opacity 200ms ease;
  width: 18px;
}
@media (min-width: 992px) {
  .rbccm-cta-band--maas-mata .rbccm-cta-band__btn--primary {
    height: 50px;
    padding: 12px 35px;
  }
  .rbccm-cta-band--maas-mata .rbccm-cta-band__btn--primary .rbccm-cta-band__btn-icon {
    height: 23px;
    width: 23px;
  }
}

/* Shine-sweep + arrow-flyby + hover box-shadow all inherited from
   the shared .rbccm-cta-band__btn--primary rule above. This variant
   only needs to add the MAAS+MATA-style yellow focus ring for
   accessibility parity on the dark strip. */
.rbccm-cta-band--maas-mata .rbccm-cta-band__btn--primary:focus-visible {
  outline: 2px solid #FFC72C;
  outline-offset: 3px;
}


/* =========================================================================
   Variant: US Credentials
   =========================================================================
   Shares MAAS+MATA's demo-band typography (big serif heading, yellow
   highlight span, tight body pull) but tuned for the US Credentials
   page's longer, non-CMS-capped copy:

     * Heading uses display: flex + flex-direction: column at desktop
       so each <span> child renders on its own line (yellow highlight
       always drops beneath the white lead). Mobile flows naturally.
     * NO eyebrow slot - the page's rhythm doesn't call for one.
     * Wider inner (900) + larger gap (50) + narrower body (432) match
       the visual weight of the page's other centered bands.
     * Same navy gradient as maas-mata (--linear-grad token
       with a hardcoded fallback) so both bands share one dark-band
       vocabulary across the site.

   Button + shine-sweep + arrow-flyby all inherit from base + the
   maas-mata spec - we borrow that variant's button rules
   through a selector list so the two bands look identical below the
   heading.
   ========================================================================= */
.rbccm-cta-band--us-credentials {
  --rbccm-cta-band-heading-color: var(--rbccm-cta-band-white);
  --rbccm-cta-band-body-color:    var(--rbccm-cta-band-white);

  align-items: center;
  background: var(--linear-grad, linear-gradient(180deg, #082043 0%, #061730 100%));
  color: #fff;
  gap: 10px;
  justify-content: center;
  padding: 60px 0;
  text-align: center;
}
@media (min-width: 992px) {
  .rbccm-cta-band--us-credentials {
    padding: 80px 0;
  }
}

/* Inner: wider than maas-mata (690) - 900px chosen for
   visual balance around the big serif heading. Body max-width
   (432px) sits on its own rule below so widening the inner doesn't
   stretch the paragraph. Heading's own flex-column layout at
   desktop (see .__heading rule below) owns the lead/highlight
   line-break, so inner max-width no longer drives the wrap.
   Inter-child gap 50 vs maas-mata's 41. */
.rbccm-cta-band--us-credentials .rbccm-cta-band__inner {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: center;
  max-width: 900px;
  padding: 0 23px;
  width: 100%;
}

/* Heading: same big serif ramp as maas-mata (50 mobile /
   75 desktop). Mobile flows naturally - inline spans, natural
   whitespace-based wrap decided by container width. Desktop switches
   to display: flex + flex-direction: column so each <span> child
   renders on its own line (yellow highlight always drops beneath
   the white lead line) - no max-width wrap trick, no &nbsp;, no
   display: block hack. */
.rbccm-cta-band--us-credentials .rbccm-cta-band__heading {
  color: #FFFFFF !important;
  font-family: var(--rbccm-cta-band-serif) !important;
  font-size: 50px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 100% !important;
  margin: 0 !important;
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center !important;
  white-space: normal;
  width: 100%;
  word-break: normal;
}
@media (min-width: 992px) {
  .rbccm-cta-band--us-credentials .rbccm-cta-band__heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-size: 75px !important;
    line-height: 110% !important; /* 82.5px */
  }
}
.rbccm-cta-band--us-credentials .rbccm-cta-band__heading-highlight {
  color: #FFC72C;
  font-style: normal;
}

/* Body: MAAS+MATA type spec (16/150), same -27px pull to sit tight
   under the heading, capped at 432px so the paragraph reads more
   like a subtitle than a wall. */
.rbccm-cta-band--us-credentials .rbccm-cta-band__body {
  color: #fff !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  margin: -27px auto 0 !important;
  max-width: 432px;
  text-align: center !important;
  width: 100%;
}

/* Primary button - reuse the maas-mata spec verbatim. */
.rbccm-cta-band--us-credentials .rbccm-cta-band__btn--primary {
  background: #FFC72C !important;
  border: 1px solid transparent;
  border-radius: 100px;
  color: #061730 !important;
  font-family: Roboto, Arial, sans-serif;
  font-size: 19.507px;
  font-weight: 500;
  gap: 10px;
  height: 40px;
  isolation: isolate;
  line-height: 29.26px;
  overflow: hidden;
  padding: 20px 35px;
  position: relative;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.rbccm-cta-band--us-credentials .rbccm-cta-band__btn--primary .rbccm-cta-band__btn-icon {
  aspect-ratio: 1 / 1;
  fill: #061730;
  height: 18px;
  transition: transform 200ms ease, opacity 200ms ease;
  width: 18px;
}
@media (min-width: 992px) {
  .rbccm-cta-band--us-credentials .rbccm-cta-band__btn--primary {
    height: 50px;
    padding: 12px 35px;
  }
  .rbccm-cta-band--us-credentials .rbccm-cta-band__btn--primary .rbccm-cta-band__btn-icon {
    height: 23px;
    width: 23px;
  }
}
.rbccm-cta-band--us-credentials .rbccm-cta-band__btn--primary:focus-visible {
  outline: 2px solid #FFC72C;
  outline-offset: 3px;
}


/* =========================================================================
   Variant: Research portal
   =========================================================================
   Deep-navy section on its own (no card treatment). Small serif
   heading (28px), body copy, two buttons: primary yellow + secondary
   outlined ghost. Heading + body live in a nested .__intro wrapper
   (gap 12) for tighter rhythm inside the .__inner's own gap-32.
   ========================================================================= */
.rbccm-cta-band--strategy-and-economics {
  --rbccm-cta-band-bg-color:      #092044;
  --rbccm-cta-band-card-bg:       transparent;
  --rbccm-cta-band-card-radius:   0;
  --rbccm-cta-band-card-padding:  0;
  --rbccm-cta-band-heading-color: var(--rbccm-cta-band-white);
  --rbccm-cta-band-body-color:    #F1F1F1;

  padding: 90px 23px;
}
@media (min-width: 992px) {
  .rbccm-cta-band--strategy-and-economics {
    padding: 60px 23px;
  }
}

.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__inner {
  gap: 32px;
  justify-content: center;
  max-width: 632px;
}

.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__heading {
  color: #FFFFFF !important;
  font-family: var(--rbccm-cta-band-serif) !important;
  font-size: 28px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  margin: 0 !important;
}

.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__body {
  color: #F1F1F1 !important;
  font-family: Roboto, Arial, sans-serif !important;
  font-feature-settings: 'liga' off, 'clig' off !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 150% !important;
  margin: 0 !important;
  max-width: 100%;
  width: 100%;
}

.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__actions {
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 678px) {
  .rbccm-cta-band--strategy-and-economics .rbccm-cta-band__actions {
    flex-direction: row;
    gap: 16px;
  }
}

.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__btn {
  font-family: Roboto, Arial, sans-serif;
  font-size: 19.507px;
  font-weight: 500;
  gap: 10px;
  height: 45px;
  line-height: 29.26px;
  padding: 15px 35px;
}

.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__btn--primary {
  background: #FFC72C !important;
  border-color: transparent;
  color: #061730 !important;
}
.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__btn--primary:hover,
.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__btn--primary:focus-visible {
  background: #E5B325 !important;
  color: #061730 !important;
}
.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__btn--primary .rbccm-cta-band__btn-icon {
  fill: #061730;
  height: 23px;
  width: 23px;
}

.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__btn--secondary {
  background: transparent !important;
  border-color: #FFF;
  color: #FFF !important;
}
.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__btn--secondary:hover,
.rbccm-cta-band--strategy-and-economics .rbccm-cta-band__btn--secondary:focus-visible {
  background: #FFC72C !important;
  border-color: #FFC72C;
  color: #003168 !important;
}


/* =========================================================================
   Modifier: transparent background
   =========================================================================
   Author-toggleable override. Wire on the section (in addition to the
   variant class) when the CTA band is dropped inside a parent wrapper
   that already paints its own bg / gradient - e.g. MAAS+MATA's
   .deep-band wrapper runs a continuous gradient across three siblings.
   Kills both the variant bg and any solid fill so the parent surface
   reads through unbroken. !important scoped to this modifier only so
   it wins the specificity tie against the variant scope's own bg /
   gradient.
   ========================================================================= */
.rbccm-cta-band--bg-transparent,
.rbccm-cta-band.rbccm-cta-band--bg-transparent {
  background: transparent !important;
  background-image: none !important;
}


/* =========================================================================
   Reduced motion - kill button transitions, shine-sweep pseudo, and
   arrow fly-by. All variants share the primary button selector so one
   guard covers all.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .rbccm-cta-band__btn {
    transition: none !important;
  }
  .rbccm-cta-band__btn--primary:hover::before,
  .rbccm-cta-band__btn--primary:focus-visible::before,
  .rbccm-cta-band__btn--primary:hover .rbccm-cta-band__btn-icon,
  .rbccm-cta-band__btn--primary:focus-visible .rbccm-cta-band__btn-icon {
    animation: none !important;
  }
  .rbccm-cta-band__btn-icon {
    transition: none !important;
  }
}