.elementor-7017 .elementor-element.elementor-element-1c85cce5{--display:flex;--margin-top:-130px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;overflow:visible;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:1024px){.elementor-7017 .elementor-element.elementor-element-1c85cce5{--margin-top:-115px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(max-width:767px){.elementor-7017 .elementor-element.elementor-element-1c85cce5{--margin-top:-55px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-3ade45c *//* =========================
   VPCL Learning Center Article
   Scoped to: #vpcl-dscr-article
   ========================= */

/* Anchor jump fix for sticky header (TOC clicks) */
html{ scroll-padding-top: 85px; }
#vpcl-dscr-article [id]{ scroll-margin-top: 85px; }

#post-title{
  display: none !important;
}

/* =========================
   FIX: Post meta hiding behind featured image
   Use transform instead of negative margins
   ========================= */

#feature-image{
  margin-top: 0 !important;
  transform: translateY(-65px);
  position: relative;
  z-index: 1;
}

#post-info{
  margin-top: 0px !important;
  position: relative;
  z-index: 2; /* keeps meta above the image if they ever touch */
}



/* =========================
   1) Tokens + Base
   ========================= */
#vpcl-dscr-article{
  --vpcl-gold:#c89c39;
  --vpcl-gold-hover:#b0862f;
  --vpcl-ink:#121417;
  --vpcl-muted:#5e6a75;
  --vpcl-line:#e7ebf0;
  --vpcl-soft:#f7f9fc;
  --vpcl-card:#ffffff;

  --vpcl-radius:18px;

  --vpcl-shadow:0 10px 30px rgba(16,24,40,.08);
  --vpcl-shadow-soft:0 10px 24px rgba(16,24,40,.06);

  --vpcl-max:1180px;
  --vpcl-gap:24px;

  color:var(--vpcl-ink);
  font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.65;
}

/* Links */
#vpcl-dscr-article a{
  color:var(--vpcl-ink);
  text-decoration: underline;
  text-decoration-color: rgba(18,20,23,.25);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
#vpcl-dscr-article a:hover{
  color:var(--vpcl-gold-hover);
  text-decoration-color: rgba(176,134,47,.6);
}

/* Headings */
#vpcl-dscr-article h2,
#vpcl-dscr-article h3{
  font-family:"Raleway", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: -0.02em;
  font-weight: 700; /* was default/heavier via theme */
}
#vpcl-dscr-article h2{
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.2;
  margin: 0 0 12px 0;
}
#vpcl-dscr-article h3{
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 8px 0;
}

/* Paragraph rhythm */
#vpcl-dscr-article p{ margin: 0 0 14px 0; color: var(--vpcl-ink); }
#vpcl-dscr-article em{ color: var(--vpcl-muted); }
#vpcl-dscr-article strong{ font-weight: 600; } /* was 700 */

/* =========================
   2) Mini cards
   ========================= */
#vpcl-dscr-article .vpcl-mini-cards{
  max-width: var(--vpcl-max);
  margin: 18px auto 0 auto;
  padding: 0 clamp(10px, 2vw, 18px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
#vpcl-dscr-article .vpcl-mini-card{
  text-decoration: none !important;
  background: var(--vpcl-card);
  border: 1px solid var(--vpcl-line);
  border-radius: var(--vpcl-radius);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 16px 16px 14px 16px;
  transition: transform .15s ease, border-color .2s ease;
}
#vpcl-dscr-article .vpcl-mini-card:hover{
  transform: translateY(-2px);
  border-color: rgba(176,134,47,.45);
}
#vpcl-dscr-article .vpcl-mini-title{
  font-family:"Raleway", sans-serif;
  font-weight: 700; /* was 900 */
  font-size: 16px;
  margin-bottom: 6px;
  color: var(--vpcl-ink);
}
#vpcl-dscr-article .vpcl-mini-desc{
  color: var(--vpcl-muted);
  font-size: 14px;
  margin-bottom: 10px;
}
#vpcl-dscr-article .vpcl-mini-link{
  font-weight: 700; /* was 900 */
  color: var(--vpcl-ink);
}

/* =========================
   3) Shell layout + TOC
   ========================= */
