.elementor-7624 .elementor-element.elementor-element-6235395{--display:flex;overflow:visible;}.elementor-7624 .elementor-element.elementor-element-9a983cf > .elementor-widget-container{margin:-35px 0px 0px 0px;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for html, class: .elementor-element-9a983cf *//* =========================
   VPCL Learning Center Article
   Article: Buy Your Home
   ========================= */

/* ---------- Design Tokens + Base ---------- */
.vpcl-article{
  --vpcl-text: #111;
  --vpcl-body: #2b2f33;
  --vpcl-muted: #6c7a89;
  --vpcl-soft: rgba(0,0,0,0.03);
  --vpcl-border: rgba(0,0,0,0.08);

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

  --vpcl-radius-lg: 18px;
  --vpcl-radius-xl: 22px;

  --vpcl-shadow-sm: 0 10px 26px rgba(0,0,0,0.06);
  --vpcl-shadow-md: 0 14px 34px rgba(0,0,0,0.12);
  --vpcl-shadow-xl: 0 24px 70px rgba(0,0,0,0.14);

  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.75;
  color: var(--vpcl-body);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  position: relative;
}

.vpcl-article *{ box-sizing: border-box; }

/* Smooth anchor scroll */
html{ scroll-behavior: smooth; }

/* Soft backdrop behind the whole article (depth + “keep scrolling” cue) */
.vpcl-article::before{
  content:"";
  position:absolute;
  inset: -40px -18px;
  border-radius: 28px;
  background:
    radial-gradient(1200px 500px at 30% -10%, rgba(200,156,57,0.10), transparent 60%),
    radial-gradient(900px 420px at 85% 20%, rgba(17,17,17,0.05), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.015));
  pointer-events:none;
  z-index: 0;
}

.vpcl-article > *{
  position: relative;
  z-index: 1;
}

/* ---------- Anchor Offset (TOC Scroll Fix) ---------- */
.vpcl-step{ scroll-margin-top: 135px; }

/* ---------- Hero ---------- */
.vpcl-hero{ padding: 10px 0 0; }

.vpcl-eyebrow{
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vpcl-muted);
  margin: 0 0 8px;
}

/* Headings */
.vpcl-h1,
.vpcl-h2{
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  color: var(--vpcl-text);
}

.vpcl-h1{
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.15;
  margin-bottom: 10px;
}

.vpcl-h2{
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.25;
}

/* Reading rhythm */
.vpcl-lead{
  font-size: clamp(16px, 2.2vw, 20px);
  color: #4b5b6b;
  margin: 0 0 18px;
  max-width: 74ch;
}

.vpcl-p{
  margin: 0 0 16px;
  color: var(--vpcl-body);
  font-size: clamp(16px, 2.1vw, 18px);
  max-width: 78ch;
}

/* ---------- Buttons ---------- */
.vpcl-hero-cta,
.vpcl-final-actions,
.vpcl-card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0 0;
}

/* Kill any theme underline on hover/focus/active for buttons */
.vpcl-article a.vpcl-btn,
.vpcl-article a.vpcl-btn:hover,
.vpcl-article a.vpcl-btn:focus,
.vpcl-article a.vpcl-btn:active{
  text-decoration: none !important;
}

.vpcl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;

  border: 1px solid transparent;
  text-decoration: none !important;

  transition: transform 180ms ease,
              box-shadow 180ms ease,
              background-color 180ms ease,
              color 180ms ease,
              border-color 180ms ease;
}

.vpcl-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(200,156,57,0.25);
}

