/* Blueprint To Progress Money Pillar — V9.13 matching CSS; no visual/layout changes */
/*
 * Blueprint To Progress — Money Pillar
 * CORRECTED PRODUCTION CSS
 *
 * Intended Hostinger URL:
 * https://blueprinttoprogress.com/wp-content/uploads/btp/btp-finance-pillar-V3-CORRECTED.css
 *
 * Elementor wrapper:
 * .btp-finance-page
 *
 * Load AFTER:
 * https://blueprinttoprogress.com/wp-content/uploads/btp/btp-career-articles-V9.4-CLEAN-PRODUCTION.css
 */

.btp-finance-page {
  --money-ink: #15243a;
  --money-muted: #5f6c7b;
  --money-border: #d7dce2;
  --money-surface: #f5f7f9;
  --money-white: #ffffff;
  --money-accent: #2f5f91;
  --money-accent-dark: #234a72;
  --money-soft: #eaf0f6;
  --money-radius: 14px;
}

.btp-finance-pillar { overflow: clip; }
.btp-finance-pillar .article-container { width: 100%; max-width: 1180px; margin: 0 auto; }

.btp-finance-pillar h1,
.btp-finance-pillar h2,
.btp-finance-pillar h3,
.btp-finance-pillar p,
.btp-finance-pillar li { text-wrap: pretty; }

.btp-finance-hero { padding: 76px 0 72px; }
.btp-finance-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr);
  gap: 58px;
  align-items: center;
}
.btp-finance-eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--money-accent);
}
.btp-finance-hero h1 {
  margin: 0 0 22px;
  font-size: 56px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -1.5px;
  color: var(--money-ink);
}
.btp-finance-lead { font-size: 20px !important; line-height: 1.55 !important; }
.btp-finance-hero-copy p { margin: 0 0 22px; }
.btp-finance-hero-support { font-size: 19px; font-weight: 650; color: var(--money-ink); }

.btp-finance-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btp-finance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--money-accent);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.btp-finance-btn:hover { transform: translateY(-1px); }
.btp-finance-btn-primary { color: #fff !important; background: var(--money-accent); }
.btp-finance-btn-primary:hover { background: var(--money-accent-dark); }
.btp-finance-btn-secondary { color: var(--money-accent) !important; background: transparent; }
.btp-finance-btn-secondary:hover { background: var(--money-soft); }

.btp-finance-figure { margin: 0; }
.btp-finance-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--money-radius);
}
.btp-finance-figure figcaption {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
  color: var(--money-muted);
}
.btp-finance-hero-image img { box-shadow: 0 14px 38px rgba(21,36,58,.08); }

.btp-finance-section { padding: 72px 0; }
.btp-finance-section-alt {
  padding: 72px 34px;
  background: var(--money-surface);
  border-radius: var(--money-radius);
}
.btp-finance-copy { width: 100%; }
.btp-finance-copy h2,
.btp-finance-section h2 {
  margin: 0 0 26px;
  font-size: 38px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.8px;
  color: var(--money-ink);
}
.btp-finance-copy h3 {
  margin: 32px 0 12px;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--money-ink);
}
.btp-finance-copy p {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--money-ink);
}
.btp-finance-copy ul { margin: 0 0 28px; padding-left: 32px; }
.btp-finance-copy li { margin: 0 0 10px; font-size: 18px; line-height: 1.55; }
.btp-finance-copy .btp-emphasis { font-size: 19px !important; font-weight: 650; }

.btp-finance-toc {
  margin: 0 0 12px;
  padding: 24px 28px;
  border: 1px solid var(--money-border);
  border-radius: var(--money-radius);
  background: var(--money-white);
}
.btp-finance-toc h2 { margin: 0 0 18px; font-size: 24px; line-height: 1.25; }
.btp-finance-toc-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  column-gap: 42px;
  row-gap: 10px;
}
.btp-finance-toc a {
  color: var(--money-ink);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 650;
  text-decoration: none;
}
.btp-finance-toc a:hover { color: var(--money-accent); text-decoration: underline; }

.btp-finance-topic-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 16px;
  margin-top: 30px;
}
.btp-finance-topic-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid var(--money-border);
  border-radius: var(--money-radius);
  background: var(--money-white);
}
.btp-finance-topic-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--money-soft);
  color: var(--money-accent-dark);
  font-size: 13px;
  font-weight: 800;
}
.btp-finance-topic-card h3 { margin: 0 0 12px; font-size: 22px; line-height: 1.2; }
.btp-finance-topic-card p { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: var(--money-muted); }
.btp-finance-topic-card .btp-finance-card-kicker { color: var(--money-ink); font-weight: 700; }
.btp-finance-topic-card a,
.btp-finance-resource-card a,
.btp-finance-crosslink strong {
  margin-top: auto;
  color: var(--money-accent);
  font-size: 15px;
  font-weight: 750;
  text-decoration: none;
}
.btp-finance-topic-card a:hover,
.btp-finance-resource-card a:hover { text-decoration: underline; }

