/* ---------- Policymakers page specific ---------- */
  /* Only what differs from .page-hero p in site.css. */
  .page-hero p.lede{
    margin-top:22px;
    max-width:66ch;
  }
  .page-hero p.lede + p.lede{ margin-top:14px; }

  /* The four groups the lede names, as a list rather than the italic line
     they used to be. .gen-stat-grid draws the hairline dividers and the
     1 -> 2 -> 4 column steps; the list reset, the enclosing border and the
     cell type are all this page adds. */
  .audience-grid{
    margin:32px 0 0;
    padding:0;
    list-style:none;
    border:1px solid var(--gen-navy-line);
  }
  .audience-grid li{
    padding:20px 22px;
    background:var(--gen-frost-2);
    font-size:15px;
    font-weight:700;
  }

  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
  }

  /* What the other two audience pages render as .info-table. Each row here
     carries a heading of its own, so this is a list of named programs rather
     than a table of categories, and a table's header row has nothing left to
     label. The cells paint frost while the band behind them differs, which is
     what makes these read as flush rows in the programs section and as
     separated cards on the services band. */
  .info-list{
    display:grid;
    gap:1px;
    margin-top:24px;
    background:var(--gen-navy-line);
    border:1px solid var(--gen-navy-line);
  }
  .info-item{
    display:grid;
    gap:8px;
    padding:24px 22px;
    background:var(--gen-frost);
  }
  .info-cat{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:var(--gen-teal-text);
  }
  .info-item h3{
    margin:0 0 8px;
    font-size:1.15rem;
  }
  .info-item p{
    margin:0;
    max-width:66ch;
    font-size:14.5px;
    line-height:1.65;
    color:var(--gen-text-dim);
  }
  @media (min-width:700px){
    .info-item{
      grid-template-columns:170px 1fr;
      gap:26px;
      padding:28px 30px;
    }
  }