/* Primary CTA (Global): Dark */
.vpcl-article .vpcl-btn-primary{
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.vpcl-article .vpcl-btn-primary:hover{
  background: #000;
  border-color: #000;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}

/* Secondary CTA (Global): Gold outline */
.vpcl-article .vpcl-btn-ghost{
  background: transparent;
  color: var(--vpcl-gold);
  border-color: var(--vpcl-gold);
  font-weight: 800;
}

.vpcl-article .vpcl-btn-ghost:hover{
  background: rgba(176,134,47,0.12);
  color: #111;
  border-color: var(--vpcl-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* Slight “press” feedback */
.vpcl-btn:active{
  transform: translateY(0px) scale(0.99);
}

/* ---------- Links (non-button) ---------- */
.vpcl-link,
.vpcl-mini-link,
.vpcl-link-strong{
  color: var(--vpcl-gold);
  text-decoration: none;
}

.vpcl-link:hover,
.vpcl-mini-link:hover,
.vpcl-link-strong:hover{
  color: var(--vpcl-gold-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.vpcl-link-strong{ font-weight: 900; }

/* ---------- TOC / Jump Links ---------- */
.vpcl-jumplinks{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid var(--vpcl-border);
  border-radius: 16px;
  background: rgba(0,0,0,0.02);
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}

/* Kill underlines no matter what Elementor/theme does */
.vpcl-article .vpcl-jumplinks a,
.vpcl-article .vpcl-jumplinks a:hover,
.vpcl-article .vpcl-jumplinks a:focus,
.vpcl-article .vpcl-jumplinks a:active{
  text-decoration: none !important;
}

.vpcl-jumplinks a{
  font-weight: 800;
  font-size: 13px;
  color: var(--vpcl-gold);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(200,156,57,0.35);
  background: rgba(255,255,255,0.65);
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);

  transition: background-color 180ms ease,
              color 180ms ease,
              border-color 180ms ease,
              transform 180ms ease,
              box-shadow 180ms ease;
}

.vpcl-jumplinks a:hover{
  color: #111;
  background: rgba(176,134,47,0.18);
  border-color: var(--vpcl-gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.08);
}

/* ---------- Standard figure (if used) ---------- */
.vpcl-figure{
  margin: 22px 0 10px;
  padding: 0;
}

.vpcl-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--vpcl-radius-lg);
  box-shadow: var(--vpcl-shadow-md);
}

.vpcl-caption{
  margin: 10px 0 0;
  color: var(--vpcl-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Callouts ---------- */
.vpcl-callout{
  margin: 22px 0;
  padding: 18px 18px;
  border-radius: var(--vpcl-radius-lg);
  border: 1px solid rgba(200,156,57,0.28);
  background: rgba(200,156,57,0.10);
}

.vpcl-callout-soft{
  border-color: var(--vpcl-border);
  background: var(--vpcl-soft);
}

.vpcl-callout-title{
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--vpcl-text);
}

.vpcl-callout-text{
  margin: 0;
  color: var(--vpcl-body);
  font-size: clamp(16px, 2.1vw, 18px);
}

.vpcl-inline-cta{ margin-top: 10px; }

/* ---------- Steps ---------- */
.vpcl-step{
  margin: 26px 0;
  padding: 18px 18px;
  border-radius: var(--vpcl-radius-lg);
  border: 1px solid var(--vpcl-border);
  background: #fff;
  box-shadow: var(--vpcl-shadow-sm);
  position: relative;
  overflow: hidden;

  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* Gold accent rail (subtle scroll guidance) */
.vpcl-step::before{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    rgba(200,156,57,0.0),
    rgba(200,156,57,0.55),
    rgba(176,134,47,0.35),
    rgba(200,156,57,0.0)
  );
  opacity: 0.75;
}

/* Premium hover (desktop only) */
@media (hover: hover){
  .vpcl-step:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 52px rgba(0,0,0,0.12);
    border-color: rgba(200,156,57,0.28);
  }
}

/* Header layout (grid) */
.vpcl-step-header{
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: start;
  margin-bottom: 8px;
  padding-bottom: 2px;
}

/* Kill theme margins inside header */
.vpcl-step-header h3,
.vpcl-step-header .vpcl-h2{
  margin: 0 !important;
  line-height: 1.15;
}

/* Badge */
.vpcl-step-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  background: rgba(200,156,57,0.18);
  border: 1px solid rgba(200,156,57,0.35);
  color: var(--vpcl-text);
  position: relative;
  top: -5px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

/* Lists */
.vpcl-list,
.vpcl-ol{
  margin: 10px 0 18px;
  padding-left: 20px;
}

.vpcl-list li,
.vpcl-ol li{
  margin: 8px 0;
  color: var(--vpcl-body);
  font-size: clamp(16px, 2.1vw, 18px);
  padding-left: 2px;
}

/* ---------- Cards inside steps ---------- */
.vpcl-card{
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--vpcl-radius-lg);
  border: 1px solid var(--vpcl-border);
  background: rgba(0,0,0,0.02);
  position: relative;
  overflow: hidden;

  transition: transform 220ms ease, box-shadow 220ms ease;
}

/* Soft highlight layer inside card */
.vpcl-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 20% 0%, rgba(200,156,57,0.12), transparent 60%);
  opacity: 0.65;
  pointer-events:none;
}

.vpcl-card > *{
  position: relative;
  z-index: 1;
}

@media (hover: hover){
  .vpcl-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 46px rgba(0,0,0,0.10);
  }
}

.vpcl-card-title{
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--vpcl-text);
}

.vpcl-card-text{
  margin: 0;
  color: var(--vpcl-body);
  font-size: clamp(16px, 2.1vw, 18px);
}

/* ---------- Loan Options Grid ---------- */
.vpcl-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.vpcl-mini{
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--vpcl-border);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(0,0,0,0.01));
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

@media (hover: hover){
  .vpcl-mini:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 48px rgba(0,0,0,0.12);
    border-color: rgba(200,156,57,0.26);
  }
}

.vpcl-mini-title{
  font-family: "Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--vpcl-text);
}

.vpcl-mini-text{
  margin: 0 0 10px;
  color: var(--vpcl-body);
  font-size: 15px;
  line-height: 1.65;
}

.vpcl-mini-link{
  font-weight: 900;
  font-size: 14px;
}