.btp-finance-split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,.82fr);
  gap: 54px;
  align-items: center;
}
.btp-finance-split-reverse { grid-template-columns: minmax(0,.82fr) minmax(0,1fr); }
.btp-finance-image { width: 100%; }
.btp-finance-section-system { padding-bottom: 84px; }
.btp-finance-system-image { margin-top: 34px; }

.btp-finance-resource-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  margin-top: 32px;
}
.btp-finance-resource-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 25px;
  border: 1px solid var(--money-border);
  border-radius: var(--money-radius);
  background: var(--money-white);
}
.btp-finance-resource-card h3 { margin: 0 0 12px; font-size: 21px; line-height: 1.25; }
.btp-finance-resource-card p { margin: 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--money-muted); }
.btp-finance-resource-note { margin: 28px 0 0; font-size: 15px; line-height: 1.5; color: var(--money-muted); }

.btp-finance-crosslink-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 14px;
  margin-top: 30px;
}
.btp-finance-crosslink {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--money-border);
  border-radius: var(--money-radius);
  background: var(--money-white);
  color: var(--money-ink);
  text-decoration: none !important;
  transition: transform .18s ease, border-color .18s ease;
}
.btp-finance-crosslink:hover { transform: translateY(-2px); border-color: #b8c5d2; }
.btp-finance-crosslink-label { font-size: 21px; font-weight: 750; }
.btp-finance-crosslink span:not(.btp-finance-crosslink-label) { font-size: 15px; line-height: 1.45; color: var(--money-muted); }
.btp-finance-crosslink strong { margin-top: auto; }

.btp-finance-faq-section { padding-top: 78px; }
.btp-finance-faq-grid { display: grid; gap: 12px; }
.btp-finance-faq {
  border: 1px solid var(--money-border);
  border-radius: 12px;
  background: var(--money-white);
  overflow: hidden;
}
.btp-finance-faq summary {
  cursor: pointer;
  padding: 20px 22px;
  color: var(--money-ink);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
}
.btp-finance-faq-answer { padding: 0 22px 18px; }

.btp-finance-final-cta {
  margin: 24px 0 70px;
  padding: 72px 40px;
  border-radius: var(--money-radius);
  background: var(--money-ink);
  color: #fff;
}
.btp-finance-final-inner { max-width: 920px; margin: 0 auto; text-align: center; }
.btp-finance-final-cta .btp-finance-eyebrow { color: #b7cbe0; }
.btp-finance-final-cta h2 {
  margin: 0 0 20px;
  font-size: 42px;
  line-height: 1.15;
  letter-spacing: -.8px;
  color: #fff;
}
.btp-finance-final-cta p { margin: 0 auto 22px; max-width: 820px; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.9); }
.btp-finance-final-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 30px; }
.btp-finance-final-steps span {
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  font-size: 14px;
  color: rgba(255,255,255,.9);
}
.btp-finance-final-line { font-size: 21px !important; color: #fff !important; }
.btp-finance-final-cta .btp-finance-btn-secondary { border-color: rgba(255,255,255,.35); color: #fff !important; }
.btp-finance-final-cta .btp-finance-btn-secondary:hover { background: rgba(255,255,255,.08); }

@media (min-width:768px) and (max-width:1023px) {
  .btp-finance-pillar .article-container { width: calc(100% - 92px); }
  .btp-finance-hero { padding: 58px 0 54px; }
  .btp-finance-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .btp-finance-hero h1 { font-size: 36px; letter-spacing: -.8px; }
  .btp-finance-copy h2,.btp-finance-section h2 { font-size: 32px; }
  .btp-finance-copy h3 { font-size: 27px; }
  .btp-finance-copy p,.btp-finance-copy li { font-size: 17px; line-height: 1.6; }
  .btp-finance-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .btp-finance-split,.btp-finance-split-reverse { grid-template-columns: 1fr; gap: 30px; }
  .btp-finance-resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .btp-finance-crosslink-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .btp-finance-final-cta h2 { font-size: 34px; }
}

@media (max-width:767px) {
  .btp-finance-pillar .article-container { width: calc(100% - 32px); }
  .btp-finance-hero { padding: 42px 0 44px; }
  .btp-finance-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .btp-finance-hero h1 { font-size: 38px; line-height: 1.08; letter-spacing: -.8px; }
  .btp-finance-lead { font-size: 18px !important; line-height: 1.6 !important; }
  .btp-finance-copy h2,.btp-finance-section h2 { font-size: 30px; line-height: 1.15; }
  .btp-finance-copy h3 { font-size: 24px; }
  .btp-finance-copy p,.btp-finance-copy li { font-size: 17px; line-height: 1.6; }
  .btp-finance-section { padding: 50px 0; }
  .btp-finance-section-alt { padding: 50px 18px; }
  .btp-finance-toc { padding: 22px 20px; }
  .btp-finance-toc-grid { grid-template-columns: 1fr; }
  .btp-finance-topic-grid,.btp-finance-resource-grid,.btp-finance-crosslink-grid { grid-template-columns: 1fr; }
  .btp-finance-split,.btp-finance-split-reverse { grid-template-columns: 1fr; gap: 26px; }
  .btp-finance-split-reverse .btp-finance-image { order: 0; }
  .btp-finance-split-reverse .btp-finance-copy { order: 1; }
  .btp-finance-actions { flex-direction: column; align-items: stretch; }
  .btp-finance-btn { width: 100%; }
  .btp-finance-final-cta { margin-bottom: 38px; padding: 52px 20px; }
  .btp-finance-final-cta h2 { font-size: 30px; }
  .btp-finance-final-steps { align-items: stretch; flex-direction: column; }
  .btp-finance-final-steps span { border-radius: 10px; }
}


/* ==========================================================================
   MONEY PILLAR V4 — visual refinement overrides
   These rules address the nine production refinements requested after review.
   ========================================================================== */

/* 1. Hero eyebrow container */
.btp-finance-page .btp-finance-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px;
  margin: 0 0 20px;
  border: 1px solid #d4dee9;
  border-radius: 999px;
  background: #eef3f8;
}

.btp-finance-page .btp-finance-eyebrow-wrap .btp-finance-eyebrow {
  margin: 0 !important;
}

/* 2. Hero primary button — requested #1D4ED8 */
.btp-finance-page .btp-finance-hero .btp-finance-btn-primary,
.btp-finance-page .btp-finance-hero .btp-finance-btn-primary:visited {
  background-color: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  color: #ffffff !important;
}

.btp-finance-page .btp-finance-hero .btp-finance-btn-primary:hover,
.btp-finance-page .btp-finance-hero .btp-finance-btn-primary:focus-visible {
  background-color: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  color: #ffffff !important;
}

/* 3 + 6. Tighter section rhythm + clearly alternating backgrounds */
.btp-finance-page .btp-finance-section {
  padding-top: 48px;
  padding-bottom: 48px;
  background-color: #ffffff;
}

.btp-finance-page .btp-finance-section-alt {
  padding-top: 48px;
  padding-bottom: 48px;
  background-color: #f3f6fa;
  border-radius: 14px;
}

/* Avoid the large gaps around the topic/resource/FAQ transitions. */
.btp-finance-page .btp-finance-toc {
  margin-top: 8px;
  margin-bottom: 8px;
}

.btp-finance-page .btp-finance-topic-grid,
.btp-finance-page .btp-finance-resource-grid,
.btp-finance-page .btp-finance-crosslink-grid {
  margin-top: 24px;
}

/* 4. Eyebrow on every substantive section */
.btp-finance-page .btp-finance-section-eyebrow-wrap {
  margin: 0 0 14px;
}

.btp-finance-page .btp-finance-section-eyebrow {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2f5f91 !important;
}

/* Keep section eyebrow immediately above its H2. */
.btp-finance-page .btp-finance-section-eyebrow-wrap + .btp-finance-copy h2,
.btp-finance-page .btp-finance-section-eyebrow-wrap + h2 {
  margin-top: 0 !important;
}

/* 5. TOC: centered, numbered, regular-weight entries */
.btp-finance-page .btp-finance-toc {
  text-align: center;
}

.btp-finance-page .btp-finance-toc h2 {
  text-align: center;
}

.btp-finance-page .btp-finance-toc-grid {
  text-align: left;
}

.btp-finance-page .btp-finance-toc-grid a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #344258 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

.btp-finance-page .btp-finance-toc-grid a:hover {
  color: #1D4ED8 !important;
  text-decoration: underline !important;
}

.btp-finance-page .btp-finance-toc-number {
  flex: 0 0 30px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: #2f5f91;
  text-align: right;
}

.btp-finance-page .btp-finance-toc-label {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
}

/* 7. Money-system image: narrower, centered editorial presentation */
.btp-finance-page .btp-finance-system-image {
  width: min(100%, 920px);
  margin: 28px auto 0;
}

.btp-finance-page .btp-finance-system-image img {
  width: 100% !important;
  max-width: 920px;
  margin: 0 auto;
}

/* 8. Final CTA — requested #2461E8 and reduced footprint */
.btp-finance-page .btp-finance-final-cta {
  margin: 18px 0 44px;
  padding: 48px 32px;
  border-radius: 14px;
  background-color: #2461E8 !important;
  color: #ffffff !important;
}

.btp-finance-page .btp-finance-final-inner {
  max-width: 860px;
}

.btp-finance-page .btp-finance-final-cta h2 {
  font-size: 38px;
  line-height: 1.15;
  margin-bottom: 16px;
}

.btp-finance-page .btp-finance-final-cta p {
  max-width: 760px;
  margin-bottom: 18px;
}

.btp-finance-page .btp-finance-final-steps {
  margin: 20px 0 24px;
  gap: 8px;
}

/* Final CTA eyebrow uses a white/translucent container on blue. */
.btp-finance-page .btp-finance-eyebrow-wrap-dark {
  border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.10);
}

