/* ============================================================
   SINGLE BLOG / ARTICLE — blog-article.css
   Matches finadvantage_blog-page_article_final.html exactly
   ============================================================ */

:root{
  --mb:#0A0A56; --mb2:#15156D; --mb3:#312CA1; --mb-soft:#EEF0F7;
  --vi:#6617FF; --vi2:#9B54FF; --vi-soft:#F4EEFF;
  --mg:#FFBB4E; --mg2:#FFC776; --mg-soft:#FFF6E5;
  --ink:#0B0B1E; --ink2:#2A2A3C; --muted:#6B6B7B;
  --line:#E5E5EC; --line-2:#EFEFF4;
  --bg:#FFFFFF; --bg-soft:#F7F7FA; --bg-tint:#FAFAFC; --wh:#FFFFFF;
}

/* ── Reading progress bar ── */
.read-prog{
  position:fixed;top:0;left:0;height:3px;
  background:var(--mg);z-index:60;width:0;
  transition:width 0.05s linear;
}

/* ── ARTICLE HERO ── */
.art-hero{
  background:linear-gradient(135deg,#06062e 0%,#0a0a56 55%,#0e0e6a 100%);
  /*padding:120px 32px 56px;  /*120px top = ~90px fixed nav + 30px breathing room */
  border-bottom:1px solid var(--line-2);
  position:relative;overflow:hidden;
}

.art-hero-inner{margin:0 auto;position:relative;z-index:2; padding:52px 0px 0px 0px;}

/* Breadcrumb */
.breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:13px;color:var(--muted);
  margin-bottom:28px;letter-spacing:0.04em;flex-wrap:wrap;
}
.breadcrumb a{color:var(--muted);transition:color 0.15s}
.breadcrumb a:hover{color:var(--wh)}
.breadcrumb .sep{color:var(--line)}
.breadcrumb .cur{color:rgba(255,255,255,0.7);font-weight:500}

/* Pills */
.art-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.art-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;letter-spacing:0.12em;
  text-transform:uppercase;padding:6px 14px;border-radius:30px;
}
.art-pill.type-article{background:var(--vi-soft);color:var(--vi)}
.art-pill.type-article .pdot{width:5px;height:5px;background:var(--vi);border-radius:50%}
.art-pill.service{background:var(--mg-soft);color:var(--mb)}
.art-pill.service .pdot{width:5px;height:5px;background:var(--mg);border-radius:50%}

/* Heading */
.art-hero h1{
  font-family:'Archivo',sans-serif;
  font-size:46px;font-weight:700;color:var(--gold);
  line-height:1.1;letter-spacing:-0.02em;margin-bottom:24px;
}

/* Deck */
.art-deck{
  font-size:18px;color:rgba(255,255,255,0.7);
  line-height:1.65;max-width:760px;
  margin-bottom:36px;font-weight:300;
}

/* Meta bar */
.art-meta-bar{
  display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;
  gap:20px;padding:24px 50px 24px 50px;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);

}
.art-meta-left{
  display:flex;align-items:center;gap:14px;
  font-size:15px;color:var(--ink2);
}
.art-meta-left .src{font-weight:600;color:var(--mb);font-family:'Archivo',sans-serif}
.art-meta-left .dot{width:3px;height:3px;background:var(--muted);border-radius:50%}
.art-meta-right{
  display:flex;align-items:center;gap:18px;
  font-size:14px;color:var(--muted);
  text-transform:uppercase;letter-spacing:0.08em;font-weight:500;
}
.art-meta-right .dot{width:3px;height:3px;background:var(--muted);border-radius:50%}
.art-share{display:flex;gap:8px}
.art-share button{
  width:34px;height:34px;border-radius:50%;
  background:var(--wh);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.2s;
}
.art-share button:hover{border-color:var(--mb);background:var(--mb-soft)}
.art-share button svg{width:14px;height:14px;stroke:var(--ink2)}
.art-share button:hover svg{stroke:var(--mb)}

