.elementor-7644 .elementor-element.elementor-element-76500b54{--display:flex;overflow:visible;}.elementor-7644 .elementor-element.elementor-element-a726460 > .elementor-widget-container{margin:-30px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for html, class: .elementor-element-a726460 *//* =========================================================
   VP Capital Lending — Learning Center Article CSS
   Article: How To Get A Mortgage Pre-Approval
   Notes:
   - Brand fonts: Raleway (headings) + Open Sans (body)
   - Brand gold: #c89c39 (links), hover: #b0862f
   ========================================================= */


/* =========================================================
   1) ROOT, VARIABLES, BASE TYPOGRAPHY (SCOPED)
   ========================================================= */
.vpcl-article{
  --vpcl-navy:#0f172a;
  --vpcl-ink:#0b1220;
  --vpcl-text:#334155;
  --vpcl-muted:#64748b;
  --vpcl-border:#e9eef6;
  --vpcl-soft:#f6f8fc;
  --vpcl-soft-2:#f3f6fb;

  --vpcl-gold:#c89c39;
  --vpcl-gold-hover:#b0862f;

  --vpcl-radius:22px;
  --vpcl-radius-sm:16px;

  --vpcl-shadow: 0 18px 34px rgba(2,6,23,.06);
  --vpcl-shadow-soft: 0 10px 22px rgba(2,6,23,.06);

  --vpcl-max: 1040px;
  --vpcl-pad: clamp(18px, 3vw, 28px);

  color: var(--vpcl-text);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.75;

  /* Container feel */
  max-width: var(--vpcl-max);
  margin: 0 auto;
}

/* Prevent weird inherited Elementor styles */
.vpcl-article *{
  box-sizing: border-box;
}

.vpcl-article p{
  margin: 0 0 16px;
}

.vpcl-article strong{
  color: var(--vpcl-ink);
  font-weight: 700;
}

.vpcl-article a{
  color: var(--vpcl-gold);
  text-decoration: none;
  font-weight: 700;
  transition: color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.vpcl-article a:hover{
  color: var(--vpcl-gold-hover);
}

/* Smooth anchor jumps (optional but premium) */
html{ scroll-behavior: smooth; }

/* Offset anchor scroll for sticky header (you confirmed this works) */
.vpcl-section,
.vpcl-section h2,
.vpcl-section h3{
  scroll-margin-top: 120px;
}


/* =========================================================
   2) HEADINGS + KICKER + LEAD
   ========================================================= */
.vpcl-h1,
.vpcl-h2,
.vpcl-h3{
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--vpcl-ink);
  letter-spacing: -0.02em;
}

.vpcl-h1{
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  margin: 8px 0 14px;
  font-weight: 800;
}

.vpcl-h2{
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 800; /* Bold section headers (you asked about this) */
}

.vpcl-h3{
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  margin: 0 0 10px;
  font-weight: 800;
}

.vpcl-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--vpcl-navy);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 13px;
  margin: 0 0 10px;
}
.vpcl-kicker:before{
  content:"";
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vpcl-gold), rgba(200,156,57,.25));
}

/* Lead paragraph */
.vpcl-lead{
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--vpcl-text);
  margin-bottom: 18px;
}


/* =========================================================
   3) SECTION LAYOUT + RHYTHM + DIVIDERS
   ========================================================= */
.vpcl-section{
  padding: clamp(26px, 4.5vw, 44px) var(--vpcl-pad);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Soft section background “breathing” every other section */
.vpcl-section:nth-of-type(even){
  background: linear-gradient(180deg, rgba(246,248,252,.9), rgba(255,255,255,0));
  border-radius: var(--vpcl-radius);
}

/* Elegant divider line between sections (kept behind content) */
.vpcl-section:before{
  content:"";
  position:absolute;
  left: var(--vpcl-pad);
  right: var(--vpcl-pad);
  top: -18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.14), transparent);
  z-index: 0;
}

.vpcl-section-no-divider:before{
  display:none !important;
}


/* =========================================================
    FIXES issues
   ========================================================= */

