/* ============================================================
   ATL BECKS — "THE SIGNAL" blog / article components
   Loads after signal.css on /blog/ pages
   ============================================================ */

/* article shell */
.article-body{padding:clamp(30px,4vw,60px) clamp(20px,4vw,52px) clamp(70px,9vw,110px)}
.article-body .wrap,.article-body-inner{max-width:72ch;margin:0 auto}
.article-body p{color:var(--dim);font-size:16.5px;line-height:1.75;margin-bottom:20px}
.article-body p strong,.article-body li strong{color:var(--txt);font-weight:600}
.article-body em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.article-body h2{
  font-size:clamp(23px,2.8vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15;
  margin:52px 0 18px;max-width:none;
}
.article-body h3{font-size:clamp(18px,2vw,22px);font-weight:600;letter-spacing:-.01em;margin:36px 0 12px}
.article-body a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(65,224,200,.3)}
.article-body a:hover{border-bottom-color:var(--cyan)}
.article-body ul,.article-body ol{margin:6px 0 24px;padding-left:0;list-style:none}
.article-body li{
  color:var(--dim);font-size:15.5px;line-height:1.7;padding:10px 0 10px 32px;position:relative;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.article-body ul li::before{
  content:"▲";position:absolute;left:2px;top:12px;font-size:9px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.article-body ol{counter-reset:n}
.article-body ol li{counter-increment:n;padding-left:46px}
.article-body ol li::before{
  content:"0" counter(n);position:absolute;left:0;top:11px;
  font-family:var(--mono);font-size:11px;color:var(--violet);
  border:1px solid rgba(124,108,255,.35);border-radius:7px;padding:2px 7px;
}

/* callout */
.callout{
  border:1px solid rgba(255,180,84,.25);background:rgba(255,180,84,.05);
  border-radius:14px;padding:22px 24px;margin:30px 0;
}
.callout-label{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber);margin-bottom:10px;
}
.callout p{margin-bottom:0;font-size:15px}

/* stat cards */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:32px 0}
.stat-card{
  background:var(--card);border:1px solid var(--card-line);border-radius:16px;
  padding:22px 18px;text-align:center;display:flex;flex-direction:column;gap:8px;
}
.stat-card-num{
  font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.02em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-card-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);line-height:1.6}

/* speed meter */
.speed-meter{
  background:rgba(8,11,22,.7);border:1px solid var(--card-line);border-radius:16px;
  padding:22px 24px;margin:32px 0;font-family:var(--mono);
}
.speed-meter-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt);margin-bottom:16px}
.speed-bar-row{display:flex;align-items:center;gap:14px;padding:7px 0}
.speed-bar-name{font-size:12px;color:var(--dim);width:110px;flex:none}
.speed-bar-track{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.speed-bar-fill{height:100%;border-radius:4px}
.speed-bar-val{font-size:11px;color:var(--amber);width:52px;text-align:right;flex:none}

/* comparison grid */
.compare-grid{
  border:1px solid var(--card-line);border-radius:16px;overflow:hidden;margin:32px 0;
  font-size:14px;
}
.compare-header{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;background:rgba(255,255,255,.04)}
.compare-header-cell{
  padding:13px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt);border-right:1px solid rgba(255,255,255,.05);
}
.compare-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;border-top:1px solid rgba(255,255,255,.05)}
.compare-cell{padding:13px 14px;color:var(--dim);border-right:1px solid rgba(255,255,255,.05)}
.compare-cell:first-child{color:var(--txt);font-weight:500}
.compare-header-cell:last-child,.compare-cell:last-child{border-right:none}
.tag-good,.tag-warn,.tag-bad{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.tag-good{color:var(--green);background:rgba(40,200,64,.1);border:1px solid rgba(40,200,64,.3)}
.tag-warn{color:var(--amber);background:rgba(255,180,84,.08);border:1px solid rgba(255,180,84,.3)}
.tag-bad{color:#ff5f57;background:rgba(255,95,87,.08);border:1px solid rgba(255,95,87,.3)}
@media(max-width:680px){
  .compare-header{display:none}
  .compare-row{grid-template-columns:1fr;border-top:1px solid var(--card-line)}
  .compare-cell{border-right:none;padding:9px 14px}
  .compare-cell:first-child{background:rgba(255,255,255,.03);font-weight:600}
}

/* FAQ */
.faq-section{margin-top:56px}
.faq-section h2{margin-top:0}
.faq-item{border-top:1px solid var(--card-line);padding:20px 0}
.faq-item:last-child{border-bottom:1px solid var(--card-line)}
.faq-q{color:var(--txt)!important;font-weight:600;font-size:16.5px!important;margin-bottom:8px!important}
.faq-a{margin-bottom:0!important;font-size:15px!important}

/* in-article CTA */
.article-cta{
  border:1px solid var(--card-line);border-radius:22px;margin:56px 0 0;
  background:linear-gradient(140deg,rgba(124,108,255,.1),rgba(65,224,200,.05) 50%,rgba(255,180,84,.08));
  padding:clamp(30px,4vw,48px);text-align:center;
}
.article-cta-label{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px;
}
.article-cta-label-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 2s infinite}
.article-cta h2{margin:0 0 14px;font-size:clamp(22px,2.8vw,32px)}
.article-cta p{max-width:52ch;margin:0 auto 26px;font-size:15px}
.article-cta .btn-primary{
  background:var(--grad);color:#060810;font-size:14.5px;font-weight:600;text-decoration:none;
  padding:15px 28px;border-radius:12px;display:inline-flex;align-items:center;gap:10px;
  transition:all .25s cubic-bezier(.2,.7,.2,1);border-bottom:none;
}
.article-cta .btn-primary:hover{box-shadow:0 10px 34px rgba(124,108,255,.4);transform:translateY(-2px)}
.article-cta .btn-primary svg{width:17px;height:17px}

/* article hero extras */
.post-meta{
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.post-meta .ptag{
  color:var(--cyan);border:1px solid rgba(65,224,200,.3);background:rgba(65,224,200,.06);
  border-radius:999px;padding:5px 14px;
}
.byline{display:flex;align-items:center;gap:14px;margin-top:30px}
.byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(124,108,255,.5)}
.byline div{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dim);line-height:1.7}
.byline b{color:var(--txt);display:block;font-size:12.5px}

/* ── blog index ── */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px}
.fbtn{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);background:var(--card);border:1px solid var(--card-line);border-radius:999px;
  padding:9px 18px;cursor:pointer;transition:all .2s;
}
.fbtn:hover{color:var(--txt);border-color:rgba(255,255,255,.25)}
.fbtn.on{color:#060810;background:var(--grad);border-color:transparent;font-weight:600}
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.post-card{display:flex}
.post-card.hide{display:none}
.post-card .card{width:100%}
.pc-meta{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
}
.pc-meta .ptag{color:var(--cyan)}
.pc-meta .ptag::before{content:"# "}
.post-card h2{font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-bottom:12px}
.post-card .card p{font-size:14px}