/* ── ARTICLE LAYOUT ── */
.art-layout{
  /* max-width:1240px; */
  margin:0 auto;
  padding:56px 50px 65px;
  display:grid;grid-template-columns:240px 1fr;
  gap:64px;align-items:start;
}

/* TOC */
.toc{position:sticky;top:96px}
.toc-label{
  font-size:14px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
  margin-bottom:14px;padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.toc-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc-list a{
  display:block;font-size:16px;color:var(--muted);
  padding:8px 0 8px 14px; text-decoration: none;
  border-left:2px solid var(--line);
  transition:all 0.2s;line-height:1.5;
}
.toc-list a:hover{color:var(--mb);border-left-color:var(--mb3)}
.toc-list a.active{color:var(--mb);border-left-color:var(--mg);font-weight:500; font-size:17px;}

/* ── ARTICLE BODY ── */
.art-body{
  /* max-width:720px; */
  font-family:'Roboto Serif','Roboto',Georgia,serif;
  font-size:19px;line-height:1.78;color:var(--ink2);
}
.art-body > p{margin-bottom:24px}

/* Drop cap on first paragraph */
/* .art-body > p:first-of-type::first-letter{
  font-family:'Archivo',sans-serif;
  font-size:64px;font-weight:700;color:var(--mb);
  float:left;line-height:0.9;
  padding:6px 14px 0 0;margin-top:4px;
} */

/* Headings */
.art-body h2{
  font-family:'Archivo',sans-serif;
  font-size:28px;font-weight:700;color:var(--mb);
  letter-spacing:-0.015em;
  margin:48px 0 18px;line-height:1.2;
  scroll-margin-top:96px;
}
.art-body h2::before{
  content:'';display:block;
  width:32px;height:3px;
  background:var(--mg);margin-bottom:14px;border-radius:2px;
}
.art-body h3{
  font-family:'Archivo',sans-serif;
  font-size:20px;font-weight:700;color:var(--mb);
  margin:32px 0 12px;line-height:1.3;
}

/* Lists */
.art-body ul,.art-body ol{margin:0 0 24px;padding-left:24px}
.art-body li{margin-bottom:10px;line-height:1.75}
.art-body strong{color:var(--ink);font-weight:600}
.art-body a:not(.art-tag-chip){
  color:var(--vi);
  border-bottom:1px solid var(--vi-soft);
  transition:all 0.15s;
}
.art-body a:not(.art-tag-chip):hover{border-bottom-color:var(--vi)}

/* ── SPECIAL CONTENT BLOCKS ── */
/* Admins use Gutenberg blocks — these styles auto-apply */

/* Pull quote — use Quote block */
.art-body blockquote,.pullquote{
  margin:40px -20px;padding:32px 36px;
  background:var(--bg-soft);
  border-left:4px solid var(--mg);
  border-radius:0 10px 10px 0;
  font-family:'Archivo',sans-serif;
  font-size:20px;font-weight:500;color:var(--mb);
  line-height:1.4;letter-spacing:-0.01em;
  position:relative;
}
.art-body blockquote::before,.pullquote::before{
  content:'"';position:absolute;top:8px;left:18px;
  font-family:'Archivo',sans-serif;font-size:56px;
  color:var(--mg);opacity:0.5;line-height:1;
}
.art-body blockquote cite,.pullquote-attr{
  display:block;margin-top:14px;
  font-family:'Roboto',sans-serif;font-size:15px;
  font-weight:400;color:var(--muted);
  letter-spacing:0.05em;text-transform:uppercase;
  font-style:normal;
}

/* FYI callout — use Pullquote block with class */
.art-body .wp-block-pullquote.is-style-fyi,
.fyi{
  margin:32px 0;background:var(--mg-soft);
  border-radius:12px;padding:22px 26px;
  border-left:4px solid var(--mg);
  font-size:16px;line-height:1.7;color:var(--ink2);
}
.fyi-lbl{
  font-family:'Archivo',sans-serif;
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--mb);font-weight:700;margin-bottom:8px;display:block;
}