#vpcl-dscr-article .vpcl-shell{
  max-width: var(--vpcl-max);
  margin: 18px auto 0 auto;
  padding: 0 clamp(10px, 2vw, 18px) clamp(18px, 4vw, 34px);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--vpcl-gap);
  align-items: start;
}
#vpcl-dscr-article .vpcl-toc{
  position: sticky;
  top: 95px;
}
#vpcl-dscr-article .vpcl-toc-box{
  background: #fff;
  border: 1px solid var(--vpcl-line);
  border-radius: var(--vpcl-radius);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 14px;
}
#vpcl-dscr-article .vpcl-toc-title{
  font-family:"Raleway", sans-serif;
  font-weight: 700; /* was 900 */
  font-size: 14px;
  margin-bottom: 10px;
  color: var(--vpcl-ink);
}
#vpcl-dscr-article .vpcl-toc-links{
  display: grid;
  gap: 8px;
}
#vpcl-dscr-article .vpcl-toc-links a{
  text-decoration: none;
  font-weight: 600; /* was 700 */
  font-size: 14px;
  color: var(--vpcl-muted);
  border-left: 3px solid transparent;
  padding-left: 10px;
}
#vpcl-dscr-article .vpcl-toc-links a:hover{
  color: var(--vpcl-gold-hover);
  border-left-color: rgba(176,134,47,.6);
}

/* =========================
   FIX: TOC hidden behind sticky header
   ========================= */

/* Use one consistent header offset value */
#vpcl-dscr-article{
  --vpcl-sticky-offset: 170px; /* adjust if needed */
}

/* Keep anchor jumps correct */
html{ scroll-padding-top: var(--vpcl-sticky-offset); }
#vpcl-dscr-article [id]{ scroll-margin-top: var(--vpcl-sticky-offset); }

/* Push TOC below header */
#vpcl-dscr-article .vpcl-toc{
  top: var(--vpcl-sticky-offset);
}

/* If any parent container clips the TOC, this prevents it */
#vpcl-dscr-article .vpcl-shell{
  overflow: visible;
}

/* Tablet/mobile header is usually taller */
@media (max-width: 980px){
  #vpcl-dscr-article{
    --vpcl-sticky-offset: 160px;
  }
}

/* =========================
   4) Sections + components
   ========================= */
#vpcl-dscr-article .vpcl-section{
  padding: 18px 0;
  border-bottom: 1px solid var(--vpcl-line);
}
#vpcl-dscr-article .vpcl-section:last-child{ border-bottom: 0;
    margin-top: 18px;}

#vpcl-dscr-article .vpcl-card{
  background: #fff;
  border: 1px solid var(--vpcl-line);
  border-radius: var(--vpcl-radius);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 16px;
}
#vpcl-dscr-article .vpcl-card-title{
  font-family:"Raleway", sans-serif;
  font-weight: 700; /* was 900 */
  margin: 0 0 8px 0;
}
#vpcl-dscr-article .vpcl-card-text,
#vpcl-dscr-article .vpcl-card-list{
  color: var(--vpcl-muted);
  margin: 0;
}
#vpcl-dscr-article .vpcl-card-list{
  padding-left: 18px;
}
#vpcl-dscr-article .vpcl-inline-link{
  display: inline-block;
  margin-top: 10px;
  font-weight: 700; /* was 900 */
}

/* Figure (Supporting image) */
#vpcl-dscr-article .vpcl-figure{
  margin: 0;
  background: #fff;
  border: 1px solid var(--vpcl-line);
  border-radius: 22px;
  box-shadow: var(--vpcl-shadow-soft);
  overflow: hidden;
}
#vpcl-dscr-article .vpcl-figure img{
  width: 100%;
  height: auto;
  display: block;
}
#vpcl-dscr-article .vpcl-figure figcaption{
  font-size: 13px;
  color: var(--vpcl-muted);
  padding: 10px 12px 12px 12px;
  border-top: 1px solid var(--vpcl-line);
}

/* Grid helpers */
#vpcl-dscr-article .vpcl-grid-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* =========================
   Gold keyword emphasis (BRRRR flow)
   ========================= */
#vpcl-dscr-article .vpcl-card-list strong{
  color: var(--vpcl-gold);
  font-weight: 600; /* softer than default bold */
}

/* Slight spacing between list items */
#vpcl-dscr-article .vpcl-card-list li{
  margin-bottom: 8px;
}
#vpcl-dscr-article .vpcl-card-list li:last-child{
  margin-bottom: 0;
}