/* 1) TOC: shift down + soften styling (less aggressive) */
.vpcl-toc{
  margin-top: 28px;                  /* was 18px — pushes TOC down slightly */
  padding: 18px 20px;               /* a touch roomier */
  border-radius: var(--vpcl-radius-sm);
  background: rgba(246,248,252,.72);/* less contrast than the gradient */
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 18px rgba(2,6,23,.05); /* softer shadow */
}

.vpcl-toc-title{
  margin: 0 0 12px;                 /* a bit more breathing room */
  color: var(--vpcl-ink);
  font-weight: 800;
}

.vpcl-toc-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px 18px;                   /* slightly calmer spacing */
}

.vpcl-toc-list li{
  margin: 0;
}

.vpcl-toc-list a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 750;                 /* slightly less “shouty” than 800 */
  color: var(--vpcl-navy);
}

.vpcl-toc-list a:before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--vpcl-gold);
  box-shadow: 0 0 0 3px rgba(200,156,57,.10); /* soften dot ring */
}

.vpcl-toc-list a:hover{
  color: var(--vpcl-gold-hover);
}

.vpcl-article .vpcl-note{
  margin-top: 10px;                 /* shifts “note” text down slightly */
}

@media (min-width: 1025px){
  /* If cards grid has 5 items, the 5th (HELOCs) sits alone—center it */
  .vpcl-cards .vpcl-card:nth-child(5):last-child{
    grid-column: 1 / -1;
    max-width: 520px;               /* keeps it from stretching too wide */
    justify-self: center;
  }
}

/* =========================================================
   SUPPORTING IMAGE BREAK
   ========================================================= */
.vpcl-article .vpcl-article-image-break{
  max-width: 740px;
  margin: 22px auto 34px; /* premium spacing (top + bottom) */
}

.vpcl-article .vpcl-article-image-break figure{
  width: 100%;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.10); /* safe fallback */
  box-shadow: 0 24px 70px rgba(0,0,0,.14);
  position: relative;
}

.vpcl-article .vpcl-article-image-break figure::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(200,156,57,.55),
    rgba(176,134,47,.20),
    rgba(18,24,38,.18)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .75;
}

.vpcl-article .vpcl-article-image-break img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.001);
}

.vpcl-article .vpcl-article-image-break figcaption{
  padding: 10px 14px 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--vpcl-muted);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(0,0,0,.03));
}

/* 5) Funky CTA button in “Want speed + clarity?” section */
.vpcl-inline-cta .vpcl-btn{
  width: auto;                      /* prevent odd stretching */
  min-width: 220px;                 /* stable shape */
  max-width: 100%;
  white-space: normal;              /* allows wrap if needed */
  text-align: center;
}

@media (max-width: 860px){
  .vpcl-inline-cta .vpcl-btn{
    width: 100%;                    /* full-width on mobile for consistency */
    min-width: 0;
  }
}

/* 6) “Run Quick Numbers” feels flat: subtle lift without overdoing it */
#vpcl-calculators{
  background: linear-gradient(180deg, rgba(246,248,252,.95), rgba(255,255,255,0));
  border-radius: var(--vpcl-radius);
}

#vpcl-calculators .vpcl-btn-grid{
  margin-top: 16px;                 /* slightly more space above button grid */
}

/* Center single last calculator button (Home Equity) */
.vpcl-btn-grid > a:last-child{
  grid-column: 1 / -1;              /* span full width */
  justify-self: center;             /* center the button */
  max-width: 420px;                 /* keep it visually balanced */
}

#vpcl-calculators .vpcl-btn-grid .vpcl-btn-secondary{
  background: linear-gradient(180deg, #ffffff, rgba(246,248,252,.85));
  border-color: rgba(15,23,42,.12);
}
#vpcl-calculators .vpcl-btn-grid .vpcl-btn-secondary:hover{
  border-color: rgba(200,156,57,.28);
}

/* Shift the line in this section down a touch */
#vpcl-calculators .vpcl-note{
  margin-top: 14px;                 /* was none; pushes it down slightly */
}

/* Ensure spacing below CTA buttons */
.vpcl-final .vpcl-disclaimer{
  margin-top: 16px;                 /* was 14px; subtle drop */
}

/* Pull final CTA section up slightly */
.vpcl-section .vpcl-final{
  margin-top: -18px;
}