/* Key takeaway — use Group block with class "takeaway" */
.art-body .takeaway,
.takeaway{
  margin:36px 0;background:var(--mb);color:var(--wh);
  border-radius:14px;padding:32px;
  position:relative;overflow:hidden;
}
.takeaway::after{
  content:'';position:absolute;right:-40px;top:-40px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,187,78,0.18) 0%,transparent 65%);
}
.takeaway-lbl{
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--mg);font-weight:600;margin-bottom:14px;
  position:relative;z-index:2;
}
.takeaway h4{
  font-family:'Archivo',sans-serif;font-size:20px;font-weight:700;
  color:var(--wh);margin-bottom:12px;line-height:1.3;
  position:relative;z-index:2;
}
.takeaway p{
  color:rgba(255,255,255,0.78);font-size:16px;
  line-height:1.7;font-family:'Roboto',sans-serif;
  position:relative;z-index:2;
}

/* ── ARTICLE END — Tags ── */
.art-end{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.art-tags-label{
  font-size:12px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:14px;
}
.art-tags{display:flex;flex-wrap:wrap;gap:8px}
.art-tag-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:500;color:var(--mb);
  background:var(--bg-soft);border:1px solid var(--line);
  padding:2px 20px;border-radius:30px;
  cursor:pointer;transition:all 0.2s;text-decoration:none;
}
.art-tag-chip:hover{
  background:var(--mb);color:var(--wh);
  border-color:var(--mb);transform:translateY(-1px);
}
.tc-dot{width:5px;height:5px;border-radius:50%;background:var(--mg);transition:all 0.2s}
.art-tag-chip:hover .tc-dot{background:var(--wh)}
.tc-arrow{width:11px;height:11px;opacity:0.55;transition:all 0.2s}
.art-tag-chip:hover .tc-arrow{opacity:1;transform:translateX(2px)}