.btp-finance-page .btp-finance-eyebrow-wrap-dark .btp-finance-eyebrow {
  color: #ffffff !important;
}

/* 9. Final CTA buttons centered; primary button is white. */
.btp-finance-page .btp-finance-final-cta .btp-finance-actions {
  justify-content: center;
  align-items: center;
  margin-top: 24px;
}

.btp-finance-page .btp-finance-final-cta .btp-finance-btn-primary,
.btp-finance-page .btp-finance-final-cta .btp-finance-btn-primary:visited {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #2461E8 !important;
}

.btp-finance-page .btp-finance-final-cta .btp-finance-btn-primary:hover,
.btp-finance-page .btp-finance-final-cta .btp-finance-btn-primary:focus-visible {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #2461E8 !important;
}

.btp-finance-page .btp-finance-final-cta .btp-finance-btn-secondary,
.btp-finance-page .btp-finance-final-cta .btp-finance-btn-secondary:visited {
  background-color: transparent !important;
  border-color: rgba(255,255,255,.70) !important;
  color: #ffffff !important;
}

.btp-finance-page .btp-finance-final-cta .btp-finance-btn-secondary:hover,
.btp-finance-page .btp-finance-final-cta .btp-finance-btn-secondary:focus-visible {
  background-color: rgba(255,255,255,.10) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Reduce the final CTA's overall vertical footprint on smaller screens too. */
@media (min-width:768px) and (max-width:1023px) {
  .btp-finance-page .btp-finance-section,
  .btp-finance-page .btp-finance-section-alt {
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .btp-finance-page .btp-finance-final-cta {
    padding: 42px 26px;
  }

  .btp-finance-page .btp-finance-final-cta h2 {
    font-size: 34px;
  }
}

@media (max-width:767px) {
  .btp-finance-page .btp-finance-section,
  .btp-finance-page .btp-finance-section-alt {
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .btp-finance-page .btp-finance-final-cta {
    margin-top: 12px;
    margin-bottom: 34px;
    padding: 40px 20px;
  }

  .btp-finance-page .btp-finance-final-cta h2 {
    font-size: 30px;
  }

  .btp-finance-page .btp-finance-final-cta .btp-finance-actions {
    align-items: stretch;
  }

  .btp-finance-page .btp-finance-system-image {
    width: 100%;
    margin-top: 22px;
  }

  .btp-finance-page .btp-finance-toc-grid a {
    gap: 8px;
  }
}


/* ==========================================================================
   MONEY PILLAR V5 — final visual refinements
   ========================================================================== */

/* 1. Every section eyebrow gets the same contained pill treatment as Hero. */
.btp-finance-page .btp-finance-section-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  margin: 0 0 18px;
  border: 1px solid #d7e2ed;
  border-radius: 999px;
  background: #eef4fa;
  box-sizing: border-box;
}

.btp-finance-page .btp-finance-section-eyebrow {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #2f5f91 !important;
}

/* The eyebrow belongs to the copy column and therefore sits directly above H2. */
.btp-finance-page .btp-finance-copy > .btp-finance-section-eyebrow-wrap + h2 {
  margin-top: 0 !important;
}

/* 2. Match the Marketing pillar's more compact hero image footprint. */
@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-image {
    width: min(100%, 540px);
    justify-self: end;
  }

  .btp-finance-page .btp-finance-hero-image img {
    width: 100% !important;
    max-width: 540px !important;
  }
}

/* 3. Compact, centered TOC box with Marketing-style numbering. */
.btp-finance-page .btp-finance-toc {
  width: min(100%, 920px);
  margin: 8px auto 16px !important;
  box-sizing: border-box;
}

.btp-finance-page .btp-finance-toc h2 {
  text-align: center !important;
}

.btp-finance-page .btp-finance-toc-number {
  flex: 0 0 auto;
  min-width: 24px;
  font-size: 15px;
  font-weight: 400;
  color: #315d86;
  text-align: left;
}

.btp-finance-page .btp-finance-toc-label {
  font-size: 16px;
  font-weight: 400 !important;
}

/* 4. Split-section eyebrow and heading remain on the same side by construction. */
.btp-finance-page .btp-finance-split .btp-finance-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.btp-finance-page .btp-finance-split .btp-finance-copy > .btp-finance-section-eyebrow-wrap {
  align-self: flex-start;
}

/* 5. Center the connected-system image and keep it editorially restrained. */
.btp-finance-page .btp-finance-system-image {
  width: min(100%, 920px) !important;
  margin: 30px auto 0 !important;
  text-align: center;
}

.btp-finance-page .btp-finance-system-image img {
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* 6. Keep all four final-CTA step pills on one line at desktop widths. */
@media (min-width:1024px) {
  .btp-finance-page .btp-finance-final-steps {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap;
  }

  .btp-finance-page .btp-finance-final-steps span {
    flex: 0 0 auto;
    padding: 8px 11px;
    font-size: 13px;
  }
}

/* Maintain sensible wrapping on tablet/mobile. */
@media (max-width:1023px) {
  .btp-finance-page .btp-finance-final-steps {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width:767px) {
  .btp-finance-page .btp-finance-section-eyebrow-wrap {
    margin-bottom: 14px;
  }

  .btp-finance-page .btp-finance-toc {
    width: 100%;
  }
}


/* ==========================================================================
   MONEY PILLAR V6 — final visual alignment with the Marketing pillar
   Based on the supplied D1/G1 comparison screenshots.
   ========================================================================== */

/* 1. Page background: match the Marketing pillar's #F5F8FC. */
.btp-finance-page {
  background-color: #F5F8FC !important;
}

/* Keep the article canvas transparent so the page background is visible. */
.btp-finance-page .btp-article,
.btp-finance-page .article-container {
  background-color: transparent;
}

/* 2. Eyebrow treatment: same compact editorial pill language as Marketing. */
.btp-finance-page .btp-finance-eyebrow-wrap,
.btp-finance-page .btp-finance-section-eyebrow-wrap {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  margin: 0 0 18px;
  border: 0 !important;
  border-radius: 999px;
  background-color: #EDF4FC !important;
  box-sizing: border-box;
}

.btp-finance-page .btp-finance-eyebrow,
.btp-finance-page .btp-finance-section-eyebrow {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
  color: #2F5F91 !important;
}

/* The final CTA intentionally uses its own dark/white eyebrow treatment. */
.btp-finance-page .btp-finance-eyebrow-wrap-dark {
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.10) !important;
}

.btp-finance-page .btp-finance-eyebrow-wrap-dark .btp-finance-eyebrow {
  color: #ffffff !important;
}

/* 3. Hero: give the text column more width and reduce the gap to the image.
   This allows the H1 to naturally settle into approximately three lines while
   keeping the image at a Marketing-like footprint. */
@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-grid {
    grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr) !important;
    gap: 34px !important;
  }

  .btp-finance-page .btp-finance-hero-image {
    width: min(100%, 520px) !important;
    justify-self: end !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    width: 100% !important;
    max-width: 520px !important;
  }

  .btp-finance-page .btp-finance-hero-copy {
    max-width: none !important;
  }
}