/* =========================================================
    CTA BUTTON SYSTEM
   ========================================================= */
.vpcl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;

  border: 1px solid transparent;
  cursor: pointer;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  user-select: none;
  text-decoration: none !important;
}

.vpcl-btn:active{
  transform: translateY(1px);
}

.vpcl-btn-primary{
  background: linear-gradient(180deg, #111b33, #0b1220);
  border-color: rgba(15,23,42,.25);
  color: var(--vpcl-gold) !important;
  box-shadow: 0 16px 30px rgba(2,6,23,.14);
}
.vpcl-btn-primary:hover{
  box-shadow: 0 18px 34px rgba(2,6,23,.18);
  transform: translateY(-1px);
  color: var(--vpcl-gold-hover) !important;
}

.vpcl-btn-secondary{
  background: #fff;
  border-color: rgba(15,23,42,.14);
  color: var(--vpcl-gold) !important;
  box-shadow: var(--vpcl-shadow-soft);
}
.vpcl-btn-secondary:hover{
  transform: translateY(-1px);
  border-color: rgba(176,134,47,.35);
  box-shadow: 0 16px 30px rgba(2,6,23,.10);
  color: var(--vpcl-gold-hover) !important;
}

.vpcl-btn-tertiary{
  background: rgba(200,156,57,.10);
  border-color: rgba(200,156,57,.22);
  color: var(--vpcl-navy) !important;
}
.vpcl-btn-tertiary:hover{
  background: rgba(200,156,57,.14);
  border-color: rgba(200,156,57,.28);
  transform: translateY(-1px);
}

/* Big full-width CTA bar (solves the “thin line” collapse) */
.vpcl-btn-wide{
  width: 100%;
}

.vpcl-cta-bar{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: auto !important;
  min-height: 60px !important;

  padding: 16px 18px !important;
  border-radius: 18px !important;

  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;

  overflow: visible !important;
}

/* CTA layout */
.vpcl-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 6px;
}


/* =========================================================
    CALLOUTS + INLINE CTA CARD
   ========================================================= */
.vpcl-callout{
  border-radius: var(--vpcl-radius);
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 18px 18px;
  margin: 18px 0 0;
}

.vpcl-callout-title{
  margin: 0 0 6px;
}

.vpcl-callout-text{
  margin: 0;
  color: var(--vpcl-text);
}

.vpcl-callout-gold{
  border-color: rgba(200,156,57,.22);
  background: linear-gradient(180deg, rgba(200,156,57,.10), rgba(255,255,255,.9));
}

/* Inline CTA card */
.vpcl-inline-cta{
  margin-top: 18px;
  padding: 18px;
  border-radius: var(--vpcl-radius);
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(246,248,252,.9), rgba(255,255,255,.95));
  box-shadow: var(--vpcl-shadow-soft);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.vpcl-inline-cta-title{
  margin: 0 0 4px;
  color: var(--vpcl-ink);
}

.vpcl-inline-cta-sub{
  margin: 0;
  color: var(--vpcl-muted);
}


/* =========================================================
    COMPARE CARDS (PREQUAL VS PRE-APPROVAL)
   ========================================================= */
.vpcl-compare{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.vpcl-compare-card{
  border-radius: var(--vpcl-radius);
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.vpcl-compare-card:after{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(200,156,57,.10);
  filter: blur(0);
}


/* =========================================================
 LOAN TYPE CARDS
   ========================================================= */
.vpcl-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.vpcl-card{
  border-radius: var(--vpcl-radius);
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vpcl-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--vpcl-shadow);
  border-color: rgba(200,156,57,.22);
}


/* =========================================================
    TWO-COLUMN SPLIT (DOCS LISTS)
   ========================================================= */
.vpcl-split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.vpcl-split-col{
  border-radius: var(--vpcl-radius);
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 18px;
}


/* =========================================================
    LIST STYLES (BULLETS, CHECKLIST, NOTES, STEPS)
   ========================================================= */
.vpcl-bullets,
.vpcl-checklist{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.vpcl-bullets li,
.vpcl-checklist li{
  position: relative;
  padding-left: 30px;
  margin: 10px 0;
  color: var(--vpcl-text);
}

/* Gold bullet points (your request) */
.vpcl-bullets li:before{
  content:"";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--vpcl-gold);
  box-shadow: 0 0 0 3px rgba(200,156,57,.15);
}

/* Gold check bullets */
.vpcl-checklist li:before{
  content:"✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(200,156,57,.14);
  color: var(--vpcl-gold-hover);
  font-weight: 900;
  font-size: 14px;
}

/* Notes */
.vpcl-note{
  color: var(--vpcl-muted);
  font-size: 15px;
}

/* Steps */
.vpcl-steps{
  margin: 14px 0 0;
  padding-left: 18px;
}

.vpcl-steps li{
  margin: 12px 0;
  color: var(--vpcl-text);
}

.vpcl-steps li strong{
  display: block;
  margin-bottom: 3px;
}

.vpcl-steps li span{
  display: block;
  color: var(--vpcl-muted);
}


/* =========================================================
    CALCULATOR BUTTON GRID
   ========================================================= */
.vpcl-btn-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}

