/* ============================================================
   Hybrid Renovations — Financing Steps module styles
   --------------------------------------------------------
   Scoped under .hr-financing-steps. Tokens only — no hex,
   no @import, no redefined tokens. Mirrors the .hr-process
   pattern intentionally so the two sections read as a
   matched pair; the only meaningful colour changes are:

     - section background  → neutral (--hr-bg), not blue-50,
       so the band doesn't duplicate the process band.
     - eyebrow             → --hr-warm (amber accent).
     - large step numerals → --hr-warm (amber accent).
     - step icon           → --hr-blue (stays as in process;
                              keeps amber within the ~2% budget).
     - step rule           → --hr-border (neutral hairline;
                              avoids painting blue inside an
                              amber-themed card).
     - green pill tags     → retained from process for family
                              resemblance.
   ============================================================ */

/* ---------- Section + container ---------- */
.hr-financing-steps {
  /* Card glass, shared with the Kitchen Reasons cards.

     The pane is DARK, not light. A white pane takes most of its colour from
     whatever sits behind it, so the cards would drift lighter every time the
     background tint came down; a dark pane at 40% still takes only 60% of its
     colour from the photo, so the cards hold their weight across the whole
     tint range.

     --card-op and --card-blur arrive inline from the editor fields; the values
     here are only fallbacks. --card-fill is what the card actually paints, and
     it differs by mode: FLAT mode paints the solid colour (a 40%-open pane over
     a white section would wash out to pale grey and white text on it would fail
     contrast outright), PHOTO mode swaps in the see-through fill below. */
  --card-solid: color-mix(in srgb, var(--hr-navy) 60%, var(--hr-text-strong));
  --card-op: 40%;
  --card-blur: 12px;
  --card-bg: color-mix(in srgb, var(--card-solid) var(--card-op), transparent);
  --card-bg-hover: color-mix(in srgb, var(--hr-green) 10%, var(--card-bg));
  --card-fill: var(--card-solid);
  --card-fill-hover: color-mix(in srgb, var(--hr-green) 10%, var(--card-solid));
  background: var(--hr-bg, #fff);
  padding: var(--section-y) 0;
  color: var(--hr-text);
}

.hr-financing-steps__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ---------- Header (eyebrow + H2 + lead) ---------- */
.hr-financing-steps__head {
  text-align: center;
  margin: 0 auto var(--sp-8);
  max-width: 760px;
}
.hr-financing-steps__eyebrow {
  margin: 0 0 12px;
  /* Amber eyebrow is the section's primary colour signal — it
     tells the reader at a glance "this is financing / offer",
     not "another process band." */
  color: var(--hr-warm);
}
/* Section headline and lede are normalised across every section module:
   the headline is clamp(--fs-h3 -> --fs-h2) at --lh-snug with --tracking-tight,
   the lede is --fs-body at --lh-relaxed. The clamp already floors at --fs-h3,
   so the old mobile step-downs are gone with it - they were a second place to
   change the same number. */
.hr-financing-steps__h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: clamp(var(--fs-h3), 3.2vw, var(--fs-h2));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--hr-text-strong);
}
.hr-financing-steps__lead {
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--hr-body);
  max-width: 60ch;
}

/* ---------- Steps wrap ---------- */
.hr-financing-steps__steps-wrap {
  position: relative;
  margin-bottom: var(--sp-8);
}

.hr-financing-steps__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
}

/* ---------- Step card — dark glass ----------
   Cloned from the Kitchen Reasons cards: dark pane, hairline white rim,
   --shadow-lg at rest, a green light washing over the whole card on hover.
   Icon holds the top-left corner, the numeral sits top-right as a large
   ghost — absolutely placed, so it can never collide with the icon or push
   the title down. The connector rule the old light card drew between the two
   is gone with it.

   Never transition backdrop-filter; it is expensive to animate. Only the
   colours and the shadow move. */