/* 4. Keep section eyebrows immediately above their H2 on the same side. */
.btp-finance-page .btp-finance-copy > .btp-finance-section-eyebrow-wrap {
  margin-bottom: 14px;
}

.btp-finance-page .btp-finance-copy > .btp-finance-section-eyebrow-wrap + h2 {
  margin-top: 0 !important;
}

/* 5. TOC: maintain the narrower centered Marketing-style footprint. */
.btp-finance-page .btp-finance-toc {
  width: min(100%, 920px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 6. Connected-system image: centered and kept visually subordinate. */
.btp-finance-page .btp-finance-system-image {
  width: min(100%, 880px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.btp-finance-page .btp-finance-system-image img {
  display: block !important;
  width: 100% !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 7. Final CTA remains compact, with the requested #2461E8 panel. */
.btp-finance-page .btp-finance-final-cta {
  background-color: #2461E8 !important;
  padding: 44px 30px !important;
}

/* 8. Final CTA's four step pills: one line at desktop widths. */
@media (min-width:1024px) {
  .btp-finance-page .btp-finance-final-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap;
  }

  .btp-finance-page .btp-finance-final-steps span {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }
}

/* Tablet/mobile preserve responsive behavior. */
@media (min-width:768px) and (max-width:1023px) {
  .btp-finance-page .btp-finance-final-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width:767px) {
  .btp-finance-page .btp-finance-eyebrow-wrap,
  .btp-finance-page .btp-finance-section-eyebrow-wrap {
    min-height: 30px;
    padding: 6px 11px;
  }

  .btp-finance-page .btp-finance-eyebrow,
  .btp-finance-page .btp-finance-section-eyebrow {
    font-size: 11px !important;
  }
}


/* ==========================================================================
   MONEY PILLAR V7 — surgical Hero alignment with the Marketing pillar
   Based on the supplied D1 (Money) and G1 (Marketing) desktop screenshots.
   ========================================================================== */

/* Compact Marketing-style eyebrow treatment. */
.btp-finance-page .btp-finance-eyebrow-wrap,
.btp-finance-page .btp-finance-section-eyebrow-wrap {
  min-height: 28px;
  padding: 5px 11px;
  margin-bottom: 18px;
  border-radius: 999px;
}

.btp-finance-page .btp-finance-eyebrow,
.btp-finance-page .btp-finance-section-eyebrow {
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

/* Preserve the distinct CTA eyebrow treatment. */
.btp-finance-page .btp-finance-eyebrow-wrap-dark {
  min-height: 28px;
  padding: 5px 11px;
}

/* Desktop Hero: narrow the effective content canvas, move the image left,
   and give the image a Marketing-like footprint while retaining the
   successful three-line Money H1. */
@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-grid {
    width: min(100%, 1128px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
    column-gap: 56px !important;
  }

  .btp-finance-page .btp-finance-hero-copy {
    max-width: none !important;
  }

  .btp-finance-page .btp-finance-hero-image {
    width: min(100%, 534px) !important;
    max-width: 534px !important;
    justify-self: end !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    width: 100% !important;
    max-width: 534px !important;
  }
}

/* Keep tablet/mobile responsive behavior unchanged. */
@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-grid {
    width: 100%;
  }
}


/* ==========================================================================
   MONEY PILLAR V8 — final Hero refinement
   D1(3) Money compared directly with G1(3) Marketing.
   Scope intentionally limited to Hero/eyebrow presentation.
   ========================================================================== */

/* Match the Marketing page's restrained eyebrow component more closely. */
.btp-finance-page .btp-finance-eyebrow-wrap,
.btp-finance-page .btp-finance-section-eyebrow-wrap {
  min-height: 30px;
  padding: 5px 12px;
  margin-bottom: 18px;
  border: 0 !important;
  border-radius: 999px;
  background-color: #EDF4FC !important;
  box-sizing: border-box;
}

.btp-finance-page .btp-finance-eyebrow,
.btp-finance-page .btp-finance-section-eyebrow {
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  color: #2F5F91 !important;
}

/* Desktop Hero:
   - retain the successful left alignment;
   - give the heading enough width for "Financial Confidence" to remain together;
   - keep the image close to the Marketing footprint;
   - move the complete Hero composition upward slightly;
   - reduce the inter-column gap without changing the global article container. */
@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-grid {
    width: min(100%, 1128px) !important;
    margin: -20px auto 0 !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr) !important;
    column-gap: 46px !important;
    align-items: center !important;
  }

  .btp-finance-page .btp-finance-hero-copy {
    width: 100% !important;
    max-width: none !important;
  }

  /* Slightly smaller H1 only at desktop to allow the intended
     three-line composition without making it visually weaker. */
  .btp-finance-page .btp-finance-hero-copy h1 {
    font-size: 54px !important;
    line-height: 1.08 !important;
    letter-spacing: -1.5px !important;
    max-width: 590px !important;
  }

  .btp-finance-page .btp-finance-hero-image {
    width: min(100%, 534px) !important;
    max-width: 534px !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    display: block !important;
    width: 100% !important;
    max-width: 534px !important;
  }
}

/* Tablet/mobile: do not inherit desktop Hero geometry. */
@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-grid {
    width: 100%;
    margin-top: 0 !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .btp-finance-page .btp-finance-hero-copy h1 {
    max-width: none !important;
  }
}

/* Preserve the CTA eyebrow as a contrasting component. */
.btp-finance-page .btp-finance-eyebrow-wrap-dark {
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.10) !important;
}

.btp-finance-page .btp-finance-eyebrow-wrap-dark .btp-finance-eyebrow {
  color: #ffffff !important;
}

/* ========================================================================== 
   MONEY PILLAR V9 — final Hero image vertical alignment
   Based on the supplied D1 (Money) / G1 (Marketing) desktop comparison.

   The Money H1 now correctly holds three lines. The remaining mismatch was
   the Hero image sitting too low: its top edge was below the bottom of the
   third H1 line. Marketing positions its image much higher, approximately
   around the lower edge of the second H1 line.

   This override moves ONLY the desktop Hero image upward. The H1, eyebrow,
   text column width, image width and global article geometry remain intact.
   ========================================================================== */

@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-image {
    transform: translateY(clamp(-84px, -6vw, -55px)) !important;
  }
}