/* ── RELATED ── */
.related{
  background:var(--bg-soft);padding:64px 32px;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.related-inner{max-width:1320px;margin:0 auto}
.sec-head{
  margin-bottom:28px;display:flex;
  justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.sec-h{
  font-family:'Archivo',sans-serif;font-size:15px;font-weight:600;
  color:var(--mb);text-transform:uppercase;letter-spacing:0.15em;
}
.sec-see{
  font-size:14px;color:var(--vi);font-weight:600;
  display:flex;align-items:center;gap:5px;text-decoration:none;
}
.sec-see svg{width:12px;height:12px;stroke:var(--vi)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rel-card{
  background:var(--wh);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;cursor:pointer;
  transition:all 0.25s;display:flex;flex-direction:column;
}
.rel-card:hover{
  border-color:var(--mb3);transform:translateY(-3px);
  box-shadow:0 18px 40px -12px rgba(10,10,86,0.12);
}
.rel-img{
  aspect-ratio:25/10;position:relative;overflow:hidden;
}
.rel-img.r1{background:linear-gradient(135deg,#0A0A56 0%,#312CA1 100%)}
.rel-img.r2{background:linear-gradient(135deg,#15156D 0%,#6617FF 100%)}
.rel-img.r3{background:linear-gradient(135deg,#312CA1 0%,#9B54FF 100%)}
.rel-img::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:30px 30px;
}
.rel-img-glyph{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;opacity:0.85;z-index:2;
}
.rel-cat{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(6px);color:var(--wh);
  font-size:11px;font-weight:600;letter-spacing:0.14em;
  text-transform:uppercase;padding:5px 10px;
  border-radius:30px;border:1px solid rgba(255,255,255,0.22);z-index:3;
}
.rel-body{padding:22px;flex:1;display:flex;flex-direction:column}
.rel-meta{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--muted);margin-bottom:10px;
  text-transform:uppercase;letter-spacing:0.1em;font-weight:500;flex-wrap:wrap;
}
.rel-meta .dot{width:3px;height:3px;background:var(--muted);border-radius:50%}
.type-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:30px;
  font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
}
.type-badge.article{background:var(--vi-soft);color:var(--vi)}
.type-badge .tb-dot{width:4px;height:4px;border-radius:50%}
.type-badge.article .tb-dot{background:var(--vi)}
.rel-card h3{
  font-family:'Archivo',sans-serif;font-size:18px;font-weight:700;
  color:var(--mb);line-height:1.3;margin-bottom:8px;flex:1;
}
.rel-card p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.rel-link{font-size:13px;color:var(--vi);font-weight:600}

/* ── SUBSCRIBE ── */
.subscribe{
  background:var(--mb2);padding:80px 32px;
  position:relative;overflow:hidden;
}
.subscribe::before{
  content:'';position:absolute;top:-100px;right:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(102,23,255,0.25) 0%,transparent 60%);
}
.subscribe::after{
  content:'';position:absolute;bottom:-150px;left:-50px;
  width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,187,78,0.12) 0%,transparent 60%);
}
/* .subscribe-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:60px 60px;pointer-events:none;
} */
.subscribe-inner{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:center;position:relative;z-index:2;
}
.eyebrow{
  font-size:13px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--mg);font-weight:600;margin-bottom:18px;
  display:flex;align-items:center;gap:10px;
}
.ey-bar{width:28px;height:2px;background:var(--mg)}
.sub-left h2{
  font-family:'Archivo',sans-serif;font-size:44px;font-weight:700;
  color:var(--wh);line-height:1.1;letter-spacing:-0.02em;margin-bottom:20px;
}
.sub-left h2 em{font-style:normal;color:var(--mg)}
.sub-left p{font-size:16px;color:rgba(255,255,255,0.72);line-height:1.5;max-width:500px}
.sub-form{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;padding:36px;
}
.sub-form-label{
  font-size:13px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--mg);font-weight:600;margin-bottom:14px;
}
.sub-form-row{display:flex;gap:10px;margin-bottom:16px}
.sub-form input{
  flex:1;font-family:'Roboto',sans-serif;font-size:16px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:30px;padding:15px 22px;color:var(--wh);
  outline:none;transition:all 0.2s;
}
.sub-form input::placeholder{color:rgba(255,255,255,0.45)}
.sub-form input:focus{border-color:var(--mg);background:rgba(255,255,255,0.12)}
.sub-form button{
  background:var(--mg);color:var(--mb);
  font-family:'Roboto',sans-serif;font-size:15px;font-weight:600;
  padding:15px 30px;border:none;border-radius:30px;
  cursor:pointer;white-space:nowrap;transition:all 0.2s;
}
.sub-form button:hover{background:var(--mg2)}
.sub-form-note{
  font-size:13px;color:rgba(255,255,255,0.5);
  line-height:1.6;display:flex;align-items:flex-start;gap:8px;
}
.sub-form-note svg{
  width:13px;height:13px;stroke:rgba(255,255,255,0.5);
  flex-shrink:0;margin-top:1px;
}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .art-layout{grid-template-columns:1fr;gap:0}
  .toc{display:none}
  .art-hero h1{font-size:36px}
  .art-deck{font-size:16px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .subscribe-inner{grid-template-columns:1fr;gap:40px}
  .art-meta-bar{padding:20px 24px}
  .art-layout{padding:48px 24px 60px}
}
@media(max-width:680px){
  .art-hero{padding:36px 20px 32px}
  .art-hero h1{font-size:26px}
  .art-deck{font-size:15px}
  .art-meta-bar{flex-direction:column;align-items:flex-start;gap:16px;padding:16px 20px}
  .art-layout{padding:32px 16px 48px}
  .art-body{font-size:17px}
  .art-body h2{font-size:22px}
  .art-body h3{font-size:18px}
  .art-body blockquote,.pullquote{margin:24px 0;padding:20px 18px;font-size:16px}
  .related,.subscribe{padding-left:16px;padding-right:16px}
  .related-grid{grid-template-columns:1fr}
  .sub-left h2{font-size:clamp(1.4rem,5vw,1.8rem)}
  .sub-form{padding:20px}
  .sub-form-row{flex-direction:column}
}