/* =========================================================
   VPCL FAQ SECTION (Details/Accordion)
   ========================================================= */
.vpcl-faq{
  margin: 30px 0 0;
  padding: 20px 18px;
  border-radius: var(--vpcl-radius-lg);
  border: 1px solid var(--vpcl-border);
  background: linear-gradient(180deg, rgba(0,0,0,0.015), rgba(255,255,255,0.85));
  box-shadow: 0 14px 44px rgba(0,0,0,0.06);
}

.vpcl-faq-header{ margin-bottom: 10px; }

.vpcl-faq-subtext{
  margin-top: 8px;
  margin-bottom: 0;
  color: var(--vpcl-muted);
  max-width: 78ch;
}

.vpcl-faq-list{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

/* Individual item */
.vpcl-faq-item{
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.92);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* Remove default marker */
.vpcl-faq-item summary::-webkit-details-marker{ display: none; }

.vpcl-faq-item[open]{
  border-color: rgba(200,156,57,0.24);
  box-shadow: 0 16px 46px rgba(0,0,0,0.08);
}

/* Summary */
.vpcl-faq-q{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 14px;

  font-weight: 900;
  font-size: clamp(15px, 2.0vw, 17px);
  color: var(--vpcl-text);

  user-select: none;
  -webkit-tap-highlight-color: transparent;

  background: radial-gradient(600px 220px at 15% 0%, rgba(200,156,57,0.10), transparent 65%);
  transition: background-color 180ms ease, transform 180ms ease;
}

/* Chevron */
.vpcl-faq-q::after{
  content: "▾";
  font-size: 18px;
  line-height: 1;
  color: var(--vpcl-gold);
  transform: translateY(-1px);
  transition: transform 220ms ease, color 220ms ease;
}

.vpcl-faq-item[open] .vpcl-faq-q::after{
  transform: rotate(-180deg) translateY(1px);
  color: var(--vpcl-gold-hover);
}

/* Hover/Focus states */
@media (hover: hover){
  .vpcl-faq-item:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 46px rgba(0,0,0,0.09);
    border-color: rgba(200,156,57,0.18);
  }

  .vpcl-faq-q:hover{ transform: translateY(-1px); }
}

.vpcl-faq-q:focus{ outline: none; }

.vpcl-faq-item:focus-within{
  box-shadow: 0 0 0 4px rgba(200,156,57,0.18), 0 16px 46px rgba(0,0,0,0.08);
  border-color: rgba(200,156,57,0.26);
}

/* Answer wrapper */
.vpcl-faq-a{
  padding: 0 14px 14px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(0,0,0,0.01));
}

.vpcl-faq-a .vpcl-p{
  margin-top: 12px;
  margin-bottom: 0;
}

.vpcl-faq-cta{ margin-top: 16px; }
.vpcl-faq-cta .vpcl-card{ margin-top: 0; }

/* ---------- Final CTA Section ---------- */
.vpcl-final{
  margin: 30px 0 0;
  padding: 22px 18px;
  border-radius: var(--vpcl-radius-lg);
  border: 1px solid rgba(200,156,57,0.28);
  background: rgba(200,156,57,0.10);
  box-shadow: 0 18px 55px rgba(0,0,0,0.10);
}

.vpcl-fineprint{
  margin: 14px 0 0;
  color: var(--vpcl-muted);
  font-size: 14px;
  line-height: 1.6;
}

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

.vpcl-article .vpcl-article-image-break figure{
  width: 100%;
  margin: 0 auto;
  border-radius: var(--vpcl-radius-xl);
  overflow: hidden;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--vpcl-shadow-xl);
  position: relative;
}

.vpcl-article .vpcl-article-image-break figure::before{
  content:"";
  position:absolute;
  inset: -2px;
  border-radius: calc(var(--vpcl-radius-xl) + 2px);
  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));
}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .vpcl-step{ padding: 16px 14px; }
  .vpcl-grid{ grid-template-columns: 1fr; }
  .vpcl-jumplinks{ padding: 12px; }

  .vpcl-jumplinks a{
    width: 100%;
    text-align: center;
  }

  .vpcl-btn{ width: 100%; }
  .vpcl-step-badge{ top: -3px; }
  .vpcl-step{ scroll-margin-top: 110px; }

  /* FAQ */
  .vpcl-faq{
    padding: 16px 14px;
    border-radius: 16px;
  }
  .vpcl-faq-q{
    padding: 13px 12px;
    gap: 10px;
  }
  .vpcl-faq-a{
    padding: 0 12px 12px;
  }
}

/* ---------- Respect Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  .vpcl-btn,
  .vpcl-step,
  .vpcl-card,
  .vpcl-mini,
  .vpcl-jumplinks a,
  .vpcl-faq-item,
  .vpcl-faq-q,
  .vpcl-faq-q::after{
    transition: none !important;
    transform: none !important;
  }
}/* End custom CSS */