/* Keep the responsive tablet/mobile Hero geometry untouched. */
@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-image {
    transform: none !important;
  }
}

/* ========================================================================== 
   MONEY PILLAR V9-CORRECTED-2 — Hero geometry refinement
   Desktop comparison target: Marketing pillar Hero composition.

   Changes are intentionally limited to the desktop Hero grid/image:
   - equalize the two Hero columns so the Money image can use the intended
     ~534px Marketing-style footprint;
   - reduce the inter-column gap;
   - retain the approved three-line Money H1;
   - recalibrate the image vertical offset after the image is enlarged.
   Tablet/mobile remain unchanged.
   ========================================================================== */

@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 24px !important;
  }

  .btp-finance-page .btp-finance-hero-image {
    width: min(100%, 534px) !important;
    max-width: 534px !important;
    justify-self: end !important;
    transform: translateY(clamp(-52px, -3.8vw, -42px)) !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    width: 100% !important;
    max-width: 534px !important;
  }
}

@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-image {
    transform: none !important;
  }
}

/* ========================================================================== 
   MONEY PILLAR V9.3 — D1/G1 final Hero composition correction
   The supplied D1/G1 comparison shows that V9.2 has matched the image
   footprint well, but the Money H1 is still wrapping to four lines and the
   image begins about 29px lower than the Marketing reference.

   Desktop-only correction:
   - give the Money copy a wider effective column so the H1 resolves to the
     intended three-line composition;
   - keep the 534px Hero image footprint;
   - position the image back at approximately the Marketing x-coordinate;
   - align its top edge with the Marketing reference.
   Tablet/mobile remain untouched.
   ========================================================================== */

