.viz-wrap{padding:20px}
    .viz-grid{
      display:grid; gap:20px;
      grid-template-columns: 1.2fr .8fr;
    }
    @media (max-width: 992px){ .viz-grid{ grid-template-columns: 1fr; } }

    .viz-card{ padding:20px }
    .viz-title{ font-weight:800; font-size:1.25rem; margin:0 0 8px }
    .viz-sub{ color:var(--muted); margin:0 0 12px }

    /* Metrics bar */
    .viz-metrics{
      display:flex; flex-wrap:wrap; gap:14px;
      padding:12px 16px; border-radius:10px;
      background: rgba(255,255,255,0.04);
      margin-bottom: 16px;
    }
    .viz-metric{
      display:flex; gap:8px; align-items:center;
      font-weight:600;
    }
    .viz-metric .val{ color:#2ecc71 } /* green numbers */
    .viz-metric .sep{ opacity:.25; margin:0 8px }
    @media (max-width:560px){
      .viz-metrics{ gap:10px; padding:10px 12px }
      .viz-metric{ font-size:.95rem }
      .viz-metric .sep{ display:none }
    }

    /* Table */
    .viz-legend table{ width:100%; border-collapse:collapse }
    .viz-legend th, .viz-legend td{ padding:8px 6px; border-bottom:1px solid rgba(255,255,255,.06) }
    .viz-legend th{ text-align:left; color:var(--muted); font-weight:600; font-size:.9rem }
    .viz-legend td{ font-size:.95rem; white-space:nowrap }
    .viz-legend .chip{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:8px; translate:0 -1px }
    .viz-legend .top-row td{ font-weight:700 }
    .muted{ color:var(--muted) }
    .table-scroll{ overflow-x:auto }
    .table-scroll table{ min-width: 560px }

    /* Charts */
    .chart-slot{ width:100%; height:340px; max-width:560px }
    .chart-slot-wide{ width:100%; height:360px }

    /* Explanations */
    .viz-exp{
      margin-top:16px; border-radius:10px; overflow:hidden
    }
    .exp-item{
      display:flex; gap:22px; align-items:center;
      padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.06)
    }
    .exp-item:last-child{ border-bottom:0 }
    .exp-key{ width:92px; flex:0 0 92px; color:#e7eefc; font-weight:700 }
    .exp-text{ color:var(--muted) }
    @media (max-width:560px){ .exp-key{ width:80px; flex-basis:80px } }

    /* Center the subtitle and the Return button, keep title as-is */
    .hero .hero-content .hero-sub { text-align:center; margin-left:auto; margin-right:auto; }
    .hero .hero-content .mt-3 { text-align:center; margin-top: 30px; }

    /* Remove underline on the button link */
    .btn-cta-dark { text-decoration: none !important; }
    .btn-cta-dark:hover, .btn-cta-dark:focus { text-decoration: none !important; }
    /* ======================================== */