/* Insights page styles - keep lightweight and leverage base.css */
.page-hero { position: relative; color: #fff; padding: var(--space-16) 0; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: url('/assets/images/insights-hero.webp') center/cover no-repeat; filter: saturate(0.95) contrast(1); }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46,42,37,.55), rgba(46,42,37,.35)); }
.page-hero .container { position: relative; z-index: 1; }
.hero-subtitle { color: #F4F1EC; max-width: 60ch; margin-bottom: var(--space-6); }
.hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: 32px;}

.section { padding: var(--space-14) 0; }
.section-header { margin-bottom: var(--space-6); }
.section-intro { margin-bottom: var(--space-6); color: var(--gray-700); }

/* Chart wrapper spacing */
.chart { width: 100%; }

/* Minimal chat widget styling for consistency (if not globally defined) */
.chat-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 70; border: 1px solid var(--gray-300); background: var(--color-surface); color: var(--color-text); padding: 10px 14px; border-radius: var(--radius-round); box-shadow: var(--shadow-md); font-weight: 700; }
.chat-panel { position: fixed; right: 16px; bottom: 72px; width: min(360px, 92vw); max-height: 70vh; background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: none; flex-direction: column; z-index: 80; }
.chat-panel[aria-hidden="false"] { display: flex; }
.chat-panel__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--gray-200); }
.chat-panel__body { padding: var(--space-6); overflow: auto; }
.chat-close { font-size: 1.25rem; line-height: 1; border-radius: var(--radius-md); padding: 2px 8px; }

/* Minor tweaks for cards with images */
.card img { margin-bottom: var(--space-4); }

/* Responsive hero spacing */
@media (max-width: 700px) {
  .page-hero { padding: var(--space-12) 0; }
}