/* Math block */
#vpcl-dscr-article .vpcl-math{
  background: #fff;
  border: 1px solid var(--vpcl-line);
  border-radius: var(--vpcl-radius);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 14px 16px;
  margin: 10px 0 14px 0;
}
#vpcl-dscr-article .vpcl-math-label{
  font-weight: 700; /* was 900 */
  font-size: 13px;
  color: var(--vpcl-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
#vpcl-dscr-article .vpcl-math-eq{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  color: var(--vpcl-ink);
}
#vpcl-dscr-article .vpcl-math-eq span{
  background: var(--vpcl-soft);
  border: 1px solid var(--vpcl-line);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Callouts */
#vpcl-dscr-article .vpcl-callout{
  border-radius: var(--vpcl-radius);
  padding: 14px 16px;
  border: 1px solid var(--vpcl-line);
  box-shadow: var(--vpcl-shadow-soft);
  background: #fff;
  margin: 14px 0;
}
#vpcl-dscr-article .vpcl-callout-title{
  font-family:"Raleway", sans-serif;
  font-weight: 700; /* was 900 */
  margin: 0 0 6px 0;
}
#vpcl-dscr-article .vpcl-callout-text{
  margin: 0 0 12px 0;
  color: var(--vpcl-muted);
}
#vpcl-dscr-article .vpcl-callout-note{ border-left: 6px solid rgba(200,156,57,.55); }
#vpcl-dscr-article .vpcl-callout-warning{ border-left: 6px solid rgba(18,20,23,.25); }
#vpcl-dscr-article .vpcl-callout-cta{
  border-left: 6px solid rgba(176,134,47,.65);
  background: linear-gradient(180deg, #fff, var(--vpcl-soft));
}

/* =========================
 CTA Button Styling
   ========================= */

/* CTA system tokens (add to your #vpcl-dscr-article token block) */
#vpcl-dscr-article{
  --vpcl-btn-radius:999px;
  --vpcl-btn-pad-y:10px;
  --vpcl-btn-pad-x:14px;
  --vpcl-btn-shadow:0 10px 20px rgba(16,24,40,.10);
  --vpcl-btn-shadow-soft:0 10px 20px rgba(16,24,40,.06);
  --vpcl-btn-shadow-hover:0 14px 26px rgba(16,24,40,.12);
  --vpcl-focus:0 0 0 4px rgba(200,156,57,.22);
}

/* Button row wrappers */
#vpcl-dscr-article .vpcl-hero-cta,
#vpcl-dscr-article .vpcl-inline-cta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 12px;
}

/* Core button */
#vpcl-dscr-article .vpcl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  border-radius: var(--vpcl-btn-radius);
  padding: var(--vpcl-btn-pad-y) var(--vpcl-btn-pad-x);

  font-weight: 600; /* was 700 */
  font-size: 14px;
  line-height: 1;

  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;

  box-shadow: var(--vpcl-btn-shadow-soft);

  transition:
    transform .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
}

#vpcl-dscr-article .vpcl-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--vpcl-btn-shadow-hover);
}
#vpcl-dscr-article .vpcl-btn:active{ transform: translateY(0px); }
#vpcl-dscr-article .vpcl-btn:focus-visible{
  outline: none;
  box-shadow: var(--vpcl-focus);
}

/* Button styles */
#vpcl-dscr-article .vpcl-btn-primary{
  background: var(--vpcl-gold);
  color: #101215;
  border-color: rgba(0,0,0,.06);
  box-shadow: var(--vpcl-btn-shadow);
}
#vpcl-dscr-article .vpcl-btn-primary:hover{ background: var(--vpcl-gold-hover); }

#vpcl-dscr-article .vpcl-btn-ghost{
  background: #fff;
  border-color: rgba(18,20,23,.14);
  color: var(--vpcl-ink);
}
#vpcl-dscr-article .vpcl-btn-ghost:hover{ border-color: rgba(176,134,47,.55); }

/* Text-only link CTA */
#vpcl-dscr-article .vpcl-btn-link{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--vpcl-ink);
  padding: 10px 6px;
  font-weight: 600; /* keep consistent with button system */
}
#vpcl-dscr-article .vpcl-btn-link:hover{
  color: var(--vpcl-gold-hover);
  transform: none;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Theme safety: NEVER underline buttons (fixes Elementor/theme weirdness) */
