/* =========================================================================
   Insights page (injected content) — manifesto, disruption, big stats,
   projection, FAQ accordion. Ported + normalized to tokens.
   ========================================================================= */

.insights-manifesto { padding: var(--section-padding) 0 var(--s-48); background: var(--navy); }
.manifesto-block { max-width: var(--content-narrow); margin: 0 auto; }
.manifesto-block p { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.45; color: var(--text); margin-bottom: var(--s-32); letter-spacing: -0.01em; }
.manifesto-block p em { font-style: italic; color: var(--gold); }
.manifesto-block p strong { font-weight: 500; color: var(--text); }

.disrupt-section { padding: var(--section-padding) 0; background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.disrupt-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.disrupt-col { padding: var(--s-48); }
.disrupt-col.old { background: var(--navy); }
.disrupt-col.new { background: rgba(200, 169, 107, 0.04); border-left: 1px solid var(--line-gold); }
.disrupt-col h4 { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--s-16); color: var(--text-muted); }
.disrupt-col.new h4 { color: var(--gold); }
.disrupt-col h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: -0.02em; margin-bottom: var(--s-32); color: var(--text); line-height: 1.15; }
.disrupt-col h3 em { font-style: italic; color: var(--gold); }
.disrupt-col ul li { font-size: var(--fs-small); line-height: 1.65; color: var(--text-secondary); padding: 14px 0 14px 24px; border-bottom: 1px solid var(--line); position: relative; }
.disrupt-col ul li:last-child { border-bottom: none; }
.disrupt-col ul li::before { content: ''; position: absolute; left: 0; top: 22px; width: 14px; height: 1px; background: var(--text-muted); }
.disrupt-col.new ul li::before { background: var(--gold); }
.disrupt-col ul li strong { color: var(--text); font-weight: 500; }

.big-stats-section { padding: var(--section-padding) 0; }
.big-stats-head { text-align: center; max-width: 780px; margin: 0 auto var(--s-80); }
.big-stats-head .eyebrow { justify-content: center; }
.big-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.big-stat { padding: var(--s-48) var(--s-32); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-12); }
.big-stat .n { font-family: var(--font-display); font-size: 72px; font-weight: 300; letter-spacing: -0.035em; line-height: 1; color: var(--gold); }
.big-stat .n .pct { font-size: 44px; vertical-align: super; line-height: 1; }
.big-stat .n .x { font-size: 56px; }
.big-stat .label { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.55; color: var(--text-secondary); margin-top: var(--s-8); }
.big-stat .label strong { color: var(--text); font-weight: 500; }
.big-stat .source { font-family: var(--font-body); font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-top: auto; padding-top: var(--s-16); }

.projection-section { padding: var(--section-padding) 0; background: var(--navy-2); border-top: 1px solid var(--line); }
.projection-head { text-align: center; max-width: 800px; margin: 0 auto var(--s-64); }
.projection-head .eyebrow { justify-content: center; }
.projection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.projection-card { background: var(--navy); padding: var(--s-32); display: flex; flex-direction: column; }
.projection-card .label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-32); }
.projection-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); margin-bottom: var(--s-16); }
.projection-card h3 em { font-style: italic; color: var(--gold); }
.projection-card p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); }

.faq-section { padding: var(--section-padding) 0; }
.faq-head { text-align: center; max-width: 800px; margin: 0 auto var(--s-64); }
.faq-head .eyebrow { justify-content: center; }
.faq-list { max-width: var(--content-narrow); margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { padding: var(--s-32) 0 var(--s-32) var(--s-32); list-style: none; cursor: pointer; position: relative; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -0.01em; color: var(--text); transition: color 0.25s; }
.faq-item summary:hover { color: var(--gold); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 200; font-size: 32px; color: var(--gold); transition: transform 0.25s; }
.faq-item[open] summary::before { transform: translateY(-50%) rotate(45deg); }
.faq-item summary em { font-style: italic; color: var(--gold); }
.faq-answer { padding: 0 0 var(--s-32) var(--s-32); font-size: var(--fs-small); line-height: 1.75; color: var(--text-secondary); }
.faq-answer p { margin-bottom: var(--s-16); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--text); font-weight: 500; }
.faq-answer em { font-style: italic; color: var(--gold); }

@media (max-width: 960px) {
	.disrupt-grid, .big-stats-grid, .projection-grid { grid-template-columns: 1fr; }
}