.hr-financing-steps__step {
  position: relative;
  min-width: 0;
  background: var(--card-fill);
  border: 1px solid color-mix(in srgb, var(--hr-text-on-color, #fff) 22%, transparent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  /* --dur-fast, not --dur. The light hands from one card to the next in a
     single frame, but a 220ms crossfade meant the outgoing glow was still
     visibly fading while the incoming one came up, which reads as two cards
     lit at once. Halving it makes the handover look like what it is. */
  transition:
    background-color var(--dur-fast, 140ms) var(--ease-out),
    border-color     var(--dur-fast, 140ms) var(--ease-out),
    box-shadow       var(--dur-fast, 140ms) var(--ease-out);
}
/* Hover: green rim, a faint green wash through the fill, and a green outer
   glow, so the whole card lights rather than just its edge. The resting
   --shadow-lg stays underneath so the panel does not appear to flatten as the
   glow comes up. Colour only — no lift, no transform. */
/* .is-active is set by module.js on phones: the card taking up most of the
   screen lights, and the light moves as the next one scrolls up. Touch has
   no hover, so without it the glow was a state a phone could never reach. */
.hr-financing-steps__step:hover,
.hr-financing-steps__step.is-active {
  background: var(--card-fill-hover);
  border-color: color-mix(in srgb, var(--hr-green) 60%, transparent);
  box-shadow: var(--shadow-lg),
              0 0 0 1px color-mix(in srgb, var(--hr-green) 30%, transparent),
              0 8px 34px -6px color-mix(in srgb, var(--hr-green) 40%, transparent);
}

/* Top row is now just the icon; the numeral is lifted out of the flow. */
.hr-financing-steps__step-top {
  display: block;
  margin-bottom: var(--sp-5);
}
.hr-financing-steps__step-number {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 42px;
  line-height: 1;
  color: color-mix(in srgb, var(--hr-text-on-color, #fff) 9%, transparent);
  pointer-events: none;
}
.hr-financing-steps__step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--hr-green) 18%, transparent);
  color: var(--hr-green);
  transition:
    background-color var(--dur-fast, 140ms) var(--ease-out),
    box-shadow       var(--dur-fast, 140ms) var(--ease-out);
}
.hr-financing-steps__step-icon svg,
.hr-financing-steps__step-icon i {
  display: block;
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}
.hr-financing-steps__step:hover .hr-financing-steps__step-icon,
.hr-financing-steps__step.is-active .hr-financing-steps__step-icon {
  background: color-mix(in srgb, var(--hr-green) 30%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--hr-green) 12%, transparent);
}

/* Title — wraps freely. A previous version clamped this to
   one line with text-overflow: ellipsis which rendered card 3
   ("Choose what fits your budget") as "Choose what fits your
   ..." in the live preview — read as a UX bug, not deliberate
   truncation. Equal card heights across the row are already
   handled by the grid (align-items: stretch is the default on
   .hr-financing-steps__steps) plus the card's flex column
   layout, so we don't need to clip the title text to keep
   cards aligned. */
.hr-financing-steps__step-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h5, 20px);
  line-height: 1.25;
  color: var(--hr-text-on-color, #fff);
  white-space: normal;
  overflow: visible;
  min-width: 0;
}

/* Green pill tag — identical token chain to the process pill
   so the two sections share the same pill visual language. */
.hr-financing-steps__step-pill {
  display: inline-block;
  align-self: flex-start;
  /* Dark-card variant: green-tinted fill, bright green label, faint green rim.
     The light --hr-green-50 / --hr-green-700 pairing the flat card used is
     unreadable on a dark pane. */
  background: color-mix(in srgb, var(--hr-green) 16%, transparent);
  color: var(--hr-green);
  border: 1px solid color-mix(in srgb, var(--hr-green) 35%, transparent);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-micro, 12px);
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: var(--r-pill, 999px);
  margin-bottom: 14px;
}

