Put it in

templates/<your template>/local/css/custom.css

(create the folders if they are missing). T4 looks for a file in local/ first, then in the template, then in the framework's base theme – and it loads custom.css after template.css, so your rules win without !important.

Template updates never ship a local folder, so nothing in there is overwritten.

Two tips:
- Use the theme colors instead of hex values, so a change in the Theme tab still applies:

/* local/css/custom.css */

.course-card .btn { background: var(--color-primary); }

.site-footer a:hover { color: var(--footer-link-hover-color); }

- The Theme tab writes those variables to

media/t4/css/<style id>.css

– don't edit that file, T4 rebuilds it when you save the style.