/* ============================================================
   Cloudeli — /insights article typography & components
   Loads after cloudeli-brand / cyber. Reuses brand tokens
   (--brand, --ink, --body, --muted, --soft, --line, --shadow-sm).
   ============================================================ */

/* ---------- Base article typography ---------- */
.insight-article{font-size:15.5px;color:var(--body);}
.insight-article h2{
	font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
	margin:44px 0 16px;scroll-margin-top:100px;
}
.insight-article > h2:first-child{margin-top:0;}
.insight-article h3{
	font-size:18px;font-weight:700;color:var(--ink);margin:28px 0 12px;
}
.insight-article p{margin:0 0 18px;line-height:1.85;}
.insight-article p:last-child{margin-bottom:0;}
.insight-article a{color:var(--brand);font-weight:600;text-decoration:underline;text-decoration-color:rgba(26,118,209,.3);text-underline-offset:2px;}
.insight-article a:hover{text-decoration-color:var(--brand);}
.insight-article strong,.insight-article b{color:var(--ink);}

/* ---------- Bulleted / numbered lists — real markers, real spacing ---------- */
.insight-article ul.ilist{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px;}
.insight-article ul.ilist li{
	position:relative;padding-left:30px;line-height:1.7;color:var(--body);
}
.insight-article ul.ilist li::before{
	content:"\eed7";font-family:"IcoFont";font-weight:400;
	position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;
	background:var(--soft);color:var(--brand);font-size:11px;line-height:20px;text-align:center;
}
.insight-article ol.ilist-num{list-style:none;counter-reset:ilist;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:14px;}
.insight-article ol.ilist-num li{
	position:relative;padding-left:36px;line-height:1.7;color:var(--body);counter-increment:ilist;
}
.insight-article ol.ilist-num li::before{
	content:counter(ilist);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
	background:var(--grad);color:#fff;font-size:12px;font-weight:800;line-height:24px;text-align:center;
}
.insight-article ul.ilist li b,.insight-article ol.ilist-num li b{color:var(--ink);}

/* ---------- TL;DR / quick-answer callout ---------- */
.insight-tldr{
	display:flex;gap:14px;align-items:flex-start;background:var(--soft);border:1px solid var(--line);
	border-radius:16px;padding:20px 22px;margin:0 0 36px;
}
.insight-tldr i{font-size:20px;color:var(--brand);margin-top:2px;flex:none;}
.insight-tldr div{font-size:14.5px;line-height:1.75;color:var(--ink);}
.insight-tldr b{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:6px;}

/* ---------- Key-point callout (mid-article highlight) ---------- */
.insight-callout{
	background:linear-gradient(135deg,rgba(40,137,228,.07),rgba(26,118,209,.07));
	border-left:4px solid var(--brand);border-radius:0 14px 14px 0;
	padding:18px 22px;margin:8px 0 28px;font-size:14.5px;line-height:1.75;color:var(--ink);
}
.insight-callout b{color:var(--brand-dark);}

/* ---------- Comparison / checklist tables (article-scoped) ---------- */
.insight-article .table-scroll{margin:8px 0 32px;border-radius:16px;box-shadow:var(--shadow-sm);}
.insight-article .funding-table{font-size:13.8px;}
.insight-article .funding-table td:first-child{font-weight:700;}
.insight-article .funding-table td{color:var(--body);}
.insight-caption{font-size:12px;color:var(--muted);margin:-24px 0 32px;text-align:right;font-style:italic;}

/* ---------- Simple stat / lever row (no chart lib — CSS only) ---------- */
.insight-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 32px;}
.insight-stats .stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:center;box-shadow:var(--shadow-sm);}
.insight-stats .stat .n{font-size:22px;font-weight:800;color:var(--brand);letter-spacing:-.02em;line-height:1.1;}
.insight-stats .stat .l{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.5;}
@media (max-width:767px){.insight-stats{grid-template-columns:1fr;}}

/* ---------- Effort/impact meter bars (qualitative, not fabricated numbers) ---------- */
.insight-meter{display:flex;align-items:center;gap:3px;}
.insight-meter span{display:block;width:16px;height:8px;border-radius:2px;background:var(--line);}
.insight-meter span.on{background:var(--brand);}
.meter-wrap{display:flex;align-items:center;justify-content:center;gap:8px;}
.meter-wrap .meter-label{font-size:11px;color:var(--muted);}

/* ---------- Simple inline SVG diagrams ---------- */
.insight-diagram{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 24px;margin:8px 0 32px;box-shadow:var(--shadow-sm);}
.insight-diagram svg{display:block;width:100%;height:auto;}
.insight-diagram .diagram-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;text-align:center;}

/* ---------- Article sidebar ----------
   .values .value sets height:100% so a *row* of cards lines up evenly —
   here two cards are stacked in one narrow column instead, so each one
   independently stretching to the full (tall) row height doubles up and
   overflows into the section below. Pin the column to the top of the row
   and let each card size to its own content instead. */
.insight-sidebar{align-self:flex-start;}
.insight-sidebar .value{height:auto;}

@media (max-width:575px){
	.insight-article h2{font-size:21px;margin:36px 0 14px;}
	.insight-tldr{flex-direction:column;gap:8px;}
}