.hr-financing-steps__step-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-small, 14px);
  line-height: 1.6;
  color: color-mix(in srgb, var(--hr-text-on-color, #fff) 78%, transparent);
}

/* ---------- CTA row ----------
   Same layout as the process CTA row: primary blue pill on
   the left, "Prefer to call?" microcopy inline on the right
   on desktop / tablet, both stack vertically on mobile. */
.hr-financing-steps__cta-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.hr-financing-steps__cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hr-financing-steps__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill, 999px);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color    var(--dur) var(--ease-out),
    color           var(--dur) var(--ease-out),
    box-shadow      var(--dur) var(--ease-out);
}
.hr-financing-steps__cta--primary {
  background: var(--hr-blue);
  color: var(--hr-text-on-color, #fff);
  border: 1.5px solid var(--hr-blue);
}
.hr-financing-steps__cta--primary:hover,
.hr-financing-steps__cta--primary:focus-visible {
  background: var(--hr-blue-700);
  border-color: var(--hr-blue-700);
  /* Same belt-and-suspenders override the process / hero /
     FAQ CTAs use: the site-wide a:hover rule in
     colors_and_type.css turns white CTA text dark blue and
     paints an underline — re-assert white + no underline so
     the label stays readable against the dark blue hover bg. */
  color: var(--hr-text-on-color, #fff);
  text-decoration: none;
}
.hr-financing-steps__cta:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.hr-financing-steps__cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform var(--dur) var(--ease-out);
}
.hr-financing-steps__cta-arrow svg,
.hr-financing-steps__cta-arrow i {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}
.hr-financing-steps__cta--primary:hover .hr-financing-steps__cta-arrow,
.hr-financing-steps__cta--primary:focus-visible .hr-financing-steps__cta-arrow {
  transform: translateX(3px);
}

/* Phone microcopy beside the CTA. */
.hr-financing-steps__phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--hr-text-muted);
}
.hr-financing-steps__phone-icon {
  display: inline-flex;
  align-items: center;
  color: var(--hr-blue);
}
.hr-financing-steps__phone-icon svg,
.hr-financing-steps__phone-icon i {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
/* Phone number rendered as a ghost/outline button (matches the Roofing
   Hero secondary button). */
.hr-financing-steps__phone-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  color: var(--hr-navy);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold, 600);
  background: transparent;
  border: 1.5px solid var(--hr-border-strong);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color var(--dur, 220ms) var(--ease-out, ease),
              border-color var(--dur, 220ms) var(--ease-out, ease),
              color var(--dur, 220ms) var(--ease-out, ease);
}
.hr-financing-steps__phone-link:hover,
.hr-financing-steps__phone-link:focus-visible {
  background: var(--hr-surface-alt);
  border-color: var(--hr-navy);
  color: var(--hr-navy);
  text-decoration: none;
}
.hr-financing-steps__phone-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------- Fine-print disclaimer ----------
   Muted micro text centered beneath the CTA row. Carries the
   "financing available with approved credit" hedge the
   compliance language demands.

   No max-width here on purpose. The default copy
   ("Financing available with approved credit. Terms vary by
   lender and project.") is ~78 characters at --fs-micro,
   which renders ~470 px wide. A 60ch cap forced it to wrap
   on desktop even though the surrounding container has
   room for the full line. Letting the container drive
   width keeps the disclaimer on a single line at
   tablet + desktop and lets it wrap naturally on phones
   (where the container itself is narrow). */
.hr-financing-steps__disclaimer {
  margin: var(--sp-5) auto 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-micro, 12px);
  line-height: var(--lh-base, 1.5);
  color: var(--hr-text-muted);
}

/* ============================================================
   ONE-SHOT SCROLL REVEAL — section fade + 12 px rise.
   Mirrors the process module's reveal so the two adjacent
   sections share the same entrance rhythm.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .hr-financing-steps__steps-wrap {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity   var(--dur-slow, 360ms) var(--ease-out),
      transform var(--dur-slow, 360ms) var(--ease-out);
  }
  .hr-financing-steps__steps-wrap.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet (768 - 1023): 2 × 2 grid. */
@media (max-width: 1023px) {
  .hr-financing-steps__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}

/* Mobile (<768): single column, CTA goes full width, phone
   stacks on its own line beneath it. */
