:root { --header-height: 80px; }
.inner-content { background: #ffffff; color: #1f2937; }
.inner-content .text-foreground { color: #1f2937 !important; }
.inner-content .text-muted-foreground { color: #6b7280 !important; }
.inner-content .bg-background { background: #ffffff !important; }
.inner-content .bg-section { background: #ffffff !important; }
.inner-content .bg-section::before { content: none !important; display: none !important; }
.inner-content .border-border { border-color: #e5e7eb !important; }

.content-section h1 { font-size: 36px; line-height: 44px; font-weight: 800; margin: 0 0 12px 0; color: #16a249 !important; }
.content-section h2 { font-size: 28px; line-height: 36px; font-weight: 700; margin: 0 0 10px 0; color: #16a249 !important; scroll-margin-top: calc(var(--header-height, 80px) + 16px); }
.content-section h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin: 0 0 8px 0; color: #16a249 !important; }
.content-section, .content-section p, .content-card p { color: #374151; }
.content-section a { color: #16a249; text-decoration: none; }
.content-section a:hover { text-decoration: underline; }

.toc-nav { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem; }
.toc-link { display: block; padding: 0.375rem 0.25rem; color: #6b7280; border-left: 2px solid transparent; text-decoration: none; }
.toc-link:hover { color: #16a249; }
.toc-link.active { color: #16a249; border-left-color: #16a249; background: #f8fafc; }

.highlight-box { background: #f8fafc; border-left: 3px solid #16a249; padding: 1.5rem; margin: 1.5rem 0; border-radius: 8px; }
.content-section { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }


/* Feature grid/cards */
.feature-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1.5rem; text-align: center; transition: all 0.3s ease; }
.feature-card:hover { border-color: #e5e7eb; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); }
.feature-icon { width: 3rem; height: 3rem; margin: 0 auto 1rem; background: #16a249; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; }

/* Section divider */
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, #e5e7eb, transparent); margin: 3rem 0; margin: 0; }

/* Charts container */
.chart-container { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; }

/* Step list */
.step-list { counter-reset: step-counter; }
.step-item { counter-increment: step-counter; position: relative; padding-left: 1.75rem; margin-bottom: 1rem; }
.step-item::before { content: counter(step-counter) "."; position: absolute; left: 0; top: 0; color: #16a249; font-weight: 700; }

/* KPI weights */
/* .kpi-weight { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; margin: 0.5rem 0; }
.kpi-weight strong { color: #1e40af; } */
.kpi-weight { font-size: 1.25em; }

/* Cascade visuals */
.cascade-flow { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 2rem 0; flex-wrap: wrap; }
.cascade-item { background: #ffffff; border: 2px solid #e5e7eb; border-radius: 8px; padding: 1rem; text-align: center; min-width: 120px; transition: all 0.3s ease; }
.cascade-item:hover { border-color: #e5e7eb; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06); }
.cascade-arrow { color: #16a249; font-size: 1.5rem; }
@media (max-width: 768px) { .cascade-flow { flex-direction: column; } .cascade-arrow { transform: rotate(90deg); } }