@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-grid {
    width: min(100%, 1140px) !important;
    grid-template-columns: minmax(0, 600px) minmax(0, 534px) !important;
    column-gap: 24px !important;
    align-items: center !important;
  }

  .btp-finance-page .btp-finance-hero-copy {
    width: 600px !important;
    max-width: 600px !important;
  }

  .btp-finance-page .btp-finance-hero-copy h1 {
    width: 600px !important;
    max-width: 600px !important;
    font-size: 52px !important;
    line-height: 1.08 !important;
    letter-spacing: -1.6px !important;
  }

  .btp-finance-page .btp-finance-hero-image {
    width: 534px !important;
    max-width: 534px !important;
    justify-self: start !important;
    transform: translate(-30px, -29px) !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    width: 534px !important;
    max-width: 534px !important;
  }
}

@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-copy,
  .btp-finance-page .btp-finance-hero-copy h1 {
    width: auto !important;
    max-width: none !important;
  }

  .btp-finance-page .btp-finance-hero-image {
    transform: none !important;
  }
}

/* ========================================================================== 
   MONEY PILLAR V9.4 — Hero overflow and alignment correction
   Based on the supplied D1/G1 comparison.

   V9.3 used a 600px copy column + 534px image + 24px gap inside a
   1140px grid, which exceeded the available width. That caused the Hero
   image to overlap/clamp the paragraph text. V9.4 keeps the desired
   three-line H1 while fitting both columns cleanly inside the container.
   ========================================================================== */