#vpcl-dscr-article .vpcl-btn,
#vpcl-dscr-article .vpcl-btn:link,
#vpcl-dscr-article .vpcl-btn:visited{
  text-decoration:none !important;
  border-bottom:none !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-text-fill-color:currentColor !important;
}

#vpcl-dscr-article a.vpcl-btn,
#vpcl-dscr-article a.vpcl-btn:link,
#vpcl-dscr-article a.vpcl-btn:visited,
#vpcl-dscr-article a.vpcl-btn:hover,
#vpcl-dscr-article a.vpcl-btn:focus,
#vpcl-dscr-article a.vpcl-btn:focus-visible,
#vpcl-dscr-article a.vpcl-btn:active{
  text-decoration:none !important;
  border-bottom:none !important;
  background-image:none !important;
}
#vpcl-dscr-article a.vpcl-btn::after,
#vpcl-dscr-article a.vpcl-btn:hover::after{
  text-decoration:none !important;
  border-bottom:none !important;
}

/* Re-enable underline ONLY for text link CTA */
#vpcl-dscr-article a.vpcl-btn-link:hover{
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Elementor specificity: force <a> button colors (fixes faded/odd text + hover) */
#vpcl-dscr-article a.vpcl-btn.vpcl-btn-primary,
#vpcl-dscr-article a.vpcl-btn.vpcl-btn-primary:link,
#vpcl-dscr-article a.vpcl-btn.vpcl-btn-primary:visited{
  background:var(--vpcl-gold) !important;
  color:#ffffff !important;
  border:1px solid var(--vpcl-gold) !important;
  box-shadow:var(--vpcl-btn-shadow) !important;
}
#vpcl-dscr-article a.vpcl-btn.vpcl-btn-primary:hover{
  background:var(--vpcl-gold-hover) !important;
  border-color:var(--vpcl-gold-hover) !important;
  color:#ffffff !important;
  box-shadow:var(--vpcl-btn-shadow-hover) !important;
}

/* FIX: hard-lock primary CTA text on hover (Elementor/webkit override) */
#vpcl-dscr-article a.vpcl-btn.vpcl-btn-primary,
#vpcl-dscr-article a.vpcl-btn.vpcl-btn-primary:hover,
#vpcl-dscr-article a.vpcl-btn.vpcl-btn-primary:focus,
#vpcl-dscr-article a.vpcl-btn.vpcl-btn-primary:active{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Mobile: better tap targets + allow wrapping (matches BRRRR) */
@media (max-width: 520px){
  #vpcl-dscr-article .vpcl-btn{
    padding: 11px 16px;
    white-space: normal;
    line-height: 1.25;
    text-align:center;
  }
}

/* =========================
   Steps
   ========================= */
#vpcl-dscr-article .vpcl-steps{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
#vpcl-dscr-article .vpcl-steps li{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--vpcl-line);
  border-radius: var(--vpcl-radius);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 14px 14px 12px 14px;
}
#vpcl-dscr-article .vpcl-step-num{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--vpcl-soft);
  border: 1px solid var(--vpcl-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700; /* was 900 */
  font-family:"Raleway", sans-serif;
  color: var(--vpcl-ink);
}
#vpcl-dscr-article .vpcl-step-body p{
  margin: 0;
  color: var(--vpcl-muted);
}
#vpcl-dscr-article .vpcl-step-body{
  padding-top: 9px;
}

/* =========================
   Checklist
   ========================= */
#vpcl-dscr-article .vpcl-checklist{
  background: #fff;
  border: 1px solid var(--vpcl-line);
  border-radius: var(--vpcl-radius);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 14px 16px;
  margin: 14px 0;
}
#vpcl-dscr-article .vpcl-checklist-title{
  font-family:"Raleway", sans-serif;
  font-weight: 700; /* was 900 */
  margin: 0 0 8px 0;
}
#vpcl-dscr-article .vpcl-checklist ul{
  margin: 0;
  padding-left: 18px;
  color: var(--vpcl-muted);
}
#vpcl-dscr-article .vpcl-checklist li{ margin: 8px 0; }

/* =========================
   Branded gold bullets
   ========================= */