/* Make secondary buttons a touch “card-like” */
.vpcl-btn-grid .vpcl-btn-secondary{
  padding: 14px 14px;
  border-radius: 16px;
}


/* =========================================================
    FAQ (DETAILS/SUMMARY)
   ========================================================= */
.vpcl-faq-group{
  margin-top: 12px;
}

/* Increase spacing between homeowner vs investment groups */
.vpcl-faq-group + .vpcl-faq-group{
  margin-top: 56px;
}

/* Add a gold left accent to group headings */
.vpcl-faq-group > .vpcl-h3{
  margin-bottom: 20px;
  padding-left: 14px;
  border-left: 4px solid var(--vpcl-gold);
}

/* FAQ cards */
.vpcl-faq{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: var(--vpcl-shadow-soft);
  margin: 12px 0;
  overflow: hidden;
}

.vpcl-faq summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 800;
  color: var(--vpcl-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.vpcl-faq summary::-webkit-details-marker{
  display:none;
}

/* plus/minus */
.vpcl-faq summary:after{
  content:"+";
  color: var(--vpcl-gold-hover);
  font-size: 18px;
  font-weight: 900;
  flex: 0 0 auto;
}
.vpcl-faq[open] summary:after{
  content:"–";
}

/* Body */
.vpcl-faq-body{
  padding: 0 18px 16px;
  color: var(--vpcl-text);
}

/* Slight open state highlight */
.vpcl-faq[open]{
  border-color: rgba(200,156,57,.22);
  box-shadow: var(--vpcl-shadow);
}


/* =========================================================
    FINAL CTA PANEL
   ========================================================= */
.vpcl-final{
  border-radius: var(--vpcl-radius);
  border: 1px solid rgba(200,156,57,.25);
  background: linear-gradient(180deg, rgba(200,156,57,.12), rgba(255,255,255,.96));
  box-shadow: var(--vpcl-shadow);
  padding: clamp(18px, 3.2vw, 28px);
}

.vpcl-final-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.vpcl-disclaimer{
  margin: 14px 0 0;
  color: var(--vpcl-muted);
  font-size: 15px;
}


/* =========================================================
    RESPONSIVE (TABLET + MOBILE)
   ========================================================= */
@media (max-width: 1024px){
  .vpcl-toc-list{
    grid-template-columns: 1fr;
  }

  .vpcl-cards,
  .vpcl-split,
  .vpcl-compare{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px){
  .vpcl-article{
    font-size: 16px;
    line-height: 1.72;
  }

  .vpcl-section{
    padding: 26px 16px;
  }

  .vpcl-section:before{
    left: 16px;
    right: 16px;
  }

  .vpcl-cta-row{
    gap: 10px;
  }

  .vpcl-btn{
    width: 100%;
    padding: 13px 14px;
    font-size: 15px;
  }

  .vpcl-inline-cta{
    flex-direction: column;
    align-items: stretch;
  }

  .vpcl-btn-grid{
    grid-template-columns: 1fr;
  }

  .vpcl-cta-bar{
    min-height: 62px !important;
  }
}


/* =========================================================
    ACCESSIBILITY + MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .vpcl-article *{
    transition: none !important;
    scroll-behavior: auto !important;
  }
}/* End custom CSS */