/* ==========================================================================
     Page-local CSS for /careers only. No shared file is edited, every value is
     a token or a plain length, and each rule exists because an existing class
     could not carry the markup this page needs.
     ========================================================================== */

  /* 1. Row headers in the "roles we expect to hire first" table.
        The area name is the header for its row, so it is a th[scope="row"] and
        not a td. The shared .wp-table th rule is written for COLUMN headers:
        11px uppercase mono in the accent colour. Applied to a five-word row
        label it reads as a second header band rather than as the row's name.
        This restores body typography for row headers only, inside this one
        section, and leaves the column headers exactly as the shared rule
        draws them. */
  #first-hires .wp-table th[scope="row"] {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
    white-space: normal;
    min-width: 190px;
  }

  /* 2. The five working rules.
        .grid-2 and .grid-3 are the same shared track definition, auto-fit
        minmax(280px, 1fr), which resolves to four columns at the site's
        maximum width. Five cards therefore leave one card alone on a second
        row. Capping the track at three keeps the set reading as 3 + 2 at every
        width without touching the shared grid used by every other page. */
  #how-we-work .grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    max-width: 980px;
  }

  /* 3. Definition-list borders.
        The shared .reg-list and .reg-list__row rules draw their divider with
        var(--border), which is not defined in design-tokens.css; the token set
        provides --line, --line-strong, --border-soft and --border-med. An
        unresolvable custom property makes the declaration invalid at computed
        value time, so the border colour falls back to currentColor and the
        dividers render at full text strength. The correct fix is one token
        name in the shared stylesheet, which this page does not own, so the
        intended token is supplied locally here and the defect is reported. */
  #standing .reg-list,
  #standing .reg-list__row {
    border-color: var(--line);
  }