body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
  background: #fafafa;
}
/* TODOs:
  1) Turn .nav into a flex container and vertically center its items.
  2) Make .links expand and center its contents using flex and gap.
  3) On screens ≤480px, stack elements vertically with flex-direction: column.
*/
.nav {
  background: #222;
  color: #fff;
  padding: 12px 16px;
  border-radius: 8px;
}
.logo {
  font-weight: 700;
}
.links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.links a {
  color: #fff;
  text-decoration: none;
}
.cta {
  background: #e63946;
  color: #fff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
}
@media (max-width: 480px) {
  /* Stack layout here */
}