@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-grid {
    width: min(100%, 1131px) !important;
    grid-template-columns: minmax(0, 560px) minmax(0, 534px) !important;
    column-gap: 37px !important;
    align-items: center !important;
  }

  .btp-finance-page .btp-finance-hero-copy {
    width: 560px !important;
    max-width: 560px !important;
    min-width: 0 !important;
  }

  .btp-finance-page .btp-finance-hero-copy h1 {
    width: 560px !important;
    max-width: 560px !important;
    font-size: 52px !important;
    line-height: 1.08 !important;
    letter-spacing: -1.6px !important;
  }

  .btp-finance-page .btp-finance-hero-copy p {
    max-width: 560px !important;
  }

  .btp-finance-page .btp-finance-hero-image {
    width: 534px !important;
    max-width: 534px !important;
    justify-self: start !important;
    transform: translateY(-42px) !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    display: block !important;
    width: 534px !important;
    max-width: 534px !important;
    height: auto !important;
  }
}

@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  .btp-finance-page .btp-finance-hero-copy,
  .btp-finance-page .btp-finance-hero-copy h1,
  .btp-finance-page .btp-finance-hero-copy p {
    width: auto !important;
    max-width: none !important;
  }

  .btp-finance-page .btp-finance-hero-image {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ========================================================================== 
   MONEY PILLAR V9.6 — final Hero image vertical alignment correction
   Desktop target: match the supplied Marketing Hero image footprint.

   The latest D1 comparison confirms that the Money Hero image has the correct
   horizontal footprint and 16:9 proportions. Its remaining mismatch is
   vertical placement: the image begins below the lower edge of the second
   H1 line, whereas the Marketing reference begins approximately at that
   level. This override moves only the desktop Hero image upward by a further
   30px. The H1, copy width, image size and responsive behavior remain intact.
   ========================================================================== */

@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-image {
    width: 534px !important;
    max-width: 534px !important;
    align-self: center !important;
    transform: translateY(-100px) !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    display: block !important;
    width: 534px !important;
    max-width: 534px !important;
    height: 301px !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-image {
    transform: none !important;
  }

  .btp-finance-page .btp-finance-hero-image img {
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: initial !important;
  }
}

/* ========================================================================== 
   MONEY PILLAR V9.7 — complete Hero vertical alignment with Marketing

   Desktop-only final positioning refinement based on the supplied D1/G1
   comparison. The internal Hero relationship established in V9.6 is
   preserved; the complete Hero grid is shifted downward by 25px so the
   eyebrow, H1, copy and image sit at the same overall vertical level as
   the Marketing Hero. Tablet/mobile remain unchanged.
   ========================================================================== */

@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-grid {
    transform: translateY(25px) !important;
  }
}