@media (max-width: 767px) {
  .hr-financing-steps {
    padding: clamp(40px, 7vh, 64px) 0;
  }
  .hr-financing-steps__steps {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  .hr-financing-steps__step {
    padding: var(--sp-5);
  }
  .hr-financing-steps__cta-row {
    flex-direction: column;
    gap: 12px;
  }
  .hr-financing-steps__cta-buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }
  .hr-financing-steps__cta {
    width: 100%;
    min-height: 50px;
    font-size: 16px;
  }
  .hr-financing-steps__phone {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
  .hr-financing-steps__disclaimer {
    font-size: 12px;
    padding: 0 var(--sp-2);
  }
}

/* ============================================================
   PHOTO MODE — full-bleed jobsite background + navy overlay
   --------------------------------------------------------
   Activated when the marketer uploads a Background image
   (HubL adds .hr-financing-steps--bg-photo). Mirrors the
   process-timeline photo-mode treatment so the two sections
   read as siblings. Finance-specific differences:
     - eyebrow stays amber (--hr-warm) instead of green
     - step numerals stay amber instead of switching to white
     - disclaimer flips to a light muted line beneath the CTA
   Brand rule still holds: NO blue-green gradient blend, NO
   backdrop-filter / blur (tinted panels, not glass).
   ============================================================ */
.hr-financing-steps--bg-photo {
  background: var(--hr-navy);              /* fallback while the WebP is decoding */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--hr-text-on-color, #fff);
}
.hr-financing-steps__bg-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}
/* Flat tint, never a gradient: an even wash is what keeps white body text
   legible over an unpredictable photograph. The opacity here is only a
   fallback — the live value is written inline from the overlay_strength
   field (20%–90%), so a cached copy of this stylesheet cannot hold an old
   setting. The three legacy settings (subtle / default / strong) are mapped
   to 50% / 70% / 85% in module.html, so a page saved before the percentage
   scale existed keeps the strength it was set to. */
.hr-financing-steps__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: var(--hr-navy);
  opacity: 0.7;
}
.hr-financing-steps--bg-photo .hr-financing-steps__container {
  position: relative;
  z-index: 1;
}

/* ---------- Photo-mode header re-theme ----------
   Eyebrow → --hr-green (matches the process section's
   eyebrow exactly; finance now reads as a true sibling of
   process under photo mode). H2 + lead flip to white. */
.hr-financing-steps--bg-photo .hr-financing-steps__eyebrow {
  color: var(--hr-green);
}
.hr-financing-steps--bg-photo .hr-financing-steps__h2 {
  color: var(--hr-text-on-color, #fff);
}
.hr-financing-steps--bg-photo .hr-financing-steps__lead {
  color: color-mix(in srgb, var(--hr-text-on-color, #fff) 85%, transparent);
}

/* ---------- Photo-mode step cards — the glass switches on ----------
   Everything else about the card is already set in the base rule. Photo mode
   only swaps the solid fill for the see-through one and turns the blur on, so
   the kitchen behind reads faintly through the pane. Both values come from
   the editor (Card see-through / Card blur). */
.hr-financing-steps--bg-photo .hr-financing-steps__step {
  --card-fill: var(--card-bg);
  --card-fill-hover: var(--card-bg-hover);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(125%);
  backdrop-filter: blur(var(--card-blur)) saturate(125%);
}
/* Without the blur, an open window onto a busy photo reads as noise rather
   than glass, so unsupported browsers get the same colour fully opaque. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .hr-financing-steps--bg-photo .hr-financing-steps__step {
    --card-fill: var(--card-solid);
    --card-fill-hover: color-mix(in srgb, var(--hr-green) 10%, var(--card-solid));
  }
}

/* ---------- Photo-mode CTA — green on dark ----------
   Section-scoped override of .hr-financing-steps__cta--primary
   (NOT the global .btn-primary). Mirrors the green-on-dark CTA
   variant used in the process section: --hr-green fill + navy
   label + arrow, reusing the established .btn-secondary palette
   so the button reads as a known brand element. Navy on
   --hr-green (#8CC63F) clears 4.5:1 comfortably; white on
   --hr-green would fail the contrast floor. Hover steps to
   --hr-green-600 (the documented darker-green hover state) +
   --shadow-lg lift. No movement (brand-calm rule). */
.hr-financing-steps--bg-photo .hr-financing-steps__cta--primary {
  background: var(--hr-green);
  color: var(--hr-navy);
  border-color: var(--hr-green);
  box-shadow: var(--shadow-md);
}
.hr-financing-steps--bg-photo .hr-financing-steps__cta--primary .hr-financing-steps__cta-arrow {
  color: var(--hr-navy);
}
.hr-financing-steps--bg-photo .hr-financing-steps__cta--primary:hover,
.hr-financing-steps--bg-photo .hr-financing-steps__cta--primary:focus-visible {
  background: var(--hr-green-600);
  border-color: var(--hr-green-600);
  color: var(--hr-navy);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
}
/* Light focus ring readable on the dark photo — same
   construction as the process section. */
.hr-financing-steps--bg-photo .hr-financing-steps__cta--primary:focus-visible {
  outline: none;
  box-shadow:
    var(--shadow-lg),
    0 0 0 3px color-mix(in srgb, var(--hr-surface) 75%, transparent);
}

/* "Prefer to call?" microcopy goes light; phone number
   stays a bright accent in --hr-blue-100 for legibility. */
.hr-financing-steps--bg-photo .hr-financing-steps__phone {
  color: color-mix(in srgb, var(--hr-text-on-color, #fff) 85%, transparent);
}
.hr-financing-steps--bg-photo .hr-financing-steps__phone-icon {
  color: var(--hr-blue-100, #D4E8F7);
}
.hr-financing-steps--bg-photo .hr-financing-steps__phone-link {
  color: var(--hr-text-on-color, #fff);
  border-color: color-mix(in srgb, var(--hr-text-on-color) 60%, transparent);
}
.hr-financing-steps--bg-photo .hr-financing-steps__phone-link:hover,
.hr-financing-steps--bg-photo .hr-financing-steps__phone-link:focus-visible {
  background: color-mix(in srgb, var(--hr-text-on-color) 14%, transparent);
  border-color: var(--hr-text-on-color, #fff);
  color: var(--hr-text-on-color, #fff);
}
.hr-financing-steps--bg-photo .hr-financing-steps__phone-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hr-text-on-color, #fff) 90%, transparent);
}

/* ---------- Disclaimer on dark ----------
   Fine-print line beneath the CTA. Stays --fs-micro; flips
   to a 70 % white wash so it still reads as a hedge / fine
   print, not as primary copy. */
.hr-financing-steps--bg-photo .hr-financing-steps__disclaimer {
  color: color-mix(in srgb, var(--hr-text-on-color, #fff) 70%, transparent);
}

/* ============================================================
   PHOTO MODE — MOBILE CROP NUDGE
   --------------------------------------------------------
   Phones land text over the busier center of the photo, so the
   crop shifts up slightly. The overlay itself no longer bumps
   per breakpoint — the tint is one editor-set value now, and a
   silent mobile-only increase would make that field lie.
   ============================================================ */
@media (max-width: 767px) {
  .hr-financing-steps__bg-photo {
    object-position: center 40%;
  }
}

/* ============================================================
   REDUCED MOTION — disable hover lift + reveal transitions.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hr-financing-steps__step,
  .hr-financing-steps__cta,
  .hr-financing-steps__cta-arrow,
  .hr-financing-steps__steps-wrap {
    transition: none !important;
  }
  .hr-financing-steps__step:hover {
    transform: none !important;
  }
}

/* ---------- Background color options (bottom-of-module control) ---------- */
.hr-financing-steps.is-bg-white { background: var(--hr-surface); }
.hr-financing-steps.is-bg-soft  { background: var(--hr-bg); }
.hr-financing-steps.is-bg-blue  { background: var(--hr-blue-50); }
.hr-financing-steps.is-bg-navy {
  background: var(--hr-navy);
  color: #fff;
  --hr-surface: color-mix(in srgb, #fff 9%, var(--hr-navy));
  --hr-bg: color-mix(in srgb, #fff 6%, var(--hr-navy));
  --hr-surface-alt: color-mix(in srgb, #fff 13%, var(--hr-navy));
  --hr-border: rgba(255, 255, 255, .16);
  --hr-border-strong: rgba(255, 255, 255, .30);
  --hr-text-strong: #fff;
  --hr-text: rgba(255, 255, 255, .92);
  --hr-body: rgba(255, 255, 255, .82);
  --hr-text-muted: rgba(255, 255, 255, .66);
  --hr-text-subtle: rgba(255, 255, 255, .45);
  --hr-blue: #79b4ec;
  --hr-blue-700: #9ecbf5;
  --hr-blue-50: rgba(121, 180, 236, .16);
  --hr-green: #a6d96a;
  --hr-green-700: #a6d96a;
  --hr-green-50: rgba(140, 198, 63, .18);
}

/* ---------- Ghost numeral scale ----------
   Placed after the max-width blocks so it is not overridden by them. Below
   640 the cards are single-column and a 54px numeral crowds the title. */
@media (min-width: 640px) {
  .hr-financing-steps__step-number { font-size: 54px; }
}