/* ===== BASE ===== */
html{
scroll-behavior:smooth;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
line-height:1.7;
color:#1a1a1a;
}
/* ===== MOBILE BUTTON ===== */
#mobile-toc-btn{
display:none;
position:fixed;
bottom:20px;
right:20px;
background:#2563eb;
color:#fff;
padding:12px 16px;
border-radius:30px;
cursor:pointer;
z-index:9999;
font-size:14px;
}

/* ===== READING PROGRESS ===== */
#reading-progress{
position:fixed;
top:0;
left:0;
height:4px;
width:0%;
background:#2563eb;
z-index:9999;
}

/* ===== LAYOUT ===== */
.pf-layout{
display:grid;
grid-template-columns:260px minmax(0,1fr);
gap:45px;
width:100%;
align-items:start;
}

.pf-layout,
.pf-article,
.pf-toc{
min-width:0;
}

/* ===== SIDEBAR ===== */
.pf-sidebar{
position:sticky;
top:20px;
display:flex;
flex-direction:column;
gap:12px;
height:fit-content;
}

/* ===== TOC ===== */
.pf-toc{
position:relative;
border:1px solid #eee;
padding:18px;
border-radius:12px;
background:#fafafa;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

.pf-toc-header{
font-weight:600;
margin-bottom:12px;
}

.pf-toc ul{
list-style:none;
padding:0;
margin:0;
}

.pf-toc li{
margin-bottom:8px;
}

.pf-toc a{
text-decoration:none;
font-size:14px;
color:#444;
display:block;
transition:0.2s;
}

.pf-toc a:hover{
color:#2563eb;
}

.pf-toc a.active{
color:#2563eb;
font-weight:600;
}

.sub{
padding-left:16px;
font-size:13px;
}

.toc-progress{
position:absolute;
left:0;
top:0;
width:3px;
height:0%;
background:#2563eb;
}






/* ===== ARTICLE HEADER ===== */

.article-header{
margin-bottom:18px;
}

/* breadcrumb */

.article-breadcrumb{
font-size:13px;
margin-bottom:8px;
color:#64748b;
}

.article-breadcrumb a{
color:#2563eb;
text-decoration:none;
font-weight:500;
}

.article-breadcrumb a:hover{
text-decoration:underline;
}

.article-breadcrumb .sep{
margin:0 6px;
color:#94a3b8;
}

.article-breadcrumb .current{
color:#475569;
}

/* subtitle */

.article-subtitle{
font-size:18px;
font-weight:500;
color:#475569;
margin-bottom:10px;
}




















/* ===== ARTICLE ===== */
.pf-article{
max-width:800px;
}

.pf-article img{
max-width:100%;
height:auto;
display:block;
margin:25px 0;
border-radius:6px;
}

.pf-article h1{
font-size:32px;
font-weight:700;
margin-bottom:10px;
}


.pf-article h2 {
  margin-top: 25px;        /* REDUCED: Was 40px, now 25px to close the gap */
  font-size: 24px;
  font-weight: 700;
  padding-left: 16px;      
  position: relative;      
  line-height: 1.2;
  scroll-margin-top: 10px;
  border-left: none;       
}

.pf-article h2::before {
  content: "";
  position: absolute;
  left: 0;
  
  /* TALLER BAR FIX */
  bottom: 2px;             /* Anchors it closer to the bottom of the text */
  height: 26px;            /* INCREASED: Was 22px, now 26px to make it taller */
  
  width: 4px;
  background: #2563eb;
  border-radius: 2px;      
}

.pf-article h3{
font-size:18px;
font-weight:600;
}

.article-meta{
font-size:14px;
color:#666;
margin-top:10px;
}

.reading-time{
color:#888;
}

/* ===== INLINE CTA ===== */
.pf-cta-box{
margin:40px 0;
padding:25px;
border-radius:14px;
background:linear-gradient(135deg,#2563eb,#60a5fa);
color:#fff;
text-align:center;
}

.pf-cta-box a{
color:#fff;
font-weight:700;
text-decoration:none;
}

/* ===== SIGNAL PREVIEW ===== */
.pf-signal-box{
margin:30px 0;
border-radius:12px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
border:1px solid #e5e7eb;
}

.pf-signal-header{
background:#0f172a;
color:#fff;
padding:12px;
font-size:14px;
font-weight:700;
}

.pf-signal-body{
padding:15px;
background:#fff;
}

.pf-signal-row{
display:flex;
justify-content:space-between;
margin-bottom:8px;
font-size:13px;
}

.buy{color:#16a34a;}
.sell{color:#dc2626;}

.pf-signal-footer{
padding:12px;
text-align:center;
background:#f9fafb;
}

.pf-signal-footer a{
color:#2563eb;
font-weight:700;
text-decoration:none;
}

/* ===== MINI CTA ===== */
.pf-cta-mini{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px 12px;
border-radius:12px;
background:linear-gradient(135deg,#0f172a,#1e3a8a);
color:#fff;
box-shadow:0 10px 25px rgba(0,0,0,0.12);
border:1px solid rgba(255,255,255,0.08);
position:relative;
overflow:hidden;
}

.pf-cta-mini::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,0.15),transparent);
transition:0.6s;
}

.pf-cta-mini:hover::after{
left:100%;
}

.pf-cta-mini a{
color:#fff !important;
text-decoration:none;
}

.pf-cta-mini-left{
display:flex;
flex-direction:column;
gap:2px;
}

.pf-cta-badge {
  font-size: 10px;          /* slightly smaller */
  padding: 1px 6px;        /* reduce top/bottom padding */
  line-height: 1.5;          /* removes extra vertical space */
  background: #3b82f6;
  border-radius: 6px;
  font-weight: 700;
  width: max-content;
}

.pf-cta-mini-text{
font-size:13px;
font-weight:700;
}

.pf-cta-mini-benefits{
display:flex;
flex-direction:column;
gap:2px;
}

.pf-cta-mini-benefits span{
display:flex;
align-items:center;
font-size:11px;
color:#c7dbff;
}

.pf-cta-mini-benefits i{
font-size:10px;
margin-right:6px;
color:#22c55e;
}

.pf-cta-trust{
display:flex;
align-items:center;
gap:4px;
font-size:10px;
color:#93c5fd;
margin-top:3px;
}

.pf-cta-trust i{
font-size:10px;
color:#60a5fa;
}

.pf-cta-mini-btn{
background:linear-gradient(135deg,#60a5fa,#3b82f6);
color:#fff;
padding:7px 14px;
border-radius:20px;
font-size:12px;
font-weight:700;
white-space:nowrap;
box-shadow:0 4px 12px rgba(59,130,246,0.4);
transition:0.25s;
}

.pf-cta-mini-btn:hover{
transform:translateY(-1px);
box-shadow:0 6px 18px rgba(59,130,246,0.6);
}

/* ===== LIVE POPUP ===== */
.pf-live-popup{
position:fixed;
bottom:90px;
left:20px;
background:#0f172a;
color:#fff;
padding:10px 14px;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
z-index:9999;
opacity:0;
transform:translateY(20px);
transition:0.4s;
}

.pf-live-popup.show{
opacity:1;
transform:translateY(0);
}

/* ===== FAQ SECTION ===== */

.pf-faq{
max-width:800px;
margin:50px auto;
}

/* faq item */

.pf-faq-item{
border:1px solid #e5e7eb;
border-radius:12px;
margin-bottom:12px;
background:#fff;
box-shadow:0 6px 18px rgba(0,0,0,0.04);
transition:all .25s ease;
}

.pf-faq-item:hover{
border-color:#dbeafe;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
}


/* question */

.pf-faq-question{
width:100%;
text-align:left;
padding:16px 18px;
background:none;
border:none;
font-size:15px;
font-weight:600;
color:#1e293b;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
}

/* arrow icon */

.pf-faq-question::after{
content:"+";
font-size:20px;
color:#2563eb;
transition:transform .25s ease;
}

/* open state */

.pf-faq-question[aria-expanded="true"]::after{
content:"–";
transform:rotate(180deg);
}


/* answer */

.pf-faq-answer{
padding:0 18px 16px 18px;
font-size:14px;
color:#475569;
line-height:1.7;
border-top:1px solid #f1f5f9;
margin-top:4px;
}
/* ===== MOBILE CTA ===== */
.pf-mobile-cta{
display:none;
position:fixed;
bottom:0;
left:0;
width:100%;
background:linear-gradient(135deg,#0f172a,#1e3a8a);
padding:10px 80px 10px 12px; /* extra right space for chat bubble */
z-index:9999;
box-shadow:0 -5px 20px rgba(0,0,0,0.15);
justify-content:space-between;
align-items:center;
}

.pf-mobile-cta-text{
color:#fff;
font-size:13px;
font-weight:700;
}

.pf-mobile-cta-text span{
font-size:11px;
color:#c7dbff;
display:block;
}

.pf-mobile-cta-btn{
background:linear-gradient(135deg,#60a5fa,#3b82f6);
color:#fff !important;
padding:8px 14px;
border-radius:20px;
font-size:12px;
font-weight:700;
text-decoration:none;
}

/* ===== MOBILE ===== */
@media(max-width:900px){

.pf-layout{
grid-template-columns:1fr;
}

.pf-sidebar{
position:fixed;
left:-280px;
top:0;
width:260px;
height:100%;
background:#fff;
padding:20px;
transition:0.3s;
z-index:9999;
overflow:auto;
}

.pf-sidebar.open{
left:0;
}

#mobile-toc-btn{
display:block;
}

.pf-mobile-cta{
display:flex;
}

body{
padding-bottom:70px;
}

}