/* Article layout — GEO-optimised newsroom look for DCON Insights */

.article-hero {
  padding: 130px 0 40px;
  position: relative; overflow: hidden;
}
.article-hero .hero-bg { position:absolute; inset:0; z-index:0; }
.article-wrap { width: min(760px, 92vw); margin: 0 auto; position: relative; z-index: 2; }
.article-wide { width: min(940px, 94vw); margin: 0 auto; position: relative; z-index: 2; }

.crumbs { font-size:.82rem; color: var(--muted-2); margin-bottom: 22px; }
.crumbs a { color: var(--violet); }
.art-cat {
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#000; background: var(--lime); padding:5px 12px; border-radius:6px; margin-bottom:20px;
}
.article-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 20px; }
.art-meta { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.85rem; color: var(--muted-2); align-items:center; }
.art-meta .author { display:flex; align-items:center; gap:10px; }
.art-meta .av { width:34px; height:34px; border-radius:50%; background: var(--grad); }
.art-cover { aspect-ratio: 21/9; border-radius: var(--radius); margin: 34px 0 10px; border:1px solid var(--line); }

.article-body { padding: 30px 0 60px; }
.article-body p { font-size: 1.08rem; line-height: 1.75; color: #d7d7de; margin: 0 0 1.3rem; }
.article-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2.4rem 0 1rem; }
.article-body h3 { font-size: 1.25rem; margin: 1.8rem 0 .7rem; color: #fff; }
.article-body ul, .article-body ol { margin: 0 0 1.4rem; padding-left: 0; list-style: none; }
.article-body ul li, .article-body ol li {
  position: relative; padding: 8px 0 8px 32px; color: #d0d0d8; line-height:1.65; border-bottom: 1px solid var(--line);
}
.article-body ul li::before { content:"→"; position:absolute; left:0; color: var(--orange); font-weight:800; }
.article-body ol { counter-reset: li; }
.article-body ol li { counter-increment: li; }
.article-body ol li::before { content: counter(li); position:absolute; left:0; top:8px; color:#000; background:var(--violet); width:20px; height:20px; border-radius:50%; font-size:.72rem; font-weight:800; display:grid; place-items:center; }
.article-body strong { color: #fff; }
.lede { font-size: 1.22rem !important; color: #fff !important; line-height:1.65 !important; }

.callout {
  background: var(--grad-soft); border:1px solid var(--line-strong); border-radius: var(--radius);
  padding: 24px 28px; margin: 2rem 0;
}
.callout .k { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color: var(--violet); margin-bottom:10px; }
.callout p { margin:0; color:#fff !important; font-size:1.05rem !important; }

.takeaways { background: var(--panel); border:1px solid var(--line); border-radius: var(--radius); padding: 26px 30px; margin: 2rem 0; }
.takeaways h3 { margin:0 0 14px; }
.takeaways ul li::before { content:"✓"; color: var(--lime); }

.data-table { width:100%; border-collapse: collapse; margin: 1.5rem 0; font-size:.95rem; }
.data-table th, .data-table td { text-align:left; padding: 12px 14px; border-bottom:1px solid var(--line); }
.data-table th { color: var(--violet); font-weight:700; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.data-table td { color:#d0d0d8; }
.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.data-table .rank { color: var(--orange); font-weight:800; }

/* FAQ */
.faq { border-top:1px solid var(--line); margin-top: 40px; padding-top: 30px; }
.faq h2 { margin-bottom: 10px; }
.faq details {
  border-bottom:1px solid var(--line); padding: 6px 0;
}
.faq summary {
  cursor:pointer; list-style:none; padding: 18px 40px 18px 0; position:relative;
  font-weight:700; font-size:1.1rem; color:#fff;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; position:absolute; right:4px; top:16px; font-size:1.5rem; font-weight:400; color:var(--orange); transition:transform .3s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; margin:0; color:#c8c8d0; font-size:1.02rem; line-height:1.7; }

.author-box { display:flex; gap:16px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin: 40px 0; }
.author-box .av { width:52px; height:52px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.author-box b { display:block; }
.author-box span { font-size:.88rem; color:var(--muted); }

.art-cta {
  text-align:center; background: linear-gradient(140deg, rgba(150,156,203,0.12), rgba(232,119,48,0.10));
  border:1px solid var(--line-strong); border-radius: 22px; padding: 44px 30px; margin: 20px 0 0;
}
.art-cta h3 { font-size: clamp(1.4rem,3vw,2rem); margin-bottom:10px; }
.art-cta p { color:var(--muted); max-width:52ch; margin:0 auto 22px; }

.back-strip { border-top:1px solid var(--line); padding: 26px 0; text-align:center; }
.back-strip a { color:var(--orange); font-weight:700; }
.demo-note {
  text-align:center; font-size:.78rem; color:var(--muted-2); background:var(--panel);
  border-bottom:1px solid var(--line); padding:8px 16px;
}