/* aligns with <main> */
  .topwrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:12px;
  }

  /* mobile-first: normal block */
  .volunteers-card{
    width:100%;
  }

  .volunteers-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
  }

  .volunteers-table th,
  .volunteers-table td{
    padding:6px 8px;
    border-bottom:1px solid var(--border);
    text-align:left;
  }

  .volunteers-table th{
    font-size:13px;
    color:var(--muted);
    font-weight:600;
  }

  /* desktop only */
  @media (min-width: 640px){
    section.category.volunteers{
      border:0;
      background:transparent;
      padding:0;
    }

    .volunteers-card{
      width:720px;           /* 🔑 REQUIRED */
      margin:0 auto;         /* 🔑 now it can center */
      padding:10px 12px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:6px;
    }

    .volunteers-table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
    }

    .volunteers-table th,
    .volunteers-table td{
      border:0;
      padding:8px 10px;
    }

    .volunteers-table thead th{
      border-bottom:1px dashed var(--border);
      text-transform:uppercase;
      font-size:12px;
      letter-spacing:.02em;
    }

    .volunteers-table tbody tr + tr td{
      border-top:1px solid #eee;
    }

    .volunteers-table td:first-child{
      font-weight:600;
      white-space:nowrap;
    }

    .help-pill{
      display:inline-block;
      padding:3px 8px;
      border:1px solid #e8e8e8;
      border-radius:999px;
      font-size:12px;
      background:#fafafa;
      margin-right:6px;
    }
  }

  section.category.needhelp { border:0; }