#vpcl-dscr-article .vpcl-bullets{
  list-style: none;
  padding-left: 0;
  margin: 10px 0 0;
  display: grid;
  gap: 10px;
}

#vpcl-dscr-article .vpcl-bullets li{
  position: relative;
  padding-left: 18px;
  line-height: 1.7;
  color: var(--vpcl-muted);
}

#vpcl-dscr-article .vpcl-bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(200,156,57,.85);             /* VPCL gold dot */
  box-shadow: 0 0 0 4px rgba(200,156,57,.14);   /* soft ring */
}


/* =========================
   FAQ
   ========================= */
#vpcl-dscr-article .vpcl-faq{
  display: grid;
  gap: 10px;
}
#vpcl-dscr-article .vpcl-faq details{
  background: #fff;
  border: 1px solid var(--vpcl-line);
  border-radius: var(--vpcl-radius);
  box-shadow: var(--vpcl-shadow-soft);
  overflow: hidden;
}
#vpcl-dscr-article .vpcl-faq summary{
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700; /* was 900 */
  font-family:"Raleway", sans-serif;
  list-style: none;
}
#vpcl-dscr-article .vpcl-faq summary::-webkit-details-marker{ display:none; }
#vpcl-dscr-article .vpcl-faq .vpcl-faq-body{
  padding: 0 16px 14px 16px;
  border-top: 1px solid var(--vpcl-line);
}
#vpcl-dscr-article .vpcl-faq .vpcl-faq-body p{
  margin: 12px 0 0 0;
  color: var(--vpcl-muted);
}

/* =========================
   CTA banner
   ========================= */
#vpcl-dscr-article .vpcl-cta-banner{
  background: linear-gradient(180deg, #fff, var(--vpcl-soft));
  border: 1px solid var(--vpcl-line);
  border-radius: var(--vpcl-radius);
  box-shadow: var(--vpcl-shadow-soft);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
#vpcl-dscr-article .vpcl-cta-copy h3{
  margin: 0 0 6px 0;
  font-weight: 700; /* ensure consistent with softened headings */
}
#vpcl-dscr-article .vpcl-cta-copy p{ margin: 0; color: var(--vpcl-muted); }
#vpcl-dscr-article .vpcl-cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* =========================
   Disclaimer
   ========================= */
#vpcl-dscr-article .vpcl-disclaimer{
  margin-top: 14px;
  font-size: 13px;
  color: var(--vpcl-muted);
}

/* =========================
   5) Responsive
   ========================= */

/* <= 980px (tablet + down) */
@media (max-width: 980px){

  /* Layout */
  #vpcl-dscr-article .vpcl-shell{
    grid-template-columns: 1fr;
    margin-top: 0 !important;
  }

  #vpcl-dscr-article .vpcl-toc{
    position: relative;
    top: auto;
  }

  #vpcl-dscr-article .vpcl-mini-cards,
  #vpcl-dscr-article .vpcl-grid-2{
    grid-template-columns: 1fr;
  }

  /* Prevent compound spacing */
  #vpcl-dscr-article{
    margin-top: 0 !important;
  }
}

/* <= 768px (large mobile / small tablet) */
@media (max-width: 768px){
  #feature-image{
    margin-top: -64px !important;
  }

  #post-info{
    margin-bottom: 10px !important;
  }
}

/* <= 600px (mobile) */
@media (max-width: 600px){
  #feature-image{
    transform: translateY(-48px) !important;
  }

  #vpcl-dscr-article{
    margin-top: -48px !important;
  }
}

/* <= 520px (small mobile) */
@media (max-width: 520px){

  #vpcl-dscr-article .vpcl-btn{
    width: 100%;
  }

  #vpcl-dscr-article .vpcl-cta-actions .vpcl-btn{
    width: 100%;
  }

  /* Slight list spacing on mobile */
  #vpcl-dscr-article .vpcl-card-list li{
    margin-bottom: 6px;
  }

  /* Featured image + article spacing */
  #feature-image{
    transform: translateY(-38px) !important;
  }

  #vpcl-dscr-article{
    margin-top: -38px !important;
  }
}

/* <= 420px (very small mobile) */
@media (max-width: 420px){
  #feature-image{
    transform: translateY(-28px) !important;
  }

  #vpcl-dscr-article{
    margin-top: -28px !important;
  }
}/* End custom CSS */