/* ---- Scope everything to this page section ---- */
  #savanna-series {
    /* Color tokens (adapt if you want). Pull Bootstrap primary if present. */
    --md-primary: var(--bs-primary, #006c47);
    --md-on-primary: #ffffff;
    --md-surface: #ffffff;
    --md-on-surface: #1a1c1e;
    --md-surface-variant: #f1f3f4;
    --md-on-surface-variant: #44474a;
    --md-outline: #c7c9cc;

    --md-radius: 14px;
    --md-radius-sm: 12px;
    --md-elev-1: 0 1px 2px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    --md-elev-2: 0 2px 6px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.10);
    --md-elev-3: 0 6px 12px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.12);
  }

  /* Typography tweaks */
  #savanna-series h1 {
    font-weight: 800;
    letter-spacing: .2px;
    margin-bottom: .25rem;
  }
  #savanna-series h2, #savanna-series h3, #savanna-series h4, #savanna-series h5 {
    letter-spacing: .2px;
  }
  #savanna-series .lead, #savanna-series .text-muted { color: var(--md-on-surface-variant) !important; }

  /* Cards -> Material surfaces with elevation */
  #savanna-series .card {
    border: 0;
    border-radius: var(--md-radius);
    box-shadow: var(--md-elev-1);
    transition: box-shadow .2s ease, transform .08s ease;
    background: var(--md-surface);
  }
  #savanna-series .card:hover { box-shadow: var(--md-elev-2); }
  #savanna-series .card:active { transform: translateY(1px); }

  /* Simple surface blocks (.p-3.border…) -> use surface-variant style */
  #savanna-series .p-3.border.rounded-3 {
    border: 1px solid var(--md-outline) !important;
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    border-radius: var(--md-radius-sm) !important;
  }

  /* Buttons -> Material filled / tonal (outline) */
  #savanna-series .btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .2px;
    position: relative;
    overflow: hidden; /* for ripple */
    transition: transform .05s ease, box-shadow .2s ease, background-color .2s ease;
  }
  #savanna-series .btn:active { transform: translateY(1px); }

  #savanna-series .btn-primary {
    background: var(--md-primary);
    border-color: var(--md-primary);
    color: var(--md-on-primary);
    box-shadow: var(--md-elev-1);
  }
  #savanna-series .btn-primary:hover { box-shadow: var(--md-elev-2); }

  /* Outline becomes "tonal" */
  #savanna-series .btn-outline-primary {
    background: color-mix(in srgb, var(--md-primary) 12%, white);
    border-color: transparent;
    color: var(--md-on-surface);
  }
  #savanna-series .btn-outline-secondary {
    background: var(--md-surface-variant);
    border-color: transparent;
    color: var(--md-on-surface);
  }

  /* Links that act like buttons */
  #savanna-series a.link-primary {
    color: var(--md-primary) !important;
    font-weight: 600;
    text-decoration: none;
    position: relative; overflow: hidden; /* ripple */
  }
  #savanna-series a.link-primary:hover { text-decoration: underline; }

  /* Data table -> Material-ish */
  #savanna-series .table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border-radius: var(--md-radius-sm);
    box-shadow: var(--md-elev-1);
  }
  #savanna-series .table thead th {
    background: var(--md-surface-variant);
    color: var(--md-on-surface);
    border-bottom: 1px solid var(--md-outline);
    font-weight: 700;
  }
  #savanna-series .table tbody tr {
    border-bottom: 1px solid #eee;
  }
  #savanna-series .table tbody tr:hover {
    background: #fafafa;
  }

  /* Lists with subtle dividers */
  #savanna-series ul.list-unstyled > li {
    padding: .4rem 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  #savanna-series ul.list-unstyled > li:last-child { border-bottom: 0; }

  /* Focus styles (keyboard) */
  #savanna-series .btn:focus-visible,
  #savanna-series a:focus-visible,
  #savanna-series .card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--md-primary) 40%, transparent);
    outline-offset: 2px;
  }

  /* Optional: Material Icons */
  #savanna-series .mi {
    font-family: "Material Icons Round";
    font-weight: normal;
    font-style: normal;
    font-size: 1.125rem;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }

  /* Page header spacing */
  #savanna-series header.text-center { margin-bottom: 1.25rem; }


<