@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-grid {
    transform: none !important;
  }
}

/* ========================================================================== 
   MONEY PILLAR V9.8 — final Hero image-to-heading alignment

   D1(10) vs G1 comparison: the Money eyebrow/H1 now sit at the same overall
   vertical level as Marketing. The image itself is also the correct size,
   but its top edge remains aligned with the third H1 line rather than the
   lower edge of the second line. Move ONLY the desktop image upward by 22px.
   ========================================================================== */

@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-image {
    transform: translateY(-122px) !important;
  }
}

@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-image {
    transform: none !important;
  }
}

/* ========================================================================== 
   MONEY PILLAR V9.9 — final Hero image positioning refinement

   Based on the latest D1/G1 comparison, V9.8 positioned the Hero image
   slightly too high. Move ONLY the desktop Hero image downward by 20px,
   restoring the intended alignment with the lower edge of the second H1
   line while preserving all other V9.8 geometry.
   ========================================================================== */

@media (min-width:1024px) {
  .btp-finance-page .btp-finance-hero-image {
    transform: translateY(-102px) !important;
  }
}

@media (max-width:1023px) {
  .btp-finance-page .btp-finance-hero-image {
    transform: none !important;
  }
}


/* ==========================================================================
   MONEY PILLAR V9.10 — final responsive vertical-rhythm refinement

   Scope: tablet and mobile only.
   Desktop Hero geometry and the approved desktop composition are untouched.
   The purpose of this pass is to remove excessive vertical whitespace while
   preserving the Article Page Standard typography, gutters and hierarchy.
   ========================================================================== */

@media (min-width:768px) and (max-width:1023px) {
  .btp-finance-page .btp-finance-section,
  .btp-finance-page .btp-finance-section-alt {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .btp-finance-page .btp-finance-toc {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  .btp-finance-page .btp-finance-topic-grid,
  .btp-finance-page .btp-finance-resource-grid,
  .btp-finance-page .btp-finance-crosslink-grid {
    margin-top: 20px !important;
  }

  .btp-finance-page .btp-finance-faq-section {
    padding-top: 42px !important;
  }

  .btp-finance-page .btp-finance-system-image {
    margin-top: 22px !important;
  }

  .btp-finance-page .btp-finance-final-cta {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }
}

@media (max-width:767px) {
  .btp-finance-page .btp-finance-section,
  .btp-finance-page .btp-finance-section-alt {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .btp-finance-page .btp-finance-toc {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .btp-finance-page .btp-finance-topic-grid,
  .btp-finance-page .btp-finance-resource-grid,
  .btp-finance-page .btp-finance-crosslink-grid {
    margin-top: 18px !important;
  }

  .btp-finance-page .btp-finance-faq-section {
    padding-top: 36px !important;
  }

  .btp-finance-page .btp-finance-system-image {
    margin-top: 18px !important;
  }

  .btp-finance-page .btp-finance-final-cta {
    margin-top: 8px !important;
    margin-bottom: 28px !important;
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
}

/* ========================================================================
   MONEY PILLAR V9.10 — responsive vertical-rhythm refinement
   Desktop Hero geometry intentionally unchanged.
   ======================================================================== */

@media (min-width:768px) and (max-width:1023px) {
  .btp-finance-page .btp-finance-section,
  .btp-finance-page .btp-finance-section-alt {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .btp-finance-page .btp-finance-toc {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .btp-finance-page .btp-finance-topic-grid,
  .btp-finance-page .btp-finance-resource-grid,
  .btp-finance-page .btp-finance-crosslink-grid {
    margin-top: 20px !important;
  }

  .btp-finance-page .btp-finance-system-image {
    margin-top: 24px !important;
  }

  .btp-finance-page .btp-finance-faq-section {
    padding-top: 54px !important;
  }

  .btp-finance-page .btp-finance-final-cta {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }
}

@media (max-width:767px) {
  .btp-finance-page .btp-finance-section,
  .btp-finance-page .btp-finance-section-alt {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  .btp-finance-page .btp-finance-toc {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  .btp-finance-page .btp-finance-topic-grid,
  .btp-finance-page .btp-finance-resource-grid,
  .btp-finance-page .btp-finance-crosslink-grid {
    margin-top: 18px !important;
  }

  .btp-finance-page .btp-finance-system-image {
    margin-top: 18px !important;
  }

  .btp-finance-page .btp-finance-faq-section {
    padding-top: 46px !important;
  }

  .btp-finance-page .btp-finance-final-cta {
    margin-top: 8px !important;
    margin-bottom